סביבת עבודה בגודל קבוע

הדרך הכי פשוטה להוסיף את Blockly לדף אינטרנט היא להטמיע אותו בתג div ריק.

1. קבל את הקוד

מקבלים את הקוד בכל דרך שהכי מתאימה לאפליקציה.

2. הגדרת האזור

מוסיפים תג div ריק איפשהו בגוף הדף ומגדירים את הגודל שלו:

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

‫3. הוספת סביבת העבודה

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

const toolbox = {
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "controls_if"
    },
    {
      "kind": "block",
      "type": "controls_repeat_ext"
    },
    {
      "kind": "block",
      "type": "logic_compare"
    },
    {
      "kind": "block",
      "type": "math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "text"
    },
    {
      "kind": "block",
      "type": "text_print"
    },
  ]
}

לבסוף, קוראים לפונקציה הבאה כדי להוסיף את Blockly ל-div שהוגדר.

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

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

עכשיו אפשר לבדוק את הדף בדפדפן. העורך של Blockly אמור למלא את div, עם שבעה בלוקים בארגז הכלים. הדגמה בזמן אמת