前面已经成功将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的值哪里来的？？？？？？？？
网友评论