工具箱

工具箱是用戶可以從中創建新塊的側面菜單。工具箱的結構由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>

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

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

分類目錄

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

<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，以支持更大的應用程序。出現滾動條，允許無限大的工作空間。出現垃圾桶。上下文菜單包含更多高級選項，例如添加註釋或摺疊塊。使用配置選項可以覆蓋所有這些功能。

可以使用可選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 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塊：
甲math_number已被修改以顯示數字42，而不是缺省值0的塊：
一個controls_for具有三個math_number塊的塊：
阿math_arithmetic具有兩個塊math_number 陰影塊連接到它：

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

<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選項卡並複製結果。的x， y和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>在任何兩個類別之間添加標籤將創建分隔符。

默認情況下，每個塊與其下相鄰塊分隔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>

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

按鈕和標籤

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

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

您可以指定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>

禁用塊可用於限制用戶的選擇。在取得某些成就之後，也許可以解鎖高級塊。

更換工具箱

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

workspace.updateToolbox(newTree);

與初始配置期間一樣，它newTree可以是節點樹或字符串表示形式。唯一的限制是不能更改模式。也就是說，如果最初定義的工具箱中有類別，則新工具箱也必須具有類別（儘管類別可能會更改）。同樣，如果最初定義的工具箱沒有任何類別，則新工具箱可能沒有任何類別。

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

在帶有類別的工具箱中，彈出按鈕如果打開則將關閉。
在沒有類別的工具箱中，用戶更改的任何字段（例如下拉列表）都將恢復爲默認值。
只要工具箱超出頁面的範圍，其滾動條就會跳到頂部。

這是帶有類別和塊組的樹的實時演示。

blockly 工具箱

工具箱

分類目錄

主題

動態類別

類別樹

展開式

塊組

陰影塊

變數

分離器

按鈕和標籤

禁用塊

更換工具箱

blockly -- 定義塊

blockly --本地化塊（ Localize Blocks）

blockly -- 自定義塊

block-配置講解

微信小程序之公共組件寫法

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結