תיבת כלים

ארגז הכלים הוא המקום שבו המשתמשים מקבלים חסימות. בדרך כלל הוא מוצג בצד אחד של סביבת העבודה. לפעמים היא כוללת קטגוריות ולפעמים אין לה קטגוריות.

בדף הזה נסביר בעיקר איך לציין את המבנה של ארגז הכלים (כלומר, הקטגוריות שלו והבלוקים שהוא מכיל). לפרטים נוספים על שינוי הממשק של ארגז הכלים, תוכלו לקרוא את המאמר התאמה אישית של ארגז קוד של ארגז כלים של חסימת כלים והרצאה על ממשקי ה-API של To021 Toolbox.

פורמטים

ב-Blockly אפשר לציין את המבנה של ארגז הכלים באמצעות כמה פורמטים שונים. הפורמט המומלץ החדש משתמש ב-JSON, והפורמט הישן משתמש ב-XML.

הנה הדרכים השונות שבהן ניתן לציין את ארגז הכלים שלמעלה:

JSON

החל מגרסת ספטמבר 2020 של תיבות הכלים, אפשר להגדיר באמצעות 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>

מחרוזת XML

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

קטגוריות

אפשר לארגן את הבלוקים בארגז הכלים בקטגוריות.

לפניך הדרכים שבהן ניתן להגדיר את ארגז הכלים שלמעלה, הכולל שתי קטגוריות ('Control' ו-'Logic'), שכל אחת מהן מכילה בלוקים:

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>

קטגוריות מקננות

הקטגוריות יכולות להופיע בתוך קטגוריות אחרות. הנה שתי קטגוריות ברמה העליונה ('Core' ו 'Custom'), שהשנייה מכילה שתי קטגוריות משנה, שכל אחת מהן מכילה בלוקים:

שימו לב: קטגוריה יכולה לכלול גם קטגוריות משנה וגם בלוקים. בדוגמה שלמעלה, לפריט 'Custom' יש שתי קטגוריות משנה ('Move' ו-'Turn'), וכן בלוק משלו ('start').

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>

קטגוריות דינמיות

קטגוריות דינמיות הן קטגוריות שמאוכלסות מחדש באופן דינמי בהתאם לפונקציה בכל פעם שהן נפתחות.

