blockly - 自定义块

添加自定义块

虽然Blockly定义了许多标准块，但是大多数应用程序需要定义和实现至少几个与域相关的块。

块由三个组件组成：

• 块定义对象：定义块的外观和行为，包括文本，颜色，字段和连接。
• 工具箱引用：对工具箱XML中块类型的引用，因此用户可以将其添加到工作区中。
• 生成器功能：生成此块的代码字符串。即使目标语言不是JavaScript，甚至对于Blockly for Android，它始终都是用JavaScript编写的。

块定义

Web负载块式加载通过脚本文件加载块。该blocks/目录包括几个标准块的示例。假设您的代码块不适合现有类别，请创建一个新的JavaScript文件。这个新的JavaScript文件需要包含在<script ...>编辑器HTML文件中的标记列表中。

注意：可以使用Blockly Developer Tools定义大多数块 ，而不是手动创建下面的代码。

典型的块定义如下所示：

// 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：这是块的类型名称。由于所有块都共享相同的名称空间，因此最好使用由类别（在此例中string）组成的名称，然后再使用块的函数（在本例中 length）。

• init：此功能定义块的外观。

这定义了以下块：

块定义的详细信息可以在“ 定义块”中找到 。

添加工具箱参考

定义后，使用类型名称将块引用到工具箱：

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

有关更多详细信息，请参见工具箱指南。

添加生成器功能

最后，要将块转换为代码，请将块与生成器函数配对。生成器特定于所需的输出语言，但是标准生成器通常采用以下格式：

Blockly.JavaScript['text_length'] = function(block) {
  // String or array length.
  var argument0 = Blockly.JavaScript.valueToCode(block, 'VALUE',
      Blockly.JavaScript.ORDER_FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Blockly.JavaScript.ORDER_MEMBER];
};

 

生成器功能将引用该块进行处理。它将输入（VALUE上面的输入）呈现为代码字符串，然后将它们串联为更大的表达式。

有关 更多详细信息，请参见使用自定义生成器。