自定义版块概览

Blockly 附带大量预定义的块，从数学函数到循环结构应有尽有。不过，大多数应用都需要为其网域定义和实现自定义块。例如，绘图应用可能需要用来绘制线条和圆形的块，而机器人应用可能需要用来移动手臂和操控爪子的块。

如需定义和使用新类型的块，您需要满足以下三个条件：

• 版块定义：定义版块类型的外观和风格以及特定行为。
• 代码块生成器：为此类代码块生成代码字符串。 它始终使用 JavaScript 编写，即使目标语言不是 JavaScript 也是如此。
• 工具箱引用：对工具箱中块类型的引用，以便用户将其添加到工作区。

屏蔽设置

块定义用于定义块的外观和风格，例如文本、字段、连接和颜色。它还可以定义特定于块的行为，例如特定于块的事件处理脚本。例如，以下代码块：

可以使用 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"
}]);

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

如需详细了解屏蔽设置以及其运作方式，请参阅什么是屏蔽设置？。

代码块生成器

如需将代码块转换为代码，您需要为要生成的每种语言分别创建生成器函数。例如，下面是一个生成 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];
};

生成器函数接受要处理的代码块和语言生成器。它会为连接到输入（例如示例中的 VALUE 输入）和任何字段的所有块生成代码，然后将生成的字符串串联成一个更大的表达式。

如需了解详情，请参阅分块代码生成器。

工具箱参考文档

定义块类型后，使用类型名称在工具箱中引用该类型：

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>

如需了解详情，请参阅定义弹出式工具箱或定义类别工具箱。