כך אפשר לשייך קטגוריה לפונקציה באמצעות מפתח מחרוזת רשום, והיא תומכת ב-Blockly. הפונקציה אמורה להחזיר הגדרה של התוכן של קטגוריה (כולל בלוקים, לחצנים, תוויות וכו'). ניתן לציין את התוכן כ-JSON או XML, אבל מומלץ להשתמש ב-JSON.

חשוב גם לשים לב שהפונקציה מספקת את סביבת היעד כפרמטר, כך שהחסימות בקטגוריה הדינמית יכולות להתבסס על המצב של סביבת העבודה.

JSON

החל ממהדורת ספטמבר 2021, אפשר לציין את מצב הבלוקים בלי להשתמש ב-'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 ישן

לפני מהדורת ספטמבר 2021, היה צריך להשתמש בנכס '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', // 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);

אחרי השיוך של פונקציות הקטגוריה הדינמית למפתח מחרוזת (נקרא גם רשום), אפשר להקצות את מפתח המחרוזת הזה למאפיין custom של הגדרת הקטגוריה כדי להפוך את הקטגוריה לדינמית.

JSON

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

XML

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

קטגוריות דינמיות מובנות

חברתBlockly מספקת שלוש קטגוריות דינמיות מובנות.

• הפונקציה 'VARIABLE' יוצרת קטגוריה למשתנים ללא הקלדה.
• הפונקציה 'VARIABLE_DYNAMIC' יוצרת קטגוריה למשתנים מקלידים. הוא כולל לחצנים ליצירת מחרוזות, מספרים וצבעים.

• הפונקציה 'PROCEDURE' יוצרת קטגוריה לבלוקים של פונקציות.

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>

הערה: המילה 'procedure' מופיעה ב-Blockly codebase, אבל התלמידים והתלמידות מבינים את המילה 'function'. מצטערים על אי-ההתאמה.

השבתה

קטגוריה מושבתת לא תאפשר למשתמש לפתוח את הקטגוריה, והמערכת תדלג עליה במהלך הניווט באמצעות המקלדת.

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

כשקטגוריה מושבתת, מאפיין 'disabled' מתווסף לרכיב ה-DOM, וכך אפשר לשלוט במראה של קטגוריה מושבתת.

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

מסתיר

קטגוריה מוסתרת לא תוצג במסגרת ארגז הכלים. בהמשך ניתן להציג את הקטגוריות המוסתרות באמצעות JavaScript.

JSON

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

XML

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

JavaScript

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

מתבצעת הרחבה

המאפיין הזה רלוונטי רק לקטגוריות שמכילות קטגוריות מקננות אחרות.

קטגוריה מורחבת תציג את קטגוריות המשנה שלה. כברירת מחדל, הקטגוריות המקוננות מכווצות, וצריך ללחוץ עליהן כדי להרחיב אותן.

JSON

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

XML

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

שינוי סגנון

ב-Blockly יש ממשק משתמש שמוגדרות כברירת מחדל לקטגוריות, וכן כמה אפשרויות בסיסיות לעיצוב. כדי לקבל מידע נוסף על עיצוב מתקדם יותר של ממשק המשתמש, תוכלו לקרוא את המאמרים התאמה אישית של ארגז הקוד של Blockly Toolbox והרצאה על ממשקי API של ארגז כלים לשנת 2021.

עיצובים

עיצובים מאפשרים לציין את כל הצבעים של סביבת העבודה בבת אחת, כולל הצבעים של הקטגוריות שלנו.

כדי להשתמש בהן, צריך לשייך את הקטגוריה לסגנון מסוים של קטגוריה:

JSON

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

XML

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

צבעים

אתם יכולים גם לציין את הצבע ישירות, אבל זה לא מומלץ. הצבע הוא מספר ממחרוזת (0-360) שמציין את הגוון. שימו לב לאיות הבריטי.

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>

שימו לב שאנחנו תומכים גם בשימוש בהפניות צבעים הניתנות להתאמה לשוק המקומי.

קטגוריית שירות CSS

אם רוצים לבצע התאמה אישית ברמה גבוהה יותר, אפשר גם להשתמש ב-Blockly כדי לציין סיווגים של CSS ברכיבים שונים בממשק המשתמש שמוגדר כברירת מחדל. לאחר מכן תוכלו להשתמש ב-CSS כדי לעצב את הקבצים האלה.

אפשר להחיל עליהם מחלקות CSS מהסוגים הבאים:

• container - המחלקה של ההורה div עבור הקטגוריה ברירת המחדל blocklyToolboxCategory.
• שורה - המחלקה עבור ה-div שמכילה את התווית והסמל של הקטגוריה. ברירת המחדל blocklyTreeRow.
• סמל - הסיווג של סמל הקטגוריה. ברירת המחדל היא blocklyTreeIcon.
• label - המחלקה של תווית הקטגוריה. ברירת המחדל היא blocklyTreeLabel.
• selected - הכיתה שמתווספת לקטגוריה כאשר היא נבחרת. ברירת המחדל blocklyTreeSelected.
• openicon - המחלקה שנוספה לסמל כאשר הקטגוריה כוללת קטגוריות בתוך קטגוריות והיא פתוחה. ברירת המחדל היא blocklyTreeIconOpen.
• סמל סגור - המחלקה נוספת לסמל כאשר הקטגוריה כוללת קטגוריות בתוך קטגוריות והיא נסגרת. ברירת המחדל היא blocklyTreeIconClosed.

כך מציינים את המחלקות באמצעות אחד מהפורמטים הבאים:

JSON

מגדירים את מחלקת ה-CSS של סוג רכיב מסוים באמצעות המאפיין cssConfig.

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

XML

כדי להגדיר את המחלקה של ה-CSS לסוג מסוים של רכיב, מוסיפים לו 'css-'.

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

גישה

יש שתי דרכים לגשת לקטגוריה באופן פרוגרמטי. אפשר לגשת אליה לפי אינדקס (כאשר 0 היא הקטגוריה העליונה):

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

או לפי מזהה:

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

כאשר המזהה מצוין בהגדרה של ארגז הכלים:

JSON

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

XML

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

בלוקים של הגדרות קבועות מראש

ההגדרה של ארגז הכלים יכולה להכיל בלוקים עם שדות שהוגדר להם ערך ברירת מחדל, או בלוקים שכבר מחוברים יחד.

הנה ארבעה בלוקים של נתונים:

1. בלוק logic_boolean פשוט ללא ערכים מוגדרים מראש:
   
2. בלוק math_number שהשתנה ועכשיו הוא מציג את המספר 42 במקום את ברירת המחדל 0:
   
3. בלוק controls_for שמחובר אליו שלושה בלוקים של math_number:
   
4. בלוק math_arithmetic שמחובר אליו שתי math_number בלוקי צל:
   

זוהי הגדרה של ארגז כלים שמכיל את ארבעת הבלוקים האלה:

JSON

החל מגרסת ספטמבר 2021, אפשר לציין את מצב הבלוקים באמצעות '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 ישן

לפני מהדורת ספטמבר 2021, היה צריך להשתמש בנכס 'blockxml' כדי לציין את מצב הבלוקים.

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

לכתוב את ההגדרות האלה באופן ידני יכול להיות קצת מסורבל. במקום זאת תוכלו לטעון את הבלוקים לסביבת עבודה ולאחר מכן להריץ את הקוד הבא כדי לקבל את ההגדרות. הקריאות האלה פועלות כי הפורמט של ארגז הכלים לבלוקים זהה לזה של מערכת העריכה בסדרה.

JSON

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

XML

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

אתם יכולים גם להסיר את המאפיינים x, y ו-id, כי ארגז הכלים מתעלמת מהם.

בלוקים מוצללים

בלוקים של אזורים מוצללים הם בלוקים של placeholders שמבצעים מספר פונקציות:

• הם מציינים את ערכי ברירת המחדל של בלוק ההורה.
• הן מאפשרות למשתמשים להקליד ערכים באופן ישיר, בלי שיצטרכו לאחזר מספרים או בלוקים של מחרוזת.
• בשונה מחסימה רגילה, הן מוחלפות אם המשתמש מחיל עליהן בלוק.
• הם מיידעים את המשתמש לגבי סוג הערך הצפוי.

הערה: בלוקים של אזורים כהים לא יכולים לכלול שדה משתנה, או שיהיו להם צאצאים שהם לא גם צללים.

בלוקים שהושבתו

אי אפשר לגרור בלוקים מושבתים מארגז הכלים. אפשר להשבית בלוקים בנפרד באמצעות המאפיין האופציונלי disabled.

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>

אפשר גם להשבית או להפעיל חסימה באופן פרוגרמטי באמצעות setEnabled.

שדות משתנים

יכול להיות שתצטרכו לציין שדות של משתנים בצורה שונה כשהם בארגז כלים, לעומת הגדרה שלהם רק בסדרה.

באופן ספציפי, כששדות משתנים בדרך כלל מסודרים ל-JSON, הם מכילים רק את המזהה של המשתנה שהם מייצגים, כי שם המשתנה והסוג שלו מסודרים בנפרד בסדרה. עם זאת, ארגזי הכלים לא מכילים את המידע הזה, ולכן צריך לכלול אותם ישירות בשדה המשתנה.

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

מפרידים

הוספת מפריד בין שתי קטגוריות תיצור קו ורווח נוסף בין שתי הקטגוריות.

אפשר לשנות את הסיווג של המפריד בהגדרת ארגז הכלים של JSON או XML.

JSON

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

XML

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

הוספת מפריד בין שני בלוקים תיצור פער בין הבלוקים. כברירת מחדל, כל בלוק מופרד מהשכן התחתון שלו ב-24 פיקסלים. אפשר לשנות את ההפרדה הזו באמצעות המאפיין 'gap', שיחליף את הפער שמוגדר כברירת מחדל.

כך תוכלו ליצור קבוצות לוגיות של בלוקים בארגז הכלים.

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>

לחצנים ותוויות

אפשר להוסיף לחצן או תווית בכל מקום שבו ניתן להוסיף בלוק לארגז הכלים.

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>

אפשר לציין שם מחלקה של CSS להחלה על הלחצן או התווית. בדוגמה שלמעלה, התווית הראשונה משתמשת בסגנון מותאם אישית, והתווית השנייה משתמשת בסגנון ברירת המחדל.

לחצנים צריכים לכלול פונקציות קריאה חוזרת, ואילו תוויות לא יכולות לכלול פונקציות קריאה חוזרת. כדי להגדיר את הקריאה החוזרת לקליק מסוים על לחצן, השתמשו

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

הפונקציה שלך אמורה לקבל כארגומנט את הלחצן שעליו לחצת. הלחצן 'Create variable...' (יצירת משתנה) בקטגוריית המשתנים הוא דוגמה טובה ללחצן עם קריאה חוזרת (callback).

שינוי ארגז הכלים

האפליקציה יכולה לשנות את הבלוקים הזמינים בארגז הכלים בכל שלב באמצעות קריאה אחת לפונקציה:

workspace.updateToolbox(newTree);

כמו שהיה במהלך ההגדרה הראשונית, השדה newTree יכול להיות עץ של צמתים, ייצוג של מחרוזות או אובייקט JSON. ההגבלה היחידה היא שלא ניתן לשנות את המצב. כלומר, אם היו קטגוריות בארגז הכלים שהגדרתם בהתחלה, גם ארגז הכלים החדש חייב לכלול קטגוריות (למרות שהקטגוריות עשויות להשתנות). בדומה לכך, אם ארגז הכלים שהוגדר בהתחלה לא כלל קטגוריות, יכול להיות שארגז הכלים החדש לא יכלול קטגוריות.

כדי לעדכן את התוכן של קטגוריה אחת, אפשר:

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

כאשר flyoutContents יכולה להיות רשימת בלוקים שמוגדרים באמצעות JSON, עץ של צמתים או ייצוג מחרוזות.

חשוב לשים לב שנכון לעכשיו, עדכון ארגז הכלים גורם לאיפוסים קלים בממשק המשתמש:

• בארגז כלים ללא קטגוריות, כל שדות שהמשתמש שינה (כגון תפריט נפתח) יחזרו לברירת המחדל.

הנה הדגמה חיה של עץ עם קטגוריות וקבוצות חסימה.