¿Qué es una definición de bloque?

Una definición de bloque es un objeto que define un bloque personalizado. Por ejemplo, define el aspecto del bloque (texto, campos, conexiones, color, etc.), así como su comportamiento (controlador de eventos a nivel del bloque, etc.).

Por ejemplo, este bloque:

Es un bloque `string_length`.

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"
}]);

defineBlocksWithJsonArray crea una definición de bloque a partir de un objeto JSON.

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');
   }
};

Cuando usas JavaScript, creas la definición del bloque directamente.

Cómo funcionan las definiciones de bloqueo

Una definición de bloque es una combinación que contiene propiedades con valores de función. Cuando se crea una instancia de un bloque nuevo, estas propiedades se copian en el objeto de bloque recién creado. Blockly llama a estas funciones para invocar un comportamiento personalizado.

Debido a que las funciones de definición se mezclan en el objeto de bloque:

  • La palabra clave this en las funciones de definición hace referencia al objeto de bloque. Es decir, se puede usar para acceder a los métodos y las propiedades públicos de la clase Block (o BlockSvg).

Blockly define una pequeña cantidad de funciones que puedes usar para personalizar bloques. La más común de estas es init, que Blockly llama para inicializar un bloque y que se usa para definir la apariencia del bloque. Para obtener una lista completa, consulta las propiedades con valores de función en las clases Block y BlockSvg. Estas propiedades forman de manera eficaz una interfaz para que se implementen las definiciones de bloques. Todas son opcionales.

Las definiciones de bloques también pueden tener funciones personalizadas, aunque Blockly no las llamará directamente. En cambio, se pueden usar para implementar otras funciones. Por ejemplo, un controlador de eventos a nivel de bloque (la propiedad Block.onchange) podría delegar diferentes eventos a diferentes funciones personalizadas.

Cómo crear definiciones de bloques

Existen varias formas diferentes de crear definiciones de bloques:

  • Usa las herramientas para desarrolladores de Blockly para definir el aspecto de tu bloque. Copia el código JSON o JavaScript generado en tu código y agrega código personalizado según sea necesario. Para obtener más información, consulta Blockly Developer Tools.
  • Busca un bloque similar, copia su definición y modifícalo según sea necesario. Para obtener más información, consulta Cómo modificar definiciones existentes.
  • Escribe una definición de bloque a mano. Para obtener más información, consulta JSON y JavaScript.