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

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"
    },
  ]
}

आखिर में, अपने तय किए गए div में Blockly को इंजेक्ट करने के लिए, नीचे दिए गए फ़ंक्शन को कॉल करें.

const workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

फ़िलहाल, workspace वैरिएबल का इस्तेमाल नहीं किया जाता. हालांकि, ब्लॉक सेव करने या कोड जनरेट करने के लिए, यह बाद में अहम हो जाएगा. अगर एक ही पेज पर Blockly के एक से ज़्यादा इंस्टेंस इंजेक्ट किए जाते हैं, तो पक्का करें कि दिखाया गया हर फ़ाइल फ़ोल्डर, किसी अलग वैरिएबल में सेव हो.

अब ब्राउज़र में पेज को टेस्ट किया जा सकता है. आपको Blockly का एडिटर दिखेगा, जो टूलबॉक्स में सात ब्लॉक के साथ, div को भर रहा है. यहां लाइव डेमो दिया गया है.