فضای کاری با اندازه ثابت

ساده ترین راه برای قرار دادن 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 را پر می کند. در اینجا یک نسخه ی نمایشی زنده است.