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);