blockly 工具箱

工具箱

工具箱是用户可以从中创建新块的侧面菜单。工具箱的结构由XML指定，它可以是节点树或字符串表示形式。当该XML注入页面时，它将传递给Blockly。如果您不喜欢手动输入XML，建议您查看Blockly Developer Tools。使用它，您可以构造一个工具箱并使用可视界面自动生成其工具箱XML。

这是一个使用节点树的最小示例：

 id="toolbox" style="display: none">
   type="controls_if">
   type="controls_whileUntil">

 

这是使用字符串表示形式的相同示例：

 

上面两个都用两个块创建了相同的工具箱：

如果块的数量很少，则显示的它们可能没有任何类别（如上述最小示例中所示）。在这种简单模式下，所有可用的块都显示在工具箱中，主工作空间中没有滚动条，并且不需要垃圾桶。

分类目录

工具箱中的块可以按类别组织。这是两个类别（“控制”和“逻辑”），每个类别包含三个块：

 id="toolbox" style="display: none">
   name="Control">
     type="controls_if">
     type="controls_whileUntil">
     type="controls_for">
  
   name="Logic">
     type="logic_compare">
     type="logic_operation">
     type="logic_boolean">
  

 

以下是出现的工具箱，单击“逻辑”类别，以便可以看到弹出窗口中的三个逻辑块：

类别的存在会更改Blockly的UI，以支持更大的应用程序。出现滚动条，允许无限大的工作空间。出现垃圾桶。上下文菜单包含更多高级选项，例如添加注释或折叠块。使用配置选项可以覆盖所有这些功能 。

可以使用可选colour属性为每个类别分配颜色。请注意英式拼写。颜色是定义色调的数字（0-360）。

 id="toolbox" style="display: none">
   name="Logic" colour="210">...
   name="Loops" colour="120">...
   name="Math" colour="230">...
   name="Colour" colour="20">...
   name="Variables" colour="330" custom="VARIABLE">
   name="Functions" colour="290" custom="PROCEDURE">

 

该颜色显示为类别左侧的矩形，并突出显示当前所选类别：

主题

如果您已开始使用Blockly Themes，则将要添加该 categorystyle属性，而不是colour如下所示的属性。

 name="Logic" categorystyle="logic_category">

 

有关主题的更多信息，请参见 此处。

动态类别

有两种具有特殊行为的类别。变量和函数类别没有内容定义，但分别'custom'具有'VARIABLE'或属性 'PROCEDURE'。这些类别将使用适当的块自动填充。

 name="Variables" custom="VARIABLE">
 name="Functions" custom="PROCEDURE">

 

注意：在整个Blockly代码库中都使用了“过程”一词，但是此后发现“功能”一词更容易为学生所理解。对不起，不匹配。

开发人员还可以使用该custom属性来创建动态填充的弹出类别。例如，要创建带有一组自定义色块的弹出按钮，请执行以下操作：

• 用自定义属性创建一个类别。

   name="Colours" custom="COLOUR_PALETTE">
  

   

