新增自訂區塊

雖然 Blockly 定義了多個標準區塊,但大多數應用程式都需要定義及實作一些與網域相關的區塊。

區塊是由三個元件組成:

  • 區塊定義物件:定義區塊的外觀和行為,包括文字、顏色、欄位和連線。
  • Toolbox 參考資料:工具箱 XML 中區塊類型的參照,可讓使用者將其新增至工作區。
  • 產生器函式:產生這個區塊的程式碼字串。它一律會以 JavaScript 編寫,即使指定語言不是 JavaScript 也一樣。

區塊定義

禁止網頁透過指令碼檔案載入 Blocks。blocks/ 目錄包含幾個這類標準區塊的範例。假設您的區塊不符合現有類別,請建立新的 JavaScript 檔案。在編輯器的 HTML 檔案內,您必須加入這個新的 JavaScript 檔案 <script ...> 標記清單。

典型的區塊定義如下所示:

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:這個函式會定義區塊的外觀和風格。

這會定義下列區塊:

`string_length` 區塊。

您可以在定義區塊中找到區塊定義的詳細資料。

JSON 陣列

您可以使用 JSON 區塊定義陣列一次定義多個區塊。

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

新增工具箱參考資料

定義完成後,請使用類型名稱在工具箱中參照區塊:

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

詳情請參閱工具箱指南。

新增區塊程式碼產生器

最後,如要將區塊轉換為程式碼,請將區塊與產生器函式配對。產生器專屬於所需的輸出語言,但標準產生器通常採用下列格式:

javascriptGenerator.forBlock['text_length'] = function(block, generator) {
  // String or array length.
  var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Order.MEMBER];
};

產生器函式會接收區塊的參照以便處理。這個方法會將輸入內容 (上方 VALUE 輸入內容) 轉譯為程式碼字串,然後將這些輸入內容串連為更大的運算式。

→ 進一步瞭解區塊程式碼產生器...