Descripción general de los bloques personalizados

Blockly incluye una gran cantidad de bloques predefinidos, desde funciones matemáticas hasta estructuras de bucle. Sin embargo, la mayoría de las aplicaciones deben definir e implementar bloques personalizados para su dominio. Por ejemplo, una aplicación de dibujo podría necesitar bloques para dibujar líneas y círculos, y una aplicación de robótica podría necesitar bloques para mover un brazo y manipular una garra.

Para definir y usar un nuevo tipo de bloque, necesitas tres elementos:

• Definición de bloque: Define el aspecto de un tipo de bloque, así como ciertos comportamientos.
• Generador de código de bloque: Genera la cadena de código para los bloques de este tipo. Siempre se escribe en JavaScript, incluso si el idioma de destino no es JavaScript.
• Referencia de la caja de herramientas: Es una referencia al tipo de bloque en la caja de herramientas para que los usuarios puedan agregarlo al espacio de trabajo.

Definición de bloque

Una definición de bloque define el aspecto de un bloque, como su texto, sus campos, sus conexiones y su color. También puede definir el comportamiento específico del bloque, como un controlador de eventos específico del bloque. Por ejemplo, este bloque:

se puede definir en JSON o JavaScript de la siguiente manera:

JSON

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "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');
   }
};

Para obtener más información sobre las definiciones de bloques y su funcionamiento, consulta ¿Qué es una definición de bloque?.

Generadores de código de bloque

Para transformar un bloque en código, necesitas funciones de generador independientes para cada lenguaje que quieras generar. Por ejemplo, este es un generador que genera JavaScript:

javascriptGenerator.forBlock['string_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 del generador acepta el bloque que se está procesando y un generador de lenguaje. Genera código para cualquier bloque conectado a entradas (como la entrada VALUE en el ejemplo) y cualquier campo, y luego concatena las cadenas resultantes en una expresión más grande.

Para obtener más información, consulta Generadores de código de bloques.

Referencia de la caja de herramientas

Después de definir el tipo de bloque, usa el nombre del tipo para hacer referencia a él en una caja de herramientas:

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

Para obtener más información, consulta Define una caja de herramientas flotante o Define una caja de herramientas de categorías.