自定义版块概览

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>

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