3. 自定義積木

雖然Blockly定義了許多標準積木，但大多數(shù)應用程序需要定義和實現(xiàn)至少一些域相關(guān)積木，這也是Scartch3.0 Blocks使用Blockly的原因，可擴展性強。
積木由三個部分組成：
積木定義對象：定義積木的外觀和行為，包括文本，顏色，字段和連接。
添加積木到Toolbox：工具箱XML中對積木類型的引用，因此用戶可以將其添加到工作區(qū)。
添加積木代碼：生成此積木的代碼字符串。它是用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"
    });
  }
};

此處添加了一個名為VALUE的的積木，輸入一個字符串（String）參數(shù)，輸出為數(shù)字（Number）,積木顯示內(nèi)容為length of。

自定義積木 -c

將積木添加到Toolbox

定義后，使用類型名稱將積木引用到工具箱：

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

添加積木對應的代碼

最后，要將積木轉(zhuǎn)換為代碼，請將積木與生成器函數(shù)配對。每個積木都對應有生成器函數(shù)，多個積木形成積木組，多個生成器函數(shù)，形成代碼片段，片段就可以執(zhí)行。生成器特定于所需的輸出語言，但標準生成器通常采用以下格式：

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];
}

Blockly可以將積木導出為許多編程語言，包括這些流行的選項：JavaScript、Python、PHP、Lua、Dart

4. Events

工作區(qū)上的每個更改都會觸發(fā)一個事件。這些事件完整地描述了每個變化的前后狀態(tài)。

監(jiān)聽事件

工作區(qū)具有可用于偵聽事件流的addChangeListener方法和removeChangeListener方法。以下示例檢測用戶何時創(chuàng)建其第一條評論，然后停止監(jiān)聽。

function onFirstComment(event) {
  if (event.type == Blockly.Events.CHANGE &&
      event.element == 'comment' &&
      !event.oldValue && event.newValue) {
    alert('Congratulations on creating your first comment!')
    workspace.removeChangeListener(onFirstComment);
  }
}
workspace.addChangeListener(onFirstComment);

積木也可以定義onchange函數(shù)，只要積木的工作空間發(fā)生更改，就會調(diào)用該函數(shù)。

事件類型

積木創(chuàng)建事件（ Blockly.Events.BLOCK_CREATE）
積木刪除事件（ Blockly.Events.BLOCK_DELETE）
積木變更事件（ Blockly.Events.BLOCK_DCHANGE）
積木移動事件（ Blockly.Events.BLOCK_MOVE）
變量創(chuàng)建事件（ Blockly.Events.VAR_CREATE）
變量刪除事件（ Blockly.Events.VAR_DELETE）
變量重命名事件(Blockly.Events.VAR_RENAME)
UI事件(lockly.Events.UI)：例如滾動，縮放，拖動氣泡等事件。

5. 代碼編輯器

生成代碼

第一步是導入相關(guān)語言的生成器。 Blockly包括以下生成器：
javascript_compressed.js
python_compressed.js
php_compressed.js
lua_compressed.js
dart_compressed.js
應該在blockly_compressed.js之后包含代碼生成器。例如，以下是包含的JavaScript生成器：

<script src="blockly_compressed.js"></script>
<script src="javascript_compressed.js"></script>

通過此調(diào)用，用戶的塊可以隨時從您的應用程序?qū)С龅酱a：
var code = Blockly.JavaScript.workspaceToCode(workspace);
在前面兩行中用Python， PHP， Lua或Dart替換JavaScript以切換生成的語法。

實時生成

通過向Blockly的change事件添加一個監(jiān)聽器來實時生成和顯示代碼：

function myUpdateFunction(event) {
    var code = Blockly.JavaScript.workspaceToCode(workspace);
    document.getElementById('textarea').value = code;
}
workspace.addChangeListener(myUpdateFunction);