तय साइज़ का फ़ाइल फ़ोल्डर

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 में दिखता है. इसमें टूलबॉक्स में सात ब्लॉक होते हैं. यहां लाइव डेमो दिया गया है.