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

הדרך הפשוטה ביותר להטמיע את 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, עם שבעה בלוקים בכלי. הדגמה פעילה