工具箱

工具箱是使用者可以從中建立新塊的側面菜單。工具箱的結構由XML指定，它可以是節點樹或字元串表示形式。當該XML注入頁面時，它将傳遞給Blockly。如果您不喜歡手動輸入XML，建議您檢視Blockly Developer Tools。使用它，您可以構造一個工具箱并使用可視界面自動生成其工具箱XML。

這是一個使用節點樹的最小示例：

<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>

上面兩個都用兩個塊建立了相同的工具箱：

blockly 工具箱工具箱

如果塊的數量很少，則顯示的它們可能沒有任何類别（如上述最小示例中所示）。在這種簡單模式下，所有可用的塊都顯示在工具箱中，主工作空間中沒有滾動條，并且不需要垃圾桶。

分類目錄

工具箱中的塊可以按類别組織。這是兩個類别（“控制”和“邏輯”），每個類别包含三個塊：

<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 工具箱工具箱

類别的存在會更改Blockly的UI，以支援更大的應用程式。出現滾動條，允許無限大的工作空間。出現垃圾桶。上下文菜單包含更多進階選項，例如添加注釋或折疊塊。使用配置選項可以覆寫所有這些功能。

可以使用可選

colour

屬性為每個類别配置設定顔色。請注意英式拼寫。顔色是定義色調的數字（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>

該顔色顯示為類别左側的矩形，并突出顯示目前所選類别：

blockly 工具箱工具箱

主題

如果您已開始使用Blockly Themes，則将要添加該

categorystyle

屬性，而不是

colour

如下所示的屬性。

<category name="Logic" categorystyle="logic_category">
</category>

有關主題的更多資訊，請參見此處。

動态類别

有兩種具有特殊行為的類别。變量和函數類别沒有内容定義，但分别

'custom'

具有

'VARIABLE'

或屬性

'PROCEDURE'

。這些類别将使用适當的塊自動填充。

<category name="Variables" custom="VARIABLE"></category>
<category name="Functions" custom="PROCEDURE"></category>

注意：在整個Blockly代碼庫中都使用了“過程”一詞，但是此後發現“功能”一詞更容易為學生所了解。對不起，不比對。

開發人員還可以使用該

custom

屬性來建立動态填充的彈出類别。例如，要建立帶有一組自定義色塊的彈出按鈕，請執行以下操作：

用自定義屬性建立一個類别。

<category name="Colours" custom="COLOUR_PALETTE"></category>

定義一個回調以提供類别内容。此回調應接收工作空間并傳回XML塊元素的數組。

