工具箱
工具箱是用戶可以創(chuàng)建新塊的側(cè)邊菜單果覆。工具箱的結(jié)構(gòu)使用XML指定呜笑，XML可以是節(jié)點樹夫否，也可以是字符串表示。
將此XML注入到頁面中時叫胁，會將其傳遞給Blockly凰慈。如果您不想手動輸入XML，我們建議您查看Blockly Developer Tools驼鹅。有了它微谓，您可以構(gòu)建一個工具箱并使用可視化界面自動生成其工具箱XML。
這是一個使用節(jié)點樹的最小示例：
<xml id="toolbox" style="display: none">
<block type="controls_if"></block>
<block type="controls_whileUntil"></block>
</xml>
<script>
var workspace = Blockly.inject('blocklyDiv',
{toolbox: document.getElementById('toolbox')});
</script>
以下是使用字符串表示的相同示例：
<script>
var toolbox = '<xml>';
toolbox += ' <block type="controls_if"></block>';
toolbox += ' <block type="controls_whileUntil"></block>';
toolbox += '</xml>';
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});
</script>
以上兩者都創(chuàng)建了具有兩個塊的相同工具箱：
如果存在少量塊输钩，則可以顯示它們而沒有任何類別（如上面的最小示例中所示）豺型。在此簡單模式下，所有可用塊都顯示在工具箱中买乃，主工作區(qū)上沒有滾動條姻氨，并且不需要垃圾桶。
分類
工具箱中的塊可以按類別組織剪验。這里有兩個類別（'Control'和'Logic'）肴焊，每個類別包含三個塊：
<xml id="toolbox" style="display: none">
<category name="Control">
<block type="controls_if"></block>
<block type="controls_whileUntil"></block>
<block type="controls_for">
</category>
<category name="Logic">
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_boolean"></block>
</category>
</xml>
下面是生成的工具箱，單擊“邏輯”類別功戚，以便可以看到彈出窗口中的三個邏輯塊：
類別的存在改變了Blockly的UI以支持更大的應(yīng)用程序娶眷。出現(xiàn)滾動條，允許無限大的工作空間啸臀。上下文菜單包含更多高級選項届宠，例如添加注釋或折疊塊。可以使用配置選項覆蓋所有這些功能席揽。
可以使用可選的顏色屬性為每個類別指定顏色顽馋。請注意英國拼寫。顏色是定義色調(diào)的數(shù)字（0-360）幌羞。
<xml id="toolbox" style="display: none">
<category name="Logic" colour="210">...</category>
<category name="Loops" colour="120">...</category>
<category name="Math" colour="230">...</category>
<category name="Colour" colour="20">...</category>
<category name="Variables" colour="330" custom="VARIABLE"></category>
<category name="Functions" colour="290" custom="PROCEDURE"></category>
</xml>
此顏色顯示為類別左側(cè)的矩形寸谜，并作為當(dāng)前所選類別的突出顯示：
主題
如果您已經(jīng)開始使用Blockly主題，那么您將需要添加categorystyle屬性而不是color屬性属桦，如下所示熊痴。
<category name="Logic" categorystyle="logic_category">
</category>
有關(guān)主題的更多信息，請查看《主題》聂宾。
動態(tài)類別
有兩類具有特殊行為果善。變量和函數(shù)類別定義為沒有內(nèi)容，但具有'custom'屬性 'VARIABLE'或'PROCEDURE'分別系谐。這些類別將使用適當(dāng)?shù)膲K自動填充巾陕。
<category name="Variables" custom="VARIABLE"></category>
<category name="Functions" custom="PROCEDURE"></category>
開發(fā)人員還可以使用該custom屬性創(chuàng)建動態(tài)填充的彈出類別。例如纪他，要創(chuàng)建具有自定義顏色塊集的彈出按鈕：
- 使用自定義屬性創(chuàng)建類別鄙煤。
<category name="Colours" custom="COLOUR_PALETTE"></category> - 定義回調(diào)以提供類別內(nèi)容。此回調(diào)應(yīng)該在工作空間中返回并返回XML塊元素的數(shù)組茶袒。
/** * Construct the blocks required by the flyout for the colours category. * @param {!Blockly.Workspace} workspace The workspace this flyout is for. * @return {!Array.<!Element>} Array of XML block elements. */ myApplication.coloursFlyoutCallback = function(workspace) { // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447'] var colourList = myApplication.getPalette(); var xmlList = []; if (Blockly.Blocks['colour_picker']) { for (var i = 0; i < colourList.length; i++) { var blockText = '<block type="colour_picker">' + '<field name="COLOUR">' + colourList[i] + '</field>' + '</block>'; var block = Blockly.Xml.textToDom(blockText); xmlList.push(block); } } return xmlList; }; - 在工作區(qū)上注冊回調(diào)梯刚。
myWorkspace.registerToolboxCategoryCallback( 'COLOUR_PALETTE', myApplication.coloursFlyoutCallback);
樹類別
類別可以嵌套在其他類別中。這里有兩個頂級類別（'Core'和'Custom'）薪寓，每個類別包含兩個子類別亡资，每個子類別包含塊：
<xml id="toolbox" style="display: none">
<category name="Core">
<category name="Control">
<block type="controls_if"></block>
<block type="controls_whileUntil"></block>
</category>
<category name="Logic">
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_boolean"></block>
</category>
</category>
<category name="Custom">
<block type="start"></block>
<category name="Move">
<block type="move_forward"></block>
<block type="move_backward"></block>
</category>
<category name="Turn">
<block type="turn_left"></block>
<block type="turn_right"></block>
</category>
</category>
</xml>
請注意向叉，類別可以包含子類別和塊。在上面的例子中旷太，'Custom'有兩個子類別（'Move'和'Turn'），以及它自己的一個塊（'start'）销睁。
擴(kuò)展
默認(rèn)情況下，加載Blockly時會顯示折疊類別冻记，但可以使用擴(kuò)展類別。
<category name="..." expanded="true">
塊分組
XML可以包含自定義塊或塊組冗栗。下面是四個塊：
-
一個簡單的 logic_boolean 塊：true.png
-
一個已修改為顯示數(shù)字42而不是默認(rèn)值0的math_number塊：42.png
-
一個controls_for塊演顾，它連接了三個math_number塊：count-with.png
-
一個math_arithmetic塊，它連接了兩個math_number陰影塊：1plus1.png
以下是在工具箱中生成這四個塊的代碼：
<xml id="toolbox" style="display: none">
<block type="logic_boolean"></block>
<block type="math_number">
<field name="NUM">42</field>
</block>
<block type="controls_for">
<value name="FROM">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="TO">
<block type="math_number">
<field name="NUM">10</field>
</block>
</value>
<value name="BY">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
</block>
<block type="math_arithmetic">
<field name="OP">ADD</field>
<value name="A">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
<value name="B">
<shadow type="math_number">
<field name="NUM">1</field>
</shadow>
</value>
</block>
</xml>
這些自定義塊或組的XML與Blockly的XML保存格式相同葛虐。因此屿脐，為這些塊構(gòu)造XML的最簡單方法是使用Code應(yīng)用程序構(gòu)建塊宪卿，然后切換到XML選項卡并復(fù)制結(jié)果。工具箱會忽略x佑钾，y和id屬性，并且可能會將其刪除代赁。
陰影塊
陰影塊是占位符塊邮偎，可執(zhí)行多種功能：
- 它們指示其父塊的默認(rèn)值义黎。
- 它們允許用戶直接鍵入值廉涕，而無需獲取數(shù)字或字符串塊。
- 與常規(guī)塊不同宠纯，如果用戶在其上放置塊层释，則會替換它們婆瓜。
- 它們告知用戶預(yù)期的值類型贡羔。
無法直接使用代碼應(yīng)用程序構(gòu)建陰影塊乖寒。相反，可以使用常規(guī)塊磅轻，然后將XML中的<block ...>和</ block>更改為<shadow ...>和</ shadow>。
注意：陰影塊可能不包含變量字段或具有不是陰影的子項聋溜。
變量
大多數(shù)字段都很容易在工具箱中設(shè)置撮躁，只需要名稱屬性及其值。
<field name="NUM">1</field>
但是缨称，變量具有其他可選屬性祝迂，這些屬性會影響它們的創(chuàng)建方式。變量字段可以具有id和variabletype当凡。請注意纠俭，variabletype不使用駝峰式命名。
<field name="VAR" id=".n*OKd.u}2UD9QFicbEX" variabletype="Panda">Bai Yun</field>
如果設(shè)置了id朴则，那么在創(chuàng)建塊時钓简，variabletype（如果設(shè)置）和值必須匹配具有該id的任何現(xiàn)有變量外邓。如果不存在具有該id的變量，則將創(chuàng)建新變量侦啸。通常丧枪，id不應(yīng)包含在工具箱XML中。省略id允許變量在具有相同值和variabletype的情況下引用現(xiàn)有變量顶捷。
如果設(shè)置了variabletype屎篱，則將使用該類型創(chuàng)建變量葵蒂。如果未設(shè)置variabletype践付，則變量將具有默認(rèn)的''類型缺厉。如果使用類型變量，則必須設(shè)置variabletype命爬，因為Blockly不會推斷類型辐脖。
更多信息請參閱《變量》
分離器
在任意兩個類別之間添加<sep> </ sep>標(biāo)記將創(chuàng)建一個分隔符嗜价。
默認(rèn)情況下，每個塊與其下鄰居分開24個像素家淤∩桑可以使用'gap'屬性更改此分隔，該屬性將替換默認(rèn)間隙绿鸣。
<xml id="toolbox" style="display: none">
<block type="math_number"></block>
<sep gap="32"></sep>
<block type="math_arithmetic">
<field name="OP">ADD</field>
</block>
<sep gap="8"></sep>
<block type="math_arithmetic">
<field name="OP">MINUS</field>
</block>
</xml>
調(diào)整塊之間的間隙允許在工具箱中創(chuàng)建邏輯塊組。
按鈕和標(biāo)簽
您可以在任何可以將塊放入工具箱的位置放置按鈕或標(biāo)簽痴施。
<xml id="toolbox" style="display: none">
<block type="logic_operation"></block>
<label text="A label" web-class="myLabelStyle"></label>
<label text="Another label"></label>
<block type="logic_negate"></block>
<button text="A button" callbackKey="myFirstButtonPressed"></button>
<block type="logic_boolean"></block>
</xml>
<style>
.myLabelStyle>.blocklyFlyoutLabelText {
font-style: italic;
fill: green;
}
</style>
您可以指定要應(yīng)用于按鈕或標(biāo)簽的CSS類名稱辣吃。在上面的示例中芬探，第一個標(biāo)簽使用自定義樣式，而第二個標(biāo)簽使用默認(rèn)樣式哩簿。
按鈕應(yīng)該有回調(diào)函數(shù)，而標(biāo)簽不需要羡玛。要為給定按鈕設(shè)置回調(diào)函數(shù)宗苍，使用
yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).
您的函數(shù)應(yīng)該接受點擊的按鈕作為參數(shù)讳窟。變量類別中的“創(chuàng)建變量...”按鈕是帶回調(diào)函數(shù)的按鈕的一個很好的示例。
禁用項
可以使用可選的disabled屬性單獨禁用工具箱中的塊：
<xml id="toolbox" style="display: none">
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="math_single" disabled="true"></block>
</xml>
禁用塊可用于限制用戶的選擇是越。也許高級塊可能會在某些成就后解鎖碌上。
更改工具箱
應(yīng)用程序可以通過單個函數(shù)調(diào)用隨時更改工具箱中可用的塊：
workspace.updateToolbox(newTree);
與初始配置期間的情況一樣馏予，newTree可以是節(jié)點樹或字符串表示。唯一的限制是模式不能改變;也就是說呢岗，如果最初定義的工具箱中有類別蛹尝，則新工具箱也必須具有類別（盡管類別可能會更改）。同樣挫酿，如果最初定義的工具箱沒有任何類別愕难，則新工具箱可能沒有任何類別。
請注意葱弟，此時更新工具欄會導(dǎo)致一些小的UI重置：
- 在具有類別的工具箱中猜丹，彈出按鈕在打開時將關(guān)閉射窒。
- 在沒有類別的工具箱中将塑，用戶更改的任何字段（例如下拉列表）將恢復(fù)為默認(rèn)值制市。
- 任何工具箱長到超出頁面時，將使其滾動條跳到頂部开财。
這是一個包含類別和塊組的樹的現(xiàn)場演示误褪。
