카테고리 도구 상자 정의

카테고리 도구 상자에는 여러 블록 세트가 있으며, 이 블록들은 다양한 카테고리로 정렬되어 있습니다.

제어 및 로직 카테고리가 있는 카테고리 도구 상자 논리 카테고리가 열려 있고 플라이아웃 도구 상자에는 비교, and-or, true-false 블록이 포함되어 있습니다.

카테고리 도구 상자를 만들려면 도구 상자를 설명하는 JSON 또는 XML을 구성 옵션toolbox 속성에 전달합니다.

JSON

var toolbox = {
    "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"
          }
        ]
      }
    ]
  };
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

XML

<xml id="toolbox" style="display: none">
  <category name="Control">
    <block type="controls_if"></block>
  </category>
  <category name="Logic">
    <block type="logic_compare"></block>
    <block type="logic_operation"></block>
    <block type="logic_boolean"></block>
  </category>
</xml>
<script>
  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: document.getElementById('toolbox')});
</script>

XML 문자열

var toolbox = '<xml id="toolbox" style="display: none">' +
    '<category name="Control">' +
    '<block type="controls_if"></block>' +
    '</category>' +
    '<category name="Logic">' +
    '<block type="logic_compare"></block>' +
    '<block type="logic_operation"></block>' +
    '<block type="logic_boolean"></block>' +
    '</category>' +
    '</xml>';
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});