添加自定義塊
雖然Blockly定義了許多標準塊镀脂，但大多數(shù)應用程序需要定義和實現(xiàn)至少一些域相關(guān)塊朽缎。
塊由三個部分組成：
- 塊定義對象：定義塊的外觀和行為沃缘，包括文本，顏色鞭达，字段和連接司忱。
- 工具箱參考：工具箱XML中對塊類型的引用皇忿，因此用戶可以將其添加到工作區(qū)。
- 生成器函數(shù)：生成此塊的代碼字符串坦仍。它是用JavaScript編寫的鳍烁，即使目標語言不是JavaScript，甚至是用于Android端的Blockly繁扎。
塊定義
用于Web加載的Blockly通過腳本文件加載塊幔荒。在“blocks/”目錄中包含幾個標準塊的示例。假設您的塊不適合現(xiàn)有類別梳玫，請創(chuàng)建一個新的JavaScript文件爹梁。這個新的JavaScript文件需要包含在編輯器HTML文件的<script ...>標簽列表中。
注意：大多數(shù)塊都可以使用Blockly Developer Tools定義提澎，而不是手動創(chuàng)建下面的代碼姚垃。
典型的塊定義如下所示：
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：這是塊的類型名稱。由于所有塊共享相同的命名空間盼忌，因此最好使用由您的類別（在本例中為字符串）組成的名稱积糯，后跟您的塊函數(shù)（在本例中為length）。
- init：此函數(shù)定義塊的外觀谦纱。
這定義了以下塊：
text-length.png
塊定義的詳細信息可以《塊的定義》中找到看成。
添加工具箱的方法，僅供參考
定義后跨嘉，使用類型名稱將塊引用到工具箱：
<xml id="toolbox" style="display: none">
<category name="Text">
<block type="string_length"></block>
</category>
...
</xml>
在《工具箱》中可以看到更多細節(jié)川慌。
添加生成器功能
最后，要將塊轉(zhuǎn)換為代碼偿荷，請將塊與生成器函數(shù)配對窘游。生成器特定于所需的輸出語言，但標準生成器通常采用以下格式：
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];
};
生成器函數(shù)引用塊進行處理跳纳。它將輸入（上面的VALUE輸入）呈現(xiàn)為代碼字符串，然后將它們連接成更大的表達式贪嫂。
有關(guān)詳細信息寺庄，請參閱《使用自定義生成器》。
