Hộp công cụ

Hộp công cụ là nơi người dùng nhận được các khối. Thông thường, thành phần này được hiển thị ở một bên của không gian làm việc. Đôi khi, báo cáo có các danh mục, và đôi khi thì không.

Trang này chủ yếu tập trung vào cách chỉ định cấu trúc của hộp công cụ (tức là hộp công cụ có những danh mục nào và khối nào có trong đó). Nếu bạn muốn biết thêm thông tin chi tiết về cách thay đổi giao diện người dùng của hộp công cụ, hãy tham khảo Lớp học lập trình về cách tuỳ chỉnh hộp công cụ Blockly và buổi nói chuyện về Toolbox API (API Hộp công cụ năm 2021).

Dạng thức

Blockly cho phép bạn chỉ định cấu trúc của hộp công cụ bằng cách sử dụng một vài định dạng. Định dạng mới nên dùng JSON, còn định dạng cũ sử dụng XML.

Sau đây là những cách mà bạn có thể chỉ định hộp công cụ ở trên:

JSON

Kể từ bản phát hành tháng 9 năm 2020, bạn có thể xác định các hộp công cụ bằng cách sử dụng JSON.

var toolbox = {
    "kind": "flyoutToolbox",
    "contents": [
      {
        "kind": "block",
        "type": "controls_if"
      },
      {
        "kind": "block",
        "type": "controls_whileUntil"
      }
    ]
  };
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

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>

Chuỗi XML

var toolbox = '<xml>' +
    '<block type="controls_if"></block>' +
    '<block type="controls_whileUntil"></block>' +
    '</xml>';
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

Danh mục

Bạn có thể sắp xếp các khối trong hộp công cụ theo danh mục.

Dưới đây là những cách bạn có thể xác định hộp công cụ ở trên, có hai danh mục ("Control" và "Logic"), mỗi danh mục chứa các khối:

JSON

