自訂區塊簡介

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>

詳情請參閱「定義彈出式工具箱」或「定義類別工具箱」。