/**
 * 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;
};

在工作區上注冊回調。

myWorkspace.registerToolboxCategoryCallback(
  'COLOUR_PALETTE', myApplication.coloursFlyoutCallback);

類别樹

類别可以嵌套在其他類别中。這是兩個頂級類别（“核心”和“自定義”），每個類别包含兩個子類别，每個子類别包含塊：

<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>

請注意，類别可能同時包含子類别和塊。在上面的示例中，“自定義”具有兩個子類别（“移動”和“轉動”），以及其自身的一個塊（“開始”）。

展開式

預設情況下，在加載Blockly時，類别顯示為折疊狀态，但是類别可以使用

<category name="..." expanded="true">

塊組

XML可以包含定制的塊或塊組。這是四個塊：

一個簡單的 logic_boolean 塊：

blockly 工具箱工具箱
甲 math_number 已被修改以顯示數字42，而不是預設值0的塊：

blockly 工具箱工具箱
一個 controls_for 具有三個 math_number 塊的塊：

blockly 工具箱工具箱
阿 math_arithmetic 具有兩個塊 math_number 陰影塊連接配接到它：

blockly 工具箱工具箱

這是在工具箱中生成這四個塊的代碼：

<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儲存格式相同。是以，為此類塊構造XML的最簡單方法是使用 Code應用程式來建構塊，然後切換到XML頁籤并複制結果。的

，

和

id

屬性由工具箱忽略，也可能被剝離出來。

陰影塊

陰影塊是執行以下功能的占位符塊：

它們訓示其父塊的預設值。
它們允許使用者直接鍵入值，而無需擷取數字或字元串塊。
與正常塊不同，如果使用者在其頂部放置塊，則将替換它們。
它們告知使用者期望值的類型。

無法使用Code應用程式直接構造陰影塊。相反，可以使用普通塊，然後更改

<block ...>

并

</block>

在XML中

<shadow ...>

和

</shadow>

。

注意：陰影塊可能不包含變量字段，或者其子對象也不是陰影。

變數

大多數字段很容易在工具箱中設定，隻需要一個

name

屬性及其即可

value

。

<field name="NUM">1</field>

但是，變量具有影響其建立方式的其他可選屬性。可變字段可以具有

id

和

variabletype

。請注意，

variabletype

不要使用camelCase。

<field name="VAR" id=".n*OKd.u}2UD9QFicbEX" variabletype="Panda">Bai Yun</field>

如果

id

設定了，則建立塊時，

variabletype

（如果已設定）和

value

必須與任何現有變量比對

id

。如果不

id

存在具有該變量的變量，則将建立一個新變量。通常，

id

不應包含在您的工具箱XML中。如果變量id與

value

和相同，則省略id可使變量引用現有變量

variabletype

。

如果

variabletype

設定了a ，則将使用該類型建立變量。如果

variabletype

未設定，則變量将具有預設

''

類型。的

variabletype

，如果你是使用類型變量必須設定，如Blockly不會推斷出類型。

→有關更多資訊，請參見可變字段。

分離器

<sep></sep>

在任何兩個類别之間添加标簽将建立分隔符。

blockly 工具箱工具箱

預設情況下，每個塊與其下相鄰塊分隔24個像素。可以使用'gap'屬性更改此間隔，該屬性将替換預設間隔。

<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>

調整塊之間的間隙可以允許在工具箱中建立邏輯組的塊。

blockly 工具箱工具箱

按鈕和标簽

您可以在工具箱中可以放置塊的任何位置放置按鈕或标簽。

<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>

blockly 工具箱工具箱

您可以指定CSS類名稱以應用于按鈕或标簽。在上面的示例中，第一個标簽使用自定義樣式，而第二個标簽使用預設樣式。

按鈕應具有回調功能；标簽不應該。要設定給定按鈕單擊的回調，請使用

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

您的函數應接受單擊的按鈕作為參數。變量類别中的“建立變量...”按鈕是帶有回調按鈕的一個很好的例子。

禁用塊

使用可選

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>

禁用塊可用于限制使用者的選擇。在取得某些成就之後，也許可以解鎖進階塊。

blockly 工具箱工具箱

更換工具箱

應用程式可以随時通過一個函數調用來更改工具箱中可用的塊：

workspace.updateToolbox(newTree);

與初始配置期間一樣，它

newTree

可以是節點樹或字元串表示形式。唯一的限制是不能更改模式。也就是說，如果最初定義的工具箱中有類别，則新工具箱也必須具有類别（盡管類别可能會更改）。同樣，如果最初定義的工具箱沒有任何類别，則新工具箱可能沒有任何類别。

請注意，此時更新工具欄會導緻一些次要的UI重置：

在帶有類别的工具箱中，彈出按鈕如果打開則将關閉。
在沒有類别的工具箱中，使用者更改的任何字段（例如下拉清單）都将恢複為預設值。
隻要工具箱超出頁面的範圍，其滾動條就會跳到頂部。

這是帶有類别和塊組的樹的實時示範。

blockly 工具箱工具箱

工具箱

分類目錄

主題

動态類别

類别樹

展開式

塊組

陰影塊

變數

分離器

按鈕和标簽

禁用塊

更換工具箱

繼續閱讀

blockly開始使用開始使用

Android blockly資料前言資料文檔個人項目介紹總結關于作者

Blockly與Scratch3.0的比較分析及選型建議Blockly與Scratch3.0的比較分析選型建議尾聲

Blockly擷取workspace的代碼塊截圖

blockly自定義塊簡單實作

Blockly - 來自Google的可視化程式設計工具

blockly server 産生python代碼

執行blockly的python代碼

blockly -- Custom Blocks: Block ParadigmsCustom Blocks: Block Paradigms

blockly -- Custom Blocks: Style GuideCustom Blocks: Style Guide

blockly--主題

blockly --本地化塊（ Localize Blocks）

blockly -- 顔色（Block colour）

Blockly開發3 -- 建立工具欄ToolBox2. 嵌套目錄3.分割線4.在ToolBox中加入子產品組5. 在ToolBox中加入文字和按鍵6. 改變ToolBox7. 動态目錄

Blockly開發2 ------建立工作空間workspace3.可變尺寸的workspace4. workspace的設定選項