Si bien Blockly define una cantidad de bloques estándar, la mayoría de las aplicaciones define e implementa al menos algunos bloques relevantes para el dominio.
Los bloques se componen de tres componentes:
- Objeto de definición de bloque: Define el aspecto y el comportamiento de un bloque, incluidos el texto, el color, los campos y las conexiones.
- Referencia de Toolbox: Es una referencia al tipo de bloque en el archivo XML de Toolbox para que los usuarios puedan agregarlo al lugar de trabajo.
- Función de generador: genera la cadena de código para este bloque. Siempre es escritas en JavaScript, incluso si el idioma de destino no es JavaScript.
Definición de bloques
Blockly para la Web carga bloques a través de archivos de secuencia de comandos. El directorio blocks/
incluye varios ejemplos de estos para los bloques estándar. Considerar los bloqueos
que no se ajustan a las categorías existentes, crea un nuevo archivo JavaScript. Esta nueva
el archivo JavaScript debe incluirse en la lista de etiquetas <script ...> del
en el archivo HTML del editor.
Una definición de bloque típica luce así:
JSON
Blockly.Blocks['string_length'] = {
init: function() {
this.jsonInit({
"message0": 'length of %1',
"args0": [
{
"type": "input_value",
"name": "VALUE",
"check": "String"
}
],
"output": "Number",
"colour": 160,
"tooltip": "Returns number of letters in the provided text.",
"helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
});
}
};
JavaScript
Blockly.Blocks['string_length'] = {
init: function() {
this.appendValueInput('VALUE')
.setCheck('String')
.appendField('length of');
this.setOutput(true, 'Number');
this.setColour(160);
this.setTooltip('Returns number of letters in the provided text.');
this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
}
};
string_length: Es el nombre del tipo del bloque. Dado que todos los bloques comparten el mismo espacio de nombres, es bueno usar un nombre compuesto por tu categoría (en este caso,string) seguido de la función de tu bloque (en este caso,length).init: Esta función define el aspecto del bloque.
Esto define el siguiente bloque:
Puedes encontrar los detalles de las definiciones de bloques en Define bloques.
Array JSON
Se pueden definir múltiples bloques a la vez usando un array de bloques JSON. definiciones
JSON
Blockly.defineBlocksWithJsonArray([
// Block for colour picker.
{
"type": "colour_picker",
"message0": "%1",
"args0": [
{
"type": "field_colour",
"name": "COLOUR",
"colour": "#ff0000"
}
],
"output": "Colour",
"helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
"style": "colour_blocks",
"tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
"extensions": ["parent_tooltip_when_inline"]
},
// Block for random colour.
{
"type": "colour_random",
"message0": "%{BKY_COLOUR_RANDOM_TITLE}",
"output": "Colour",
"helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
"style": "colour_blocks",
"tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
}
]);
Agregar referencia de la caja de herramientas
Una vez definido, usa el nombre del tipo para hacer referencia al bloque en la caja de herramientas:
<xml id="toolbox" style="display: none">
<category name="Text">
<block type="string_length"></block>
</category>
...
</xml>
Consulta la guía Caja de herramientas para obtener más detalles.
Se agregó un generador de código de bloque
Por último, para transformar el bloque en código, vincúlalo con una función generadora. Los generadores son específicos del lenguaje de salida deseado, pero los generadores estándar suelen tener el siguiente formato:
javascriptGenerator.forBlock['text_length'] = function(block, generator) {
// String or array length.
var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
return [argument0 + '.length', Order.MEMBER];
};
La función de generador toma una referencia al bloque para su procesamiento. Convierte las entradas (la entrada VALUE, arriba) en cadenas de código y, luego, las concatena en una expresión más grande.
→ Más información sobre los generadores de código de bloques…