{
  "kind": "categoryToolbox",
  "contents": [
    {
      "kind": "category",
      "name": "Control",
      "contents": [
        {
          "kind": "block",
          "type": "controls_if"
        },
      ]
    },
    {
      "kind": "category",
      "name": "Logic",
      "contents": [
        {
          "kind": "block",
          "type": "logic_compare"
        },
        {
          "kind": "block",
          "type": "logic_operation"
        },
        {
          "kind": "block",
          "type": "logic_boolean"
        }
      ]
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <category name="Control">
    <block type="controls_if"></block>
  <category name="Logic">
    <block type="logic_compare"></block>
    <block type="logic_operation"></block>
    <block type="logic_boolean"></block>
  </category>
</xml>

Danh mục lồng nhau

Các danh mục có thể được lồng vào các danh mục khác. Dưới đây là hai danh mục cấp cao nhất ('Core' và 'Tuỳ chỉnh'), danh mục thứ hai chứa hai danh mục phụ, mỗi danh mục chứa các khối:

Lưu ý rằng một danh mục có thể chứa cả danh mục con và khối chặn. Trong ví dụ trên, 'Tuỳ chỉnh' có hai danh mục phụ ("Di chuyển" và "Xoay"), cũng như một khối của riêng danh mục đó ("bắt đầu").

JSON

{
  "kind": "categoryToolbox",
  "contents": [
    {
      "kind": "category",
      "name": "Core",
      "contents": [
        {
          "kind": "block",
          "type": "controls_if"
        },
        {
          "kind": "block",
          "type": "logic_compare"
        },
      ]
    },
    {
      "kind": "category",
      "name": "Custom",
      "contents": [
        {
          "kind": "block",
          "type": "start"
        },
        {
          "kind": "category",
          "name": "Move",
          "contents": [
            {
              "kind": "block",
              "type": "move_forward"
            }
          ]
        },
        {
          "kind": "category",
          "name": "Turn",
          "contents": [
            {
              "kind": "block",
              "type": "turn_left"
            }
          ]
        }
      ]
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <category name="Core">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
  </category>
  <category name="Custom">
    <block type="start"></block>
    <category name="Move">
      <block type="move_forward"></block>
    </category>
    <category name="Turn">
      <block type="turn_left"></block>
    </category>
  </category>
</xml>

Danh mục động

Danh mục động là các danh mục được điền lại theo phương thức động dựa trên một hàm mỗi khi chúng được mở.

Hỗ trợ khối này bằng cách cho phép bạn liên kết một danh mục với một hàm thông qua khoá chuỗi đã đăng ký. Hàm sẽ trả về định nghĩa về nội dung của một danh mục (bao gồm các khối, nút, nhãn, v.v.). Nội dung có thể được chỉ định là JSON hoặc XML, mặc dù bạn nên dùng JSON.

Ngoài ra, xin lưu ý rằng hàm này được cung cấp không gian làm việc mục tiêu dưới dạng tham số, vì vậy, các quy tắc chặn trong danh mục động có thể dựa trên trạng thái của không gian làm việc.

JSON

Kể từ bản phát hành tháng 9 năm 2021, bạn có thể chỉ định trạng thái chặn mà không cần sử dụng 'blockxml'.

// Returns an array of objects.
var coloursFlyoutCallback = function(workspace) {
  // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
  var colourList = getPalette();
  var blockList = [];
  for (var i = 0; i < colourList.length; i++) {
    blockList.push({
      'kind': 'block',
      'type': 'colour_picker',
      'fields': {
        'COLOUR': colourList[i]
      }
    });
  }
  return blockList;
};

// Associates the function with the string 'COLOUR_PALETTE'
myWorkspace.registerToolboxCategoryCallback(
    'COLOUR_PALETTE', coloursFlyoutCallback);

JSON cũ

Trước bản phát hành tháng 9 năm 2021, bạn phải sử dụng thuộc tính 'blockxml' để chỉ định trạng thái chặn.

// Returns an array of objects.
var coloursFlyoutCallback = function(workspace) {
  // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
  var colourList = getPalette();
  var blockList = [];
  for (var i = 0; i < colourList.length; i++) {
    blockList.push({
      'kind': 'block',
      'type': 'colour_picker', // Type is optional if you provide blockxml
      'blockxml': '<block type="colour_picker">' +
          '<field name="COLOUR">' + colourList[i] + '</field>' +
          '</block>'
    });
  }
  return blockList;
};

// Associates the function with the string 'COLOUR_PALETTE'
myWorkspace.registerToolboxCategoryCallback(
    'COLOUR_PALETTE', coloursFlyoutCallback);

XML

// Returns an arry of XML nodes.
var coloursFlyoutCallback = function(workspace) {
  // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
  var colourList = getPalette();
  var blockList = [];
  for (var i = 0; i < colourList.length; i++) {
    var block = document.createElement('block');
    block.setAttribute('type', 'colour_picker');
    var field = document.createElement('field');
    field.setAttribute('name', 'COLOUR');
    field.innerText = colourList[i];
    block.appendChild(field);
    blockList.push(block);
  }
  return blockList;
};

// Associates the function with the string 'COLOUR_PALETTE'
myWorkspace.registerToolboxCategoryCallback(
    'COLOUR_PALETTE', coloursFlyoutCallback);

Sau khi các hàm danh mục động được liên kết với một khoá chuỗi (còn gọi là đã đăng ký), bạn có thể chỉ định khoá chuỗi này cho thuộc tính custom của định nghĩa danh mục để biến danh mục thành động.

JSON

{
  "kind": "category",
  "name": "Colours",
  "custom": "COLOUR_PALETTE"
}

XML

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

Danh mục động được tích hợp sẵn

Blockly cung cấp 3 danh mục động được tích hợp sẵn.

  • 'VARIABLE' tạo một danh mục cho các biến chưa được nhập.
  • 'VARIABLE_DYNAMIC' tạo một danh mục cho các biến được nhập. Lớp này có các nút để tạo chuỗi, số và màu sắc.

  • 'PROCEDURE' tạo một danh mục cho các khối hàm.

JSON

{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE"
},
{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE_DYNAMIC"
},
{
  "kind": "category",
  "name": "Functions",
  "custom": "PROCEDURE"
}

XML

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

Lưu ý: Từ "procedure" được sử dụng xuyên suốt cơ sở mã của Blockly, nhưng học viên thấy từ "function" dễ hiểu hơn. Chúng tôi xin lỗi vì thông tin không khớp.

Tắt

Danh mục bị vô hiệu hoá sẽ không cho phép người dùng mở danh mục đó và danh mục đó sẽ bị bỏ qua trong khi di chuyển bằng bàn phím.

var category = toolbox.getToolboxItems()[0];
category.setDisabled('true');

Khi một danh mục bị vô hiệu hoá, thuộc tính 'disabled' sẽ được thêm vào phần tử DOM, cho phép bạn kiểm soát giao diện của một danh mục bị vô hiệu hoá.

.blocklyToolboxCategory[disabled="true"] {
  opacity: .5;
}

Đang ẩn

Danh mục ẩn sẽ không xuất hiện trong hộp công cụ. Các danh mục ẩn có thể xuất hiện sau đó thông qua JavaScript.

JSON

{
  "kind": "category",
  "name": "...",
  "hidden": "true"
}

XML

<category name="..." hidden="true"></category>

JavaScript

var category = toolbox.getToolboxItems()[0];
category.hide();
// etc...
category.show();

Đang mở rộng

Điều này chỉ áp dụng cho các danh mục chứa các danh mục lồng nhau khác.

Danh mục mở rộng sẽ hiển thị cho bạn các danh mục phụ. Theo mặc định, các danh mục lồng nhau được thu gọn và cần được nhấp vào để mở rộng.

JSON

{
  "kind": "category",
  "name": "...",
  "expanded": "true"
}

XML

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

Định kiểu

Blockly cung cấp giao diện người dùng các danh mục mặc định và một số tuỳ chọn cơ bản để tạo kiểu. Nếu bạn muốn biết thông tin về cách tạo kiểu/cấu hình giao diện người dùng nâng cao hơn, hãy xem Lớp học lập trình về cách tuỳ chỉnh hộp công cụ Blockly và 2021 Toolbox API.

Giao diện

Giao diện (Themes) cho phép bạn chỉ định cùng lúc tất cả màu sắc cho không gian làm việc, bao gồm cả màu trong các danh mục.

Để sử dụng các kiểu danh mục đó, bạn phải liên kết danh mục của mình với một kiểu danh mục cụ thể:

JSON

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

XML

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

Màu sắc

Bạn cũng có thể trực tiếp chỉ định màu, nhưng bạn không nên làm vậy. Màu là một số dạng chuỗi (0-360) chỉ định màu. Hãy chú ý đến cách viết chính tả của người Anh.

JSON

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

XML

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

Xin lưu ý rằng chúng tôi cũng hỗ trợ việc sử dụng tệp tham chiếu màu có thể bản địa hoá.

CSS danh mục

Nếu bạn muốn tuỳ chỉnh hiệu quả hơn, Blockly cũng cho phép bạn chỉ định lớp CSS cho các thành phần khác nhau của giao diện người dùng mặc định. Sau đó, bạn có thể sử dụng CSS để tạo kiểu cho các chuỗi này.

Bạn có thể áp dụng lớp CSS cho các loại phần tử sau đây:

  • vùng chứa - Lớp cho div cha cho danh mục. blocklyToolboxCategory mặc định.
  • hàng - Lớp cho div chứa nhãn và biểu tượng danh mục. blocklyTreeRow mặc định.
  • icon – Lớp cho biểu tượng danh mục. blocklyTreeIcon mặc định.
  • label – Lớp cho nhãn danh mục. blocklyTreeLabel mặc định.
  • selected – Lớp được thêm vào danh mục khi được chọn. blocklyTreeSelected mặc định.
  • openicon – Lớp được thêm vào biểu tượng khi danh mục đó có các danh mục lồng nhau và đang mở. blocklyTreeIconOpen mặc định.
  • biểu tượng đóng – Lớp được thêm vào biểu tượng khi danh mục đó có các danh mục lồng nhau và đã đóng. blocklyTreeIconClosed mặc định.

Và sau đây là cách bạn chỉ định các lớp bằng một trong hai định dạng:

JSON

Đặt lớp CSS của một loại phần tử cụ thể bằng cách sử dụng thuộc tính cssConfig.

{
  "kind": "category",
  "name": "...",
  "cssConfig": {
    "container": "yourClassName"
  }
}

XML

Đặt lớp CSS của một loại phần tử cụ thể bằng cách đặt tiền tố "css-" vào loại phần tử đó.

<category name="..." css-container="yourClassName"></category>

Truy cập

Có hai cách để bạn có thể truy cập danh mục theo phương thức lập trình. Bạn có thể truy cập vào tệp này theo chỉ mục (trong đó 0 là danh mục trên cùng):

var category = toolbox.getToolboxItems()[0];

Hoặc theo mã nhận dạng:

var category = toolbox.getToolboxItemById('categoryId');

Trong trường hợp mã nhận dạng được chỉ định trong định nghĩa hộp công cụ:

JSON

{
  "kind": "category",
  "name": "...",
  "toolboxitemid": "categoryId"
}

XML

<category name="..." toolboxitemid="categoryId"></category>

Khối đặt trước

Định nghĩa hộp công cụ có thể chứa các khối có các trường được đặt thành giá trị mặc định hoặc có các khối đã được kết nối với nhau.

Dưới đây là bốn khối:

  1. Một khối logic_boolean đơn giản không có giá trị được đặt trước:
  2. Một khối math_number đã được sửa đổi để hiển thị số 42 thay vì số mặc định là 0:
  3. Một khối controls_for có 3 khối math_number kết nối với nó:
  4. Một khối math_arithmetic có 2 khối bóng math_number được kết nối với khối đó:

Dưới đây là định nghĩa hộp công cụ chứa bốn khối này:

JSON

Kể từ bản phát hành tháng 9 năm 2021, bạn có thể chỉ định trạng thái chặn nếu sử dụng 'blockxml'.

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "logic_boolean"
    },
    {
      "kind": "block",
      "type": "math_number",
      "fields": {
        "NUM": 42
      }
    },
    {
      "kind": "block",
      "type": "controls_for",
      "inputs": {
        "FROM": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
        "TO": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 10
            }
          }
        },
        "BY": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
      }
    },
    {
      "kind": "block",
      "type": "math_arithmetic",
      "fields": {
        "OP": "ADD"
      },
      "inputs": {
        "A": {
          "shadow": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
        "B": {
          "shadow": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        }
      }
    },
  ]
}

JSON cũ

Trước bản phát hành tháng 9 năm 2021, bạn phải sử dụng thuộc tính 'blockxml' để chỉ định trạng thái chặn.

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "logic_boolean"
    },
    {
      "kind": "block",
      "blockxml":
          '<block type="math_number">' +
          '<field name="NUM">42</field>' +
          '</block>'
    },
    {
      "kind": "block",
      "blockxml":
          '<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>'
    },
    {
      "kind": "block",
      "blockxml":
          '<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 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>

Việc viết những định nghĩa này ra theo cách thủ công có thể khá khó khăn. Thay vào đó, bạn có thể tải các khối vào một không gian làm việc, rồi chạy mã sau để tải định nghĩa. Các lệnh gọi này hoạt động vì hộp công cụ sử dụng cùng một định dạng cho các khối như hệ thống chuyển đổi tuần tự.

JSON

console.log(Blockly.serialization.workspaces.save(Blockly.getMainWorkspace()));

XML

console.log(Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace()));

