Blockly वर्कस्पेस, Blockly का सबसे ऊपरी लेवल का कॉम्पोनेंट होता है. यह एक यूज़र इंटरफ़ेस (यूआई) है. इसका इस्तेमाल, ब्लॉक की मदद से प्रोग्राम बनाने के लिए किया जाता है.
वर्कस्पेस और उसके सब-कॉम्पोनेंट के बारे में ज़्यादा जानने के लिए, विज़ुअल ग्लॉसरी देखें.
इंजेक्शन डिव
Blockly वर्कस्पेस को <div>
में इंजेक्ट किया जाना चाहिए. इसे "इंजेक्शन
डिव" कहा जाता है.
इंजेक्शन div
का साइज़, स्टैटिक या डाइनैमिक हो सकता है. विंडो का साइज़ बदलने पर, div
में मौजूद Blockly एलिमेंट का साइज़ बदल जाता है.
यहां दिए गए कोड स्निपेट में, स्टैटिक साइज़ वाले इंजेक्शन div
के लिए एचटीएमएल दिखाया गया है:
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
इंजेक्शन
इंजेक्शन, एचटीएमएल के उन सभी सब-एलिमेंट को बनाता है जो किसी वर्कस्पेस के यूज़र इंटरफ़ेस (यूआई) को बनाते हैं. यह वर्कस्पेस को इस्तेमाल के लिए तैयार करने के लिए, सभी ज़रूरी चीज़ें भी शुरू करता है.
इंजेक्शन फ़ंक्शन, इंजेक्शन div
का आईडी या इंजेक्शन div
ले सकता है:
// Passes the ID.
const workspace = Blockly.inject('blocklyDiv', { /* config */ });
// Passes the injection div.
const workspace = Blockly.inject(
document.getElementById('blocklyDiv'), { /* config */ });
कॉन्फ़िगरेशन
वर्कस्पेस को इंजेक्शन के दौरान, कई विकल्पों (जैसे कि लेआउट और स्टाइल) के साथ कॉन्फ़िगर किया जा सकता है.
कॉन्फ़िगरेशन के विकल्पों के बारे में ज़्यादा जानने के लिए, कॉन्फ़िगरेशन के विकल्प देखें.