前面已經(jīng)成功將Blockly注入到了網(wǎng)頁(yè)中，得到了一個(gè)工作區(qū)，但是里面空空如也掐场，什么事都做不了。因此本章要做的就是往工作區(qū)里添加工具箱贩猎，有了工具箱才算是真正的開(kāi)始了
還記得之前注入應(yīng)用時(shí)調(diào)用的注入接口嗎刻肄，Blockly.inject(blocklyDiv, {});，里面的大括號(hào)當(dāng)時(shí)留空了融欧。其實(shí)工作區(qū)的所有配置都是通過(guò)這里傳入敏弃，包括工具箱。在傳入工具箱配置到工作區(qū)前噪馏，需要知道怎么定義工具箱麦到。
準(zhǔn)備工作
在想怎么定義工具箱之前，必須先把依賴的核心模塊包含到網(wǎng)頁(yè)中欠肾。少了這個(gè)這個(gè)模塊瓶颠，即使工具箱定義沒(méi)問(wèn)題，也正確傳入了工作區(qū)中刺桃，連之前得到的工作區(qū)都看不到粹淋，更別說(shuō)工具箱。
<script src="./node_modules/blockly/blocks_compressed.js"></script>
工具箱定義格式
官方推薦使用JSON瑟慈，那就用這個(gè)吧桃移。下面是一個(gè)簡(jiǎn)單的演示，工具箱中只有兩個(gè)塊
var toolbox = {
"kind": "flyoutToolbox",
"contents": [
{
"kind": "block",
"type": "controls_if"
},
{
"kind": "block",
"type": "controls_whileUntil"
}
]
};
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
分類
上面的工具箱太簡(jiǎn)單了纤虽，實(shí)際應(yīng)用中幾個(gè)塊是做不了啥事的。但是那么多的塊丟到一起绞惦，茫帽浦剑“塊”海何處尋。因此給塊分門別類是非常有必要的济蝉〗芄簦看下面的JSON就明白了，不多說(shuō)
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ù)量真的太多了，單層分類也不好找的時(shí)候雷酪，可以繼續(xù)嵌套分類淑仆，把上面的JSON簡(jiǎn)單改一下
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"
}
]
}
]
}
]
};
動(dòng)態(tài)分類
Blockly 允許通過(guò)注冊(cè)的字符串鍵將一個(gè)類別與一個(gè)函數(shù)聯(lián)系起來(lái)哥力，從而實(shí)現(xiàn)支持動(dòng)態(tài)分類蔗怠。
這里留個(gè)坑，后面再補(bǔ)
主要介紹一下Blockly內(nèi)建支持的動(dòng)態(tài)分類吩跋。
內(nèi)建動(dòng)態(tài)分類
Blockly提供了兩個(gè)內(nèi)置的動(dòng)態(tài)類別寞射，一個(gè)創(chuàng)建變量類別，另一個(gè)創(chuàng)建函數(shù)類別锌钮。它們的字符串鍵分別是'VARIABLE'和'PROCEDURE'桥温。按如下方式將其添加到工具箱中
{
"kind": "category",
"name": "Variables",
"custom": "VARIABLE"
},
{
"kind": "category",
"name": "Functions",
"custom": "PROCEDURE"
}
對(duì)于分類的配置還有不少內(nèi)容氛谜，比如禁用掏觉、隱藏、展開(kāi)值漫、風(fēng)格澳腹、訪問(wèn)等，這些就杨何。酱塔。。危虱。延旧。。槽地。迁沫。芦瘾。。集畅。近弟。。挺智。祷愉。。赦颇。二鳄。。媒怯。订讼。。扇苞。欺殿。。鳖敷。脖苏。。定踱。棍潘。。崖媚。蜒谤。。至扰。鳍徽。留坑留坑
預(yù)設(shè)塊
工具箱定義可以包含有字段設(shè)置為默認(rèn)值的塊，或者有已經(jīng)連接在一起的塊敢课。先直觀的看看是啥樣子
還不錯(cuò)的樣子阶祭，它們的定義方法如下
{
"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
}
}
}
}
},
]
}
有點(diǎn)頭大。直秆。濒募。。圾结。瑰剃。才四個(gè)簡(jiǎn)單的就這么麻煩。
好在還是有稍微簡(jiǎn)便的方法的筝野，這些塊都是基礎(chǔ)的塊上修改連接而來(lái)的晌姚，因此粤剧，將這些都在工作區(qū)上做好，然后使用下面這個(gè)方法將其描述方法打印到日志上挥唠，然后再拷貝出來(lái)用
console.log(Blockly.serialization.workspaces.save(Blockly.mainWorkspace));
最后想說(shuō)抵恋，真的好多內(nèi)容啊，留了好多坑宝磨，但是最大的坑還是弧关，JSON定義里那些kind、type的值哪里來(lái)的唤锉？世囊？？窿祥？株憾？？壁肋？号胚？