Bạn cũng có thể xoá các thuộc tính x, y và id vì các thuộc tính đó bị hộp công cụ bỏ qua.

Khối bóng

Khối bóng là các khối giữ chỗ thực hiện một số chức năng:

  • Chúng cho biết các giá trị mặc định của khối gốc.
  • Cho phép người dùng nhập trực tiếp các giá trị mà không cần tìm nạp số hoặc khối chuỗi.
  • Không giống như một khối thông thường, các khối này sẽ được thay thế nếu người dùng thả một khối lên trên.
  • Chúng cho người dùng biết loại giá trị dự kiến.

Quy tắc chặn bị tắt

Không thể kéo các khối đã tắt từ hộp công cụ. Bạn có thể tắt riêng các khối bằng thuộc tính disabled không bắt buộc.

JSON

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type":"math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "math_single",
      "disabled": "true"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="math_single" disabled="true"></block>
</xml>

Bạn cũng có thể lập trình để tắt hoặc bật một khối bằng cách sử dụng setEnabled.

Trường biến

Các trường biến có thể cần được chỉ định theo cách khác khi chúng nằm trong hộp công cụ so với khi chúng chỉ được chuyển đổi tuần tự.

Cụ thể, khi các trường biến thường được chuyển đổi tuần tự thành JSON, các trường đó chỉ chứa mã nhận dạng của biến mà chúng đại diện, vì tên và loại của biến được chuyển đổi tuần tự riêng biệt. Tuy nhiên, các hộp công cụ không chứa thông tin đó, vì vậy, bạn cần trực tiếp đưa thông tin đó vào trường biến.

