1. 創(chuàng)建ToolBox

要?jiǎng)?chuàng)建一個(gè)ToolBox非常簡(jiǎn)單，只需要在定義workspace的時(shí)候進(jìn)行設(shè)置即可担汤。

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

但在此之前睦擂，需要先定義ToolBox贯钩。ToolBox由<xml></xml>標(biāo)簽定義。下面的代碼展示了如何定義一個(gè)toolbox畜份，其中id屬性用于查找該xml元素诞帐。

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

2. 嵌套目錄

<category>標(biāo)簽可以進(jìn)行嵌套實(shí)現(xiàn)多級(jí)目錄。

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

多級(jí)目錄的ToolBox

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

3.分割線

用<sep></sep>標(biāo)簽對(duì)可以在ToolBox目錄之間加入分割線钙态，效果如下：

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

分割線

<xml id="toolbox" style="display: none;">
    <category name="一級(jí)目錄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>在模塊中嵌入其他模塊屈尼，形成模塊組册着，用這個(gè)功能可以將經(jīng)常組合使用的模塊直接放在ToolBox中拴孤。至于在下面的代碼中，什么時(shí)候用value標(biāo)簽甲捏，什么時(shí)候用field標(biāo)簽演熟，為什么name叫"IF0"，"A"司顿，"B"芒粹，這與模塊的定義有關(guān)，我會(huì)在后面關(guān)于模塊定義的部分講解大溜。

<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標(biāo)簽可以給ToolBox添加文字和按鍵化漆，通過text屬性，可以設(shè)置他們顯示的文字內(nèi)容钦奋，通過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>

自定義文字和按鍵

另外付材，按鍵需要指定一個(gè)回調(diào)函數(shù)朦拖。button標(biāo)簽的callbackKey屬性可以定義點(diǎn)擊按鍵時(shí)的回調(diào)函數(shù)。同時(shí)厌衔，需要用registerButtonCallback函數(shù)將callbackKey和回調(diào)函數(shù)關(guān)聯(lián)起來璧帝。

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

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

點(diǎn)擊button時(shí)，將調(diào)用callback函數(shù)富寿。

6. 改變ToolBox

workspace的ToolBox屬性可以通過workspace.updateToolbox()函數(shù)動(dòng)態(tài)改變睬隶。它接受一個(gè)參數(shù)锣夹，可以是節(jié)點(diǎn)樹或者合法的定義字符串。
當(dāng)更新ToolBox時(shí)理疙，有一個(gè)限制必須要注意晕城。我們之前說過，在第一級(jí)中窖贤，目錄和模塊是不能共存的砖顷。如果舊的ToolBox第一級(jí)是目錄，那么新的ToolBox也必須是目錄赃梧，反之亦然滤蝠。

7. 動(dòng)態(tài)目錄

之前我們定義的目錄都是靜態(tài)的，每個(gè)目錄下面的元素授嘀，在最開始就已經(jīng)確定了物咳。為了使ToolBox更加靈活，Blockly提供了動(dòng)態(tài)改變目錄的功能蹄皱，最典型的比如變量和函數(shù)這兩個(gè)目錄览闰，里面的模塊數(shù)量和類型會(huì)根據(jù)當(dāng)前已經(jīng)定義的變量和函數(shù)動(dòng)態(tài)變化。

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

要定義一個(gè)動(dòng)態(tài)的目錄只需要3步：
a. 在ToolBox中定義一個(gè)目錄巷折，并用custom屬性設(shè)置一個(gè)名字压鉴。

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

b. 定義一個(gè)函數(shù)用于動(dòng)態(tài)生成目錄下的內(nèi)容。這個(gè)函數(shù)在每次目錄被點(diǎn)擊展開時(shí)調(diào)用锻拘，它必須接收一個(gè)workspace參數(shù)油吭，并且返回一個(gè)模塊/目錄節(jié)點(diǎn)樹列表，Blockly會(huì)將列表中的模塊/目錄按照順序放在目錄下署拟。

myCategoryFlyoutCallback = function(workspace) {
  // 通過workspace婉宰，你可以訪問到當(dāng)前工作空間下的所有數(shù)據(jù)，你也可以修改workspace推穷。
  var xmlList = [];
  // 根據(jù)workspace中的數(shù)據(jù)心包，生成模塊/目錄節(jié)點(diǎn)并填充xmlList
  return xmlList;  // 返回xmlList
};

c. 注冊(cè)目錄生成函數(shù)，將前兩步中定義的內(nèi)容關(guān)聯(lián)起來馒铃。

workspace.registerToolboxCategoryCallback('MY_CATEGORY', myCategoryFlyoutCallback);