前面已经成功将Blockly注入到了网页中，得到了一个工作区，但是里面空空如也，什么事都做不了。因此本章要做的就是往工作区里添加工具箱，有了工具箱才算是真正的开始了

还记得之前注入应用时调用的注入接口吗，Blockly.inject(blocklyDiv, {});，里面的大括号当时留空了。其实工作区的所有配置都是通过这里传入，包括工具箱。在传入工具箱配置到工作区前，需要知道怎么定义工具箱。

准备工作

在想怎么定义工具箱之前，必须先把依赖的核心模块包含到网页中。少了这个这个模块，即使工具箱定义没问题，也正确传入了工作区中，连之前得到的工作区都看不到，更别说工具箱。

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

有点小兴奋。。。。。

分类

上面的工具箱太简单了，实际应用中几个块是做不了啥事的。但是那么多的块丢到一起，茫茫“块”海何处寻。因此给块分门别类是非常有必要的。看下面的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"
                        }
                    ]
                }
            ]
        };

可以看到是按定义的一样增加了两个类别，而且垃圾桶这个元素也出现了

分类嵌套

如果块的数量真的太多了，单层分类也不好找的时候，可以继续嵌套分类，把上面的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"
                                }
                            ]
                        }
                    ]
                }
            ]
        };

可以看到，现在支持二层分类了

动态分类

Blockly 允许通过注册的字符串键将一个类别与一个函数联系起来，从而实现支持动态分类。
这里留个坑，后面再补
主要介绍一下Blockly内建支持的动态分类。

内建动态分类

Blockly提供了两个内置的动态类别，一个创建变量类别，另一个创建函数类别。它们的字符串键分别是'VARIABLE'和'PROCEDURE'。按如下方式将其添加到工具箱中

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

创建变量这里只有一个按钮，点击它会弹出一个对话框，让你输入变量名字，输入后就会得到对该变量的三个操作方法 函数这里的块，名字上看起来总是有点别扭

对于分类的配置还有不少内容，比如禁用、隐藏、展开、风格、访问等，这些就。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。留坑留坑

预设块

工具箱定义可以包含有字段设置为默认值的块，或者有已经连接在一起的块。先直观的看看是啥样子

还不错的样子，它们的定义方法如下

{
  "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
            }
          }
        }
      }
    },
  ]
}

有点头大。。。。。。才四个简单的就这么麻烦。

好在还是有稍微简便的方法的，这些块都是基础的块上修改连接而来的，因此，将这些都在工作区上做好，然后使用下面这个方法将其描述方法打印到日志上，然后再拷贝出来用

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

最后想说，真的好多内容啊，留了好多坑，但是最大的坑还是，JSON定义里那些kind、type的值哪里来的？？？？？？？？