前面已經(jīng)成功將Blockly注入到了網(wǎng)頁中，得到了一個工作區(qū)，但是里面空空如也，什么事都做不了。因此本章要做的就是往工作區(qū)里添加工具箱，有了工具箱才算是真正的開始了

還記得之前注入應(yīng)用時調(diào)用的注入接口嗎，Blockly.inject(blocklyDiv, {});，里面的大括號當(dāng)時留空了。其實工作區(qū)的所有配置都是通過這里傳入，包括工具箱。在傳入工具箱配置到工作區(qū)前，需要知道怎么定義工具箱。

準(zhǔn)備工作

在想怎么定義工具箱之前，必須先把依賴的核心模塊包含到網(wǎng)頁中。少了這個這個模塊，即使工具箱定義沒問題，也正確傳入了工作區(qū)中，連之前得到的工作區(qū)都看不到，更別說工具箱。

<script src="./node_modules/blockly/blocks_compressed.js"></script>

工具箱定義格式

官方推薦使用JSON，那就用這個吧。下面是一個簡單的演示，工具箱中只有兩個塊

var toolbox = {
    "kind": "flyoutToolbox",
    "contents": [
      {
        "kind": "block",
        "type": "controls_if"
      },
      {
        "kind": "block",
        "type": "controls_whileUntil"
      }
    ]
  };
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

分類

上面的工具箱太簡單了，實際應(yīng)用中幾個塊是做不了啥事的。但是那么多的塊丟到一起，茫?！皦K”海何處尋。因此給塊分門別類是非常有必要的。看下面的JSON就明白了，不多說

        var toolbox = {
            "kind": "categoryToolbox",
            "contents": [
                {
                    "kind": "category",
                    "name": "Control",
                    "contents": [
                        {
                            "kind": "block",
                            "type": "controls_if"
                        },
                    ]
                },
                {
                    "kind": "category",
                    "name": "Logic",
                    "contents": [
                        {
                            "kind": "block",
                            "type": "logic_compare"
                        },
                        {
                            "kind": "block",
                            "type": "logic_operation"
                        },
                        {
                            "kind": "block",
                            "type": "logic_boolean"
                        }
                    ]
                }
            ]
        };

分類嵌套

如果塊的數(shù)量真的太多了，單層分類也不好找的時候，可以繼續(xù)嵌套分類，把上面的JSON簡單改一下

        var toolbox = {
            "kind": "categoryToolbox",
            "contents": [
                {
                    "kind": "category",
                    "name": "Core",
                    "contents": [
                        {
                            "kind": "block",
                            "type": "controls_if"
                        },
                        {
                            "kind": "block",
                            "type": "logic_compare"
                        },
                    ]
                },
                {
                    "kind": "category",
                    "name": "Custom",
                    "contents": [
                        {
                            "kind": "block",
                            "type": "start"
                        },
                        {
                            "kind": "category",
                            "name": "Move",
                            "contents": [
                                {
                                    "kind": "block",
                                    "type": "move_forward"
                                }
                            ]
                        },
                        {
                            "kind": "category",
                            "name": "Turn",
                            "contents": [
                                {
                                    "kind": "block",
                                    "type": "turn_left"
                                }
                            ]
                        }
                    ]
                }
            ]
        };

動態(tài)分類

Blockly 允許通過注冊的字符串鍵將一個類別與一個函數(shù)聯(lián)系起來，從而實現(xiàn)支持動態(tài)分類。
這里留個坑，后面再補
主要介紹一下Blockly內(nèi)建支持的動態(tài)分類。

內(nèi)建動態(tài)分類

Blockly提供了兩個內(nèi)置的動態(tài)類別，一個創(chuàng)建變量類別，另一個創(chuàng)建函數(shù)類別。它們的字符串鍵分別是'VARIABLE'和'PROCEDURE'。按如下方式將其添加到工具箱中

{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE"
},
{
  "kind": "category",
  "name": "Functions",
  "custom": "PROCEDURE"
}

對于分類的配置還有不少內(nèi)容，比如禁用、隱藏、展開、風(fēng)格、訪問等，這些就。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。留坑留坑

預(yù)設(shè)塊

還不錯的樣子，它們的定義方法如下

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "logic_boolean"
    },
    {
      "kind": "block",
      "type": "math_number",
      "fields": {
        "NUM": 42
      }
    },
    {
      "kind": "block",
      "type": "controls_for",
      "inputs": {
        "FROM": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
        "TO": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 10
            }
          }
        },
        "BY": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
      }
    },
    {
      "kind": "block",
      "type": "math_arithmetic",
      "fields": {
        "OP": "ADD"
      },
      "inputs": {
        "A": {
          "shadow": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
        "B": {
          "shadow": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        }
      }
    },
  ]
}

有點頭大。。。。。。才四個簡單的就這么麻煩。

好在還是有稍微簡便的方法的，這些塊都是基礎(chǔ)的塊上修改連接而來的，因此，將這些都在工作區(qū)上做好，然后使用下面這個方法將其描述方法打印到日志上，然后再拷貝出來用

console.log(Blockly.serialization.workspaces.save(Blockly.mainWorkspace));

最后想說，真的好多內(nèi)容啊，留了好多坑，但是最大的坑還是，JSON定義里那些kind、type的值哪里來的？？？？？？？？