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.