Puedes proporcionar ayuda sobre el bloqueo en forma de información sobre herramientas y una URL de ayuda.
Información sobre la herramienta
Las indicaciones sobre herramientas ofrecen ayuda instantánea cuando el usuario coloca el mouse sobre el bloque. Si el texto es largo, se unirá automáticamente.
JSON
{
// ...,
"tooltip": "Tooltip text."
}
JavaScript
init: function() {
this.setTooltip("Tooltip text.");
}
En la API de JavaScript, las indicaciones sobre herramientas también se pueden definir como una función en lugar de una cadena estática. Esto permite una ayuda dinámica. Consulta math_arithmetic para ver un ejemplo de una información sobre herramientas que cambia según la opción del menú desplegable que se haya elegido.
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];
});
}
};
Con la API de JavaScript, los bloques pueden especificar una función, en lugar de una cadena estática, que muestra la cadena de la información sobre herramientas. Esto permite que se muestren información sobre herramientas dinámicas.
Consulta math_arithmetic para ver un ejemplo.
Personalización
También puedes personalizar el aspecto de tus cuadros de herramientas proporcionando una función de renderización personalizada. Crea una función que acepte dos parámetros:
- primero, un elemento
<div>en el que renderizarás el contenido - segundo, el elemento real sobre el que se coloca el mouse y para el que mostrarás la información sobre herramientas
En el cuerpo de la función, puedes renderizar el contenido que quieras en el div. Para obtener la cadena de la información sobre herramientas definida en el bloque sobre el que se coloca el mouse, puedes llamar a Blockly.Tooltip.getTooltipOfObject(element);, donde element es el segundo parámetro anterior.
Por último, registra esta función para que Blockly pueda llamarla en el momento adecuado:
Blockly.Tooltip.setCustomTooltip(yourFnHere);
Para ver un ejemplo, consulta la demostración de las indicaciones de herramientas personalizadas.
URL de ayuda
Los bloques pueden tener una página de ayuda asociada. Los usuarios pueden acceder a esta opción haciendo clic con el botón derecho en el bloque y seleccionando "Ayuda" en el menú contextual. Si este valor es null, no se muestra el elemento "Ayuda".
JSON
{
// ...,
"helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}
JavaScript
init: function() {
// ...
this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}
Con la API de JavaScript, los bloques pueden especificar una función, en lugar de una cadena estática, que muestra una cadena de URL, lo que permite una ayuda dinámica.