Aide sur le blocage

Vous pouvez fournir une aide sur le blocage sous la forme d'info-bulles et d'une URL d'aide.

Info-bulles

Les info-bulles offrent une aide immédiate lorsque l'utilisateur pointe sa souris sur le bloc. Si le texte est long, il sera mis en retour automatique.

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

Dans l'API JavaScript, les info-bulles peuvent également être définies en tant que fonction au lieu d'une chaîne statique. Cela permet d'obtenir une aide dynamique. Consultez math_arithmetic pour voir un exemple d'info-bulle qui change en fonction de l'option du menu déroulant choisie.

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_ADD'],
        'MINUS': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_MINUS'],
        'MULTIPLY': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_MULTIPLY'],
        'DIVIDE': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_DIVIDE'],
        'POWER': Blockly.Msg['MATH_ARITHMETIC_TOOLTIP_POWER']
      };
      return TOOLTIPS[mode];
    });
  }
};

À l'aide de l'API JavaScript, les blocs peuvent spécifier une fonction, au lieu d'une chaîne statique, qui renvoie la chaîne d'info-bulle. Cela permet d'afficher des info-bulles dynamiques. Pour consulter un exemple, voir math_arithmetic.

Personnalisation

Vous pouvez également personnaliser l'apparence de vos info-bulles en fournissant une fonction de rendu personnalisée. Créez une fonction qui accepte deux paramètres:

  • Tout d'abord, un élément <div> dans lequel vous allez afficher le contenu
  • Deuxièmement, l'élément sur lequel vous pointez et pour lequel vous afficherez l'info-bulle

Dans le corps de la fonction, vous pouvez afficher le contenu de votre choix dans la div. Pour obtenir la chaîne d'info-bulle définie sur le bloc sur lequel vous pointez, vous pouvez appeler Blockly.Tooltip.getTooltipOfObject(element);, où element est le deuxième paramètre ci-dessus.

Enfin, enregistrez cette fonction afin que Blockly puisse l'appeler au moment opportun:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

Pour obtenir un exemple, consultez la démonstration des info-bulles personnalisées.

URL de l'aide

Une page d'aide peut être associée aux blocs. Pour y accéder, les utilisateurs doivent effectuer un clic droit sur le bloc et sélectionner "Aide" dans le menu contextuel. Si cette valeur est null, l'élément "Aide" ne s'affiche pas.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

À l'aide de l'API JavaScript, les blocs peuvent spécifier une fonction, au lieu d'une chaîne statique, qui renvoie une chaîne d'URL, ce qui permet une aide dynamique.