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

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