JSON и JavaScript

Blockly предлагает два способа определения блоков: объекты JSON, использующие пары ключ-значение, и функции JavaScript, которые вызывают API Blockly. Формат JSON предпочтительнее, поскольку он упрощает локализацию и легче читается и пишется. Однако его нельзя использовать для непосредственного определения расширенных функций, таких как мутаторы или валидаторы. Их необходимо писать на JavaScript, обычно в виде расширений .

Используйте JSON или JavaScript

Этот блок:

Блок `string_length`.

Может быть определено в формате JSON или JavaScript следующим образом.

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 преобразует каждый JSON-объект в объект определения блока с функцией init . Эти объекты сохраняются в Blockly.Blocks .

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

Поскольку объекты определения блока смешиваются с объектами блока, ключевое слово this относится к фактическому создаваемому блоку.

Оба метода приводят к сохранению объекта определения блока в Blockly.Blocks с ключом, равным имени типа блока ( string_length ). Объект определения блока имеет единственный метод ( init ), который определяет форму блока.

Сочетайте JSON и JavaScript

Формат JSON в основном предназначен для определения внешнего вида блока. Он не позволяет напрямую определять некоторые функции, такие как валидаторы и мутаторы, для которых требуется определение функции. Чтобы решить эту проблему, определите как можно большую часть блока с помощью JSON, а остальную часть используйте JavaScript.

В следующем примере создается определение блока с функцией init , которая использует jsonInit для загрузки объекта JSON и API JavaScript для определения динамической всплывающей подсказки.

JavaScript 

// Define the block structure in JSON.
var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    // Use jsonInit to load the JSON block structure.
    this.jsonInit(mathChangeJson);

    // Use JavaScript to define a tooltip function.
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

API определения блока

В этом разделе приводится краткое описание объектов и функций, используемых для определения пользовательских блоков.

Blockly.Blocks

Blockly.Blocks — это объект, хранящий определения блоков. Его ключами являются имена типов блоков, а значениями — объекты определений блоков. Используйте Blockly.Blocks при определении блоков с помощью JavaScript:

Blockly.Blocks['my_block'] = {
  init: function() {/* ... */},
  onchange: function() {/* ... */},
  // ...
}

Распространенная ошибка заключается в том, чтобы предположить, что Blockly.Blocks хранит блоки, и попытаться сделать что-то подобное следующему. Это не сработает, потому что Blockly.Blocks хранит определения блоков, а не сами блоки.

// Fails with "Blockly.Blocks.my_block.setColour is not a function".
Blockly.Blocks['my_block'].setColour(150);

defineBlocksWithJsonArray

defineBlocksWithJsonArray принимает массив JSON-объектов, создает на их основе определения блоков и добавляет их в Blockly.Blocks .

Blockly.common.defineBlocksWithJsonArray([
  {
    type: 'my_block1',
    // ...
  }
  {
    type: 'my_block3',
    // ...
  }
  {
    type: 'my_block2',
    // ...
  }
]);

createBlockDefinitionsFromJsonArray и defineBlocks

createBlockDefinitionsFromJsonArray принимает массив объектов JSON и возвращает объект, сопоставляющий имена типов блоков с определениями блоков. Обычно это используется с defineBlocks , которая добавляет определения блоков в Blockly.Blocks .

const myBlockDefinitions = Blockly.common.createBlockDefinitionsFromJsonArray([
  {
    type: 'my_block1',
    // ...
  }
  {
    type: 'my_block3',
    // ...
  }
  {
    type: 'my_block2',
    // ...
  }
]);
Blockly.common.defineBlocks(myBlockDefinitions);

Block.jsonInit

jsonInit принимает JSON-объект и вызывает соответствующие методы Block . Например, JSON-объект с парой ключ-значение colour: 150 приводит к вызову this.setColour(150) . Используйте jsonInit в функции init для загрузки JSON-объекта.

var myJson = {
  // ...
};

Blockly.Blocks['my_block'] = {
  init: function() {
    this.jsonInit(myJson);
    // The rest of the init function.
  }
};