¿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:

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 bloque

Una definición de bloque es un mixin 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 el 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. El más común de ellos es init, al que Blockly llama para inicializar un bloque y que se usa para definir su apariencia. Para obtener una lista completa, consulta las propiedades con valores de función en las clases Block y BlockSvg. Estas propiedades forman una interfaz eficaz para que se implementen las definiciones de bloques, y todas son opcionales.

Las definiciones de bloques también pueden tener funciones personalizadas, aunque Blockly no las llamará directamente. En su lugar, 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 de crear definiciones de bloques:

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