工具箱

工具箱是用户可以从中创建新块的侧面菜单。工具箱的结构由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可以包含定制的块或块组。这是四个块：

1. 一个简单的logic_boolean块：
   
2. math_number已被修改以显示数字42，而不是缺省值0的块：
   
3. 一个controls_for具有三个math_number块的块：
   
4. 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重置：

• 在带有类别的工具箱中，弹出按钮如果打开则将关闭。
• 在没有类别的工具箱中，用户更改的任何字段（例如下拉列表）都将恢复为默认值。
• 只要工具箱超出页面的范围，其滚动条就会跳到顶部。