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

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