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

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