Blockly開發3 -- 創建工具欄ToolBox

1. 創建ToolBox

要創建一個ToolBox非常簡單，只需要在定義workspace的時候進行設置即可。

var workspace = Blockly.inject(blocklyDiv, {
    media: 'blockly/media/',
    toolbox: document.getElementById('toolbox'),  // 定義ToolBox
});

但在此之前，需要先定義ToolBox。ToolBox由<xml></xml>標籤定義。下面的代碼展示瞭如何定義一個toolbox，其中id屬性用於查找該xml元素。

// 定義toolbox
<xml id="toolbox" style="display: none;">
    <block type="controls_if"></block>
</xml>

2. 嵌套目錄

<category>標籤可以進行嵌套實現多級目錄。

<xml id="toolbox" style="display: none;">
    <category name="一級目錄1">
        <block type="controls_if"></block>
    </category>
    <category name="一級目錄2">
        <category name="二級目錄1">
            <block type="controls_if"></block>
        </category>
        <category name="二級目錄2">
            <block type="controls_if"></block>
        </category>
    </category>
</xml>

 

多級目錄的ToolBox

要注意，在根目錄中，不能同時存在<category>標籤和<block>標籤。

 

// 以下是錯誤的ToolBox定義
<xml id="toolbox" style="display: none;">
    <block type="controls_if"></block>
    <category name="一級目錄1">
        <block type="controls_if"></block>
    </category>
</xml>

3.分割線

用<sep></sep>標籤對可以在ToolBox目錄之間加入分割線，效果如下：

<xml id="toolbox" style="display: none;">
    <category name="一級目錄1">
        <block type="controls_if"></block>
    </category>
    <sep></sep>
    <category name="一級目錄2">
        <category name="二級目錄1">
            <block type="controls_if"></block>
        </category>
        <category name="二級目錄2">
            <block type="controls_if"></block>
        </category>
    </category>
</xml>

 

分割線

如果將<sep></sep>放在<block>標籤之間，則可以通過gap屬性定義兩個block之間的間隔，單位爲px，默認情況下這個值爲24，下面的代碼將間隔分別改爲40和5。

 

<xml id="toolbox" style="display: none;">
    <category name="一級目錄1">
        <block type="controls_if"></block>
        <sep gap="40"></sep>
        <block type="controls_if"></block>
        <sep gap="5"></sep>
        <block type="controls_if"></block>
    </category>
</xml>

改變模塊間隔

4.在ToolBox中加入模塊組

在ToolBox定義中，可以通過<field>和<value>在模塊中嵌入其他模塊，形成模塊組，用這個功能可以將經常組合使用的模塊直接放在ToolBox中。至於在下面的代碼中，什麼時候用value標籤，什麼時候用field標籤，爲什麼name叫"IF0"，"A"，"B"，這與模塊的定義有關，我會在後面關於模塊定義的部分講解。

<xml id="toolbox" style="display: none;">
    <block type="controls_if">
        <value name="IF0">
            <block type="logic_operation">
                <value name="A">
                    <block type="logic_boolean">
                        <field name="BOOL">TRUE</field>
                    </block>
                </value>
                <value name="B">
                    <block type="logic_boolean">
                        <field name="BOOL">FALSE</field>
                    </block>
                </value>
            </block>
        </value>
    </block>
</xml>

模塊組

5. 在ToolBox中加入文字和按鍵

用label和button標籤可以給ToolBox添加文字和按鍵，通過text屬性，可以設置他們顯示的文字內容，通過web-class屬性，你還可以自定義他們的樣式。下面代碼展示瞭如何使用它們：

<xml id="toolbox" style="display: none;">
    <label text="a label" web-class="labelStyle"></label>
    <button text="a button" web-class="buttonStyle"></button>
</xml>
<style>
    .labelStyle>.blocklyFlyoutLabelText {
        font-style: italic;
        fill: blue;
    }
    .buttonStyle {
        font-style: italic;
        fill: red;
    }
</style>

自定義文字和按鍵

另外，按鍵需要指定一個回調函數。button標籤的callbackKey屬性可以定義點擊按鍵時的回調函數。同時，需要用registerButtonCallback函數將callbackKey和回調函數關聯起來。

<xml id="toolbox" style="display: none;">
    <button text="a button" callbackKey="buttonKey"></button>
</xml>
<script>
    //生成模塊列表區域
    var blocklyDiv = document.getElementById('blocklyDiv');
    var workspace = Blockly.inject(blocklyDiv, {
        media: 'blockly/media/',
        toolbox: document.getElementById('toolbox'),
    });

    //調整工作區域大小
    var onresize = function (e) {
        Blockly.svgResize(workspace);
    };
    //註冊resize處理函數
    window.addEventListener('resize', onresize, false);
    Blockly.svgResize(workspace);
    // 註冊回調函數
    workspace.registerButtonCallback("buttonKey", callback);
    // 定義回調函數
    function callback() {
        console.log("a button pressed");
    }
</script>

點擊button時，將調用callback函數。

6. 改變ToolBox

workspace的ToolBox屬性可以通過workspace.updateToolbox()函數動態改變。它接受一個參數，可以是節點樹或者合法的定義字符串。
當更新ToolBox時，有一個限制必須要注意。我們之前說過，在第一級中，目錄和模塊是不能共存的。如果舊的ToolBox第一級是目錄，那麼新的ToolBox也必須是目錄，反之亦然。

7. 動態目錄

之前我們定義的目錄都是靜態的，每個目錄下面的元素，在最開始就已經確定了。爲了使ToolBox更加靈活，Blockly提供了動態改變目錄的功能，最典型的比如變量和函數這兩個目錄，裏面的模塊數量和類型會根據當前已經定義的變量和函數動態變化。

 <!-- 變量與函數目錄 -->
<category name="Variables" custom="VARIABLE"></category>
<category name="Functions" custom="PROCEDURE"></category>

要定義一個動態的目錄只需要3步：
a. 在ToolBox中定義一個目錄，並用custom屬性設置一個名字。

<category name="myCategory" custom="MY_CATEGORY"></category>

b. 定義一個函數用於動態生成目錄下的內容。這個函數在每次目錄被點擊展開時調用，它必須接收一個workspace參數，並且返回一個模塊/目錄節點樹列表，Blockly會將列表中的模塊/目錄按照順序放在目錄下。

myCategoryFlyoutCallback = function(workspace) {
  // 通過workspace，你可以訪問到當前工作空間下的所有數據，你也可以修改workspace。
  var xmlList = [];
  // 根據workspace中的數據，生成模塊/目錄節點並填充xmlList
  return xmlList;  // 返回xmlList
};

c. 註冊目錄生成函數，將前兩步中定義的內容關聯起來。

workspace.registerToolboxCategoryCallback('MY_CATEGORY', myCategoryFlyoutCallback);