• 定义一个回调以提供类别内容。此回调应接收工作空间并返回XML块元素的数组。

  /**
   * Construct the blocks required by the flyout for the colours category.
   * @param {!Blockly.Workspace} workspace The workspace this flyout is for.
   * @return {!Array.} 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 = '' +
            '' + colourList[i] + '' +
            '';
        var block = Blockly.Xml.textToDom(blockText);
        xmlList.push(block);
      }
    }
    return xmlList;
  };
  

   

• 在工作区上注册回调。

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

   

类别树

类别可以嵌套在其他类别中。这是两个顶级类别（“核心”和“自定义”），每个类别包含两个子类别，每个子类别包含块：

 id="toolbox" style="display: none">
   name="Core">
     name="Control">
       type="controls_if">
       type="controls_whileUntil">
    
     name="Logic">
       type="logic_compare">
       type="logic_operation">
       type="logic_boolean">
    
  
   name="Custom">
     type="start">
     name="Move">
       type="move_forward">
       type="move_backward">
    
     name="Turn">
       type="turn_left">
       type="turn_right">
    
  

 

请注意，类别可能同时包含子类别和块。在上面的示例中，“自定义”具有两个子类别（“移动”和“转动”），以及其自身的一个块（“开始”）。

展开式

默认情况下，在加载Blockly时，类别显示为折叠状态，但是类别可以使用

 name="..." expanded="true">

 

块组

XML可以包含定制的块或块组。这是四个块：

1. 一个简单的logic_boolean块：
   
2. 甲math_number已被修改以显示数字42，而不是缺省值0的块：
   
3. 一个controls_for具有三个math_number块的块：
   
4. 阿math_arithmetic具有两个块math_number 阴影块连接到它：
   

这是在工具箱中生成这四个块的代码：

 id="toolbox" style="display: none">
   type="logic_boolean">

   type="math_number">
     name="NUM">42
  

   type="controls_for">
     name="FROM">
       type="math_number">
         name="NUM">1
      
    
     name="TO">
       type="math_number">
         name="NUM">10
      
    
     name="BY">
       type="math_number">
         name="NUM">1
      
    
  

   type="math_arithmetic">
     name="OP">ADD
     name="A">
       type="math_number">
         name="NUM">1
      
    
     name="B">
       type="math_number">
         name="NUM">1
      
    
  

 

这些自定义块或组的XML与Blockly的XML保存格式相同。因此，为此类块构造XML的最简单方法是使用 Code应用程序 来构建块，然后切换到XML选项卡并复制结果。的x， y和id属性由工具箱忽略，也可能被剥离出来。

阴影块

阴影块是执行以下功能的占位符块：

• 它们指示其父块的默认值。
• 它们允许用户直接键入值，而无需获取数字或字符串块。
• 与常规块不同，如果用户在其顶部放置块，则将替换它们。
• 它们告知用户期望值的类型。

无法使用Code应用程序直接构造阴影块。相反，可以使用普通块，然后更改并在XML中和。

注意：阴影块可能不包含变量字段，或者其子对象也不是阴影。

变数

大多数字段很容易在工具箱中设置，只需要一个name属性及其即可value。

 name="NUM">1

 

但是，变量具有影响其创建方式的其他可选属性。可变字段可以具有id和variabletype。请注意， variabletype不要使用camelCase。

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

 

如果id设置了，则创建块时，variabletype（如果已设置）和value必须与任何现有变量匹配id。如果不id存在具有该变量的变量，则将创建一个新变量。通常， id不应包含在您的工具箱XML中。如果变量id与value 和相同，则省略id可使变量引用现有变量variabletype。

如果variabletype设置了a ，则将使用该类型创建变量。如果 variabletype未设置，则变量将具有默认''类型。的variabletype，如果你是使用类型变量必须设置，如Blockly不会推断出类型。

→有关更多信息，请参见可变字段。

分离器

在任何两个类别之间添加标签将创建分隔符。

默认情况下，每个块与其下相邻块分隔24个像素。可以使用'gap'属性更改此间隔，该属性将替换默认间隔。

 id="toolbox" style="display: none">
   type="math_number">
   gap="32">
   type="math_arithmetic">
     name="OP">ADD
  
   gap="8">
   type="math_arithmetic">
     name="OP">MINUS
  

 

调整块之间的间隙可以允许在工具箱中创建逻辑组的块。

按钮和标签

您可以在工具箱中可以放置块的任何位置放置按钮或标签。

 id="toolbox" style="display: none">
   type="logic_operation">
   text="A label" web-class="myLabelStyle">
   text="Another label">
   type="logic_negate">
   text="A button" callbackKey="myFirstButtonPressed">
   type="logic_boolean">

 

您可以指定CSS类名称以应用于按钮或标签。在上面的示例中，第一个标签使用自定义样式，而第二个标签使用默认样式。

按钮应具有回调功能；标签不应该。要设置给定按钮单击的回调，请使用

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

 

您的函数应接受单击的按钮作为参数。变量类别中的“创建变量...”按钮是带有回调按钮的一个很好的例子。

禁用块

使用可选disabled 属性可以单独禁用工具箱中的块：

 id="toolbox" style="display: none">
   type="math_number">
   type="math_arithmetic">
   type="math_single" disabled="true">

 

禁用块可用于限制用户的选择。在取得某些成就之后，也许可以解锁高级块。

更换工具箱

应用程序可以随时通过一个函数调用来更改工具箱中可用的块：

workspace.updateToolbox(newTree);

 

与初始配置期间一样，它newTree可以是节点树或字符串表示形式。唯一的限制是不能更改模式。也就是说，如果最初定义的工具箱中有类别，则新工具箱也必须具有类别（尽管类别可能会更改）。同样，如果最初定义的工具箱没有任何类别，则新工具箱可能没有任何类别。

请注意，此时更新工具栏会导致一些次要的UI重置：

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

这是带有类别和块组的树的实时演示。