مساحة عمل بحجم ثابت

إن أبسط طريقة لوضع 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، مع سبعة وحدات في صندوق الأدوات. في ما يلي عرض توضيحي مباشر.