{
  "kind": "flyoutToolbox",
  "content": [
    {
      "type": "controls_for",
      "fields": {
        "VAR": {
          "name": "index",
          "type": "Number"
        }
      }
    }
  ]
}

Dòng phân cách

Việc thêm một dòng phân cách giữa hai danh mục bất kỳ sẽ tạo ra một dòng và thêm khoảng trống giữa hai danh mục đó.

Bạn có thể thay đổi lớp cho dấu phân tách trong phần định nghĩa hộp công cụ JSON hoặc XML.

JSON

{
  "kind": "sep",
  "cssConfig": {
    "container": "yourClassName"
  }
}

XML

<sep css-container="yourClassName"></sep>

Việc thêm dấu phân cách giữa hai khối bất kỳ sẽ tạo ra khoảng trống giữa các khối. Theo mặc định, mỗi khối được phân tách với lân cận dưới 24 pixel. Bạn có thể thay đổi sự phân tách này bằng cách sử dụng thuộc tính "khoảng trống". Thuộc tính này sẽ thay thế khoảng cách mặc định.

Điều này cho phép bạn tạo các nhóm khối hợp lý trong hộp công cụ.

JSON

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type":"math_number"
    },
    {
      "kind": "sep",
      "gap": "32"
    },
    {
      "kind": "block",
      "blockxml": "<block type='math_arithmetic'><field name='OP'>ADD</field></block>"
    },
    {
      "kind": "sep",
      "gap": "8"
    },
    {
      "kind": "block",
      "blockxml": "<block type='math_arithmetic'><field name='OP'>MINUS</field></block>"
    }
  ]
}

XML

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

Các nút và nhãn

Bạn có thể đặt một nút hoặc nhãn ở bất kỳ vị trí nào có thể đặt khối trong hộp công cụ.

JSON

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type":"logic_operation"
    },
    {
      "kind": "label",
      "text": "A label",
      "web-class": "myLabelStyle"
    },
    {
      "kind": "label",
      "text": "Another label"
    },
    {
      "kind": "block",
      "type": "logic_negate"
    },
    {
      "kind": "button",
      "text": "A button",
      "callbackKey": "myFirstButtonPressed"
    },
    {
      "kind": "block",
      "type": "logic_boolean"
    }
  ]
}

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>

Bạn có thể chỉ định một tên lớp CSS để áp dụng cho nút hoặc nhãn của mình. Trong ví dụ trên, nhãn đầu tiên sử dụng kiểu tuỳ chỉnh, trong khi nhãn thứ hai sử dụng kiểu mặc định.

Các nút phải có hàm callback; nhãn không được có. Để đặt lệnh gọi lại cho một lượt nhấp vào nút cụ thể, hãy sử dụng

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

Hàm của bạn phải chấp nhận nút được nhấp làm đối số. Nút "Tạo biến..." trong danh mục biến là một ví dụ điển hình về nút có lệnh gọi lại.

Thay đổi Hộp công cụ

Ứng dụng có thể thay đổi các khối có sẵn trong hộp công cụ bất cứ lúc nào bằng một lệnh gọi hàm duy nhất:

workspace.updateToolbox(newTree);

Tương tự như trong quá trình định cấu hình ban đầu, newTree có thể là cây nút, biểu diễn chuỗi hoặc đối tượng JSON. Hạn chế duy nhất là không thể thay đổi chế độ; đó là nếu có các danh mục trong hộp công cụ được xác định ban đầu thì hộp công cụ mới cũng phải có các danh mục (mặc dù các danh mục có thể thay đổi). Tương tự, nếu hộp công cụ được xác định ban đầu không có danh mục nào, thì hộp công cụ mới có thể không có bất kỳ danh mục nào.

Bạn có thể cập nhật nội dung của một danh mục bằng cách:

var category = workspace.getToolbox().getToolboxItems()[0];
category.updateFlyoutContents(flyoutContents);

Trong đó, FlightoutContents có thể là một danh sách các khối được xác định bằng JSON, cây nút hoặc cách biểu diễn dạng chuỗi.

Xin lưu ý rằng tại thời điểm này, việc cập nhật hộp công cụ sẽ gây ra một số thao tác đặt lại nhỏ về giao diện người dùng:

  • Trong hộp công cụ không có danh mục, bất kỳ trường nào do người dùng thay đổi (chẳng hạn như trình đơn thả xuống) sẽ chuyển về giá trị mặc định.

Đây là bản minh hoạ trực tiếp về một cây gồm các danh mục và nhóm khối.