ब्लॉक की बनावट

इस दस्तावेज़ में, ब्लॉक के अलग-अलग हिस्सों के बारे में बताया गया है.

कनेक्शन

कनेक्शन से यह तय होता है कि ब्लॉक कहां कनेक्ट हो सकते हैं और वे किस तरह के ब्लॉक से कनेक्ट हो सकते हैं.

मुख्य शब्द: कनेक्शन शब्द का मतलब आम तौर पर दो चीज़ों के बीच का संबंध होता है. Blockly में, इसका मतलब आम तौर पर कनेक्टर होता है, जैसे कि प्लग या सॉकेट. इसलिए, दो ब्लॉक कनेक्ट करने का मतलब है कि उनके कनेक्शन को एक साथ जोड़ना.

कनेक्शन चार तरह के होते हैं:

कनेक्शन किस तरह का है	इमेज
आउटपुट कनेक्शन
इनपुट कनेक्शन
पिछला कनेक्शन
अगला कनेक्शन

आउटपुट कनेक्शन और इनपुट कनेक्शन एक-दूसरे से कनेक्ट हो सकते हैं. साथ ही, अगले कनेक्शन और पिछले कनेक्शन एक-दूसरे से कनेक्ट हो सकते हैं. कनेक्शन की जांच करके, कनेक्शन को और भी ज़्यादा सीमित किया जा सकता है.

कस्टम रेंडरर का इस्तेमाल करके, कनेक्शन के आकार को पसंद के मुताबिक बनाया जा सकता है.

टॉप-लेवल कनेक्शन

ब्लॉक में तीन कनेक्शन होते हैं. इनका इस्तेमाल करना ज़रूरी नहीं है.

किसी ब्लॉक में एक आउटपुट कनेक्शन हो सकता है. इसे ब्लॉक के आगे के हिस्से पर, मेल जिग्सॉ कनेक्टर के तौर पर दिखाया जाता है. आउटपुट कनेक्शन, किसी ब्लॉक की वैल्यू (एक्सप्रेशन) को दूसरे ब्लॉक में पास करता है. आउटपुट कनेक्शन वाले ब्लॉक को वैल्यू ब्लॉक कहा जाता है.

किसी ब्लॉक के ऊपर की ओर पिछला कनेक्शन (नॉच के तौर पर दिखाया गया है) और नीचे की ओर अगला कनेक्शन (टैब के तौर पर दिखाया गया है) हो सकता है. इनकी मदद से, ब्लॉक को वर्टिकल तौर पर स्टैक किया जा सकता है. इससे स्टेटमेंट के क्रम का पता चलता है. आउटपुट कनेक्शन के बिना ब्लॉक को स्टेटमेंट ब्लॉक कहा जाता है. इसमें आम तौर पर, पिछले और अगले, दोनों कनेक्शन होते हैं.

ज़्यादा जानकारी के लिए, टॉप-लेवल कनेक्शन देखें.

फ़ील्ड

फ़ील्ड, ब्लॉक में मौजूद ज़्यादातर यूज़र इंटरफ़ेस (यूआई) एलिमेंट तय करते हैं. इनमें स्ट्रिंग लेबल, ड्रॉपडाउन, चेकबॉक्स, इमेज, और लिटरल डेटा के लिए इनपुट शामिल हैं. जैसे, स्ट्रिंग और संख्याएं. उदाहरण के लिए, यह लूप ब्लॉक, लेबल फ़ील्ड, ड्रॉपडाउन फ़ील्ड, और नंबर फ़ील्ड का इस्तेमाल करता है.

Blockly में कई बिल्ट-इन फ़ील्ड उपलब्ध हैं. इनमें टेक्स्ट इनपुट, कलर पिकर, और इमेज शामिल हैं. आपके पास अपने फ़ील्ड बनाने का विकल्प भी है.

ज़्यादा जानकारी के लिए, फ़ील्ड देखें.

इनपुट

इनपुट, फ़ील्ड और कनेक्शन के लिए कंटेनर होते हैं. किसी ब्लॉक को इस तरह बनाया जाता है कि उसके इनपुट, ईंटों की तरह एक या एक से ज़्यादा लाइनों में रेंडर किए जाते हैं.

मुख्य शब्द: Blockly में input शब्द के कई मतलब होते हैं. इसका सबसे सामान्य मतलब यहां बताया गया है: फ़ील्ड और कनेक्शन के लिए कंटेनर. कभी-कभी, इसका मतलब वैल्यू डालना या डाली गई वैल्यू से होता है.

इनपुट चार तरह के होते हैं. इन सभी में फ़ील्ड (लेबल भी शामिल हैं) हो सकते हैं. इनमें से दो में एक कनेक्शन होता है. आपके पास कस्टम इनपुट बनाने का विकल्प भी है. ये कस्टम रेंडरिंग के साथ काम करते हैं.

इनपुट प्रकार	कनेक्शन किस तरह का है	इमेज
डमी इनपुट	कोई नहीं
लाइन के आखिर में मौजूद इनपुट	कोई नहीं
वैल्यू इनपुट	इनपुट कनेक्शन
स्टेटमेंट इनपुट	अगला कनेक्शन

हम इन इनपुट के बारे में, उदाहरणों की मदद से बताएंगे. किसी ब्लॉक को बनाने वाले इनपुट, कनेक्शन, और फ़ील्ड तय करने के बारे में जानकारी पाने के लिए, JSON में ब्लॉक का स्ट्रक्चर और JavaScript में ब्लॉक का स्ट्रक्चर देखें.

डमी इनपुट

डमी इनपुट, सिर्फ़ फ़ील्ड के लिए एक कंटेनर होता है. इसका कोई कनेक्शन नहीं होता. उदाहरण के लिए, यहां दिए गए नंबर ब्लॉक में एक डमी इनपुट है. इसमें एक नंबर फ़ील्ड शामिल है.

ज़्यादा मुश्किल उदाहरण के तौर पर, ऐसे ब्लॉक के बारे में सोचें जो दो संख्याओं को एक साथ जोड़ता है. इसे तीन फ़ील्ड (संख्या, लेबल, संख्या) वाले एक डमी इनपुट से बनाया जा सकता है:

या तीन डमी इनपुट, जिनमें से हर एक में एक फ़ील्ड हो:

लाइन के आखिर में जोड़े गए इनपुट

Blockly, अनुमानित अनुभव के आधार पर यह तय करता है कि सभी इनपुट को एक ही लाइन में रेंडर करना है या हर इनपुट को उसकी लाइन में रेंडर करना है. अगर आपको यह पक्का करना है कि कोई इनपुट नई लाइन से शुरू हो, तो पिछले इनपुट के तौर पर end-of-row input का इस्तेमाल करें.

डमी इनपुट की तरह, लाइन के आखिर में मौजूद इनपुट में फ़ील्ड शामिल हो सकते हैं, लेकिन इनमें कोई कनेक्शन नहीं होता. उदाहरण के लिए, यहां दो फ़ील्ड वाले लाइन के आखिर के इनपुट और एक फ़ील्ड वाले डमी इनपुट से बनाया गया जोड़ ब्लॉक दिखाया गया है. लाइन के आखिर में मौजूद इनपुट, डमी इनपुट को नई लाइन में रेंडर करने के लिए मजबूर करता है.

वैल्यू इनपुट

फ़ील्ड में सिर्फ़ कुछ तरह का डेटा डाला जा सकता है. उदाहरण के लिए, नंबर फ़ील्ड में सिर्फ़ नंबर डाले जा सकते हैं. हालांकि, अगर आपको दो वैरिएबल को एक साथ जोड़ना हो, तो क्या करें? या क्या किसी प्रोसीजर कॉल के नतीजे को किसी दूसरी कैलकुलेशन के नतीजे में जोड़ा जा सकता है? इस समस्या को हल करने के लिए, फ़ील्ड के बजाय इनपुट कनेक्शन का इस्तेमाल करें. इससे उपयोगकर्ताओं को वैल्यू ब्लॉक को इनपुट वैल्यू के तौर पर इस्तेमाल करने की अनुमति मिलती है.

वैल्यू इनपुट में शून्य या उससे ज़्यादा फ़ील्ड होते हैं और यह इनपुट कनेक्शन पर खत्म होता है. नीचे दिए गए ब्लॉक में, जोड़ वाले ब्लॉक में मौजूद नंबर फ़ील्ड को इनपुट कनेक्शन से बदल दिया गया है. इसे दो वैल्यू इनपुट से बनाया गया है. पहले में कोई फ़ील्ड नहीं है और दूसरे में लेबल फ़ील्ड है. दोनों इनपुट कनेक्शन में खत्म होते हैं.

स्टेटमेंट के लिए इनपुट

आखिरी तरह का इनपुट, स्टेटमेंट इनपुट होता है. इसमें शून्य या उससे ज़्यादा फ़ील्ड होते हैं और यह अगले कनेक्शन के साथ खत्म होता है. अगले कनेक्शन की मदद से, स्टेटमेंट ब्लॉक के स्टैक को अपने ब्लॉक में नेस्ट किया जा सकता है. उदाहरण के लिए, यहां दिए गए repeat ब्लॉक को देखें. इस ब्लॉक की दूसरी लाइन में, स्टेटमेंट इनपुट होता है. इसमें एक लेबल फ़ील्ड और अगला कनेक्शन होता है.

स्टेटमेंट के इनपुट हमेशा अपनी लाइन में रेंडर किए जाते हैं. इसे यहां दिए गए if-then-else ब्लॉक में देखा जा सकता है. इसकी पहली लाइन में वैल्यू इनपुट है और अगली दो लाइनों में स्टेटमेंट इनपुट हैं.

इनलाइन इनपुट बनाम बाहरी इनपुट

इनपुट को इनलाइन या बाहरी तौर पर रेंडर किया जा सकता है. इससे यह कंट्रोल किया जाता है कि वैल्यू इनपुट के लिए कनेक्टर, ब्लॉक में (इनलाइन) रेंडर किए जाएं या बाहरी किनारे पर (एक्सटर्नल). साथ ही, इससे यह भी कंट्रोल किया जाता है कि इनपुट एक ही लाइन में रेंडर किए जाएं या अलग-अलग लाइनों में.

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

अब खेलें!

इनपुट, फ़ील्ड, और कनेक्शन के बारे में जानने का सबसे अच्छा तरीका यह है कि Blockly Developer Tools में ब्लॉक बनाएं. इसके बाद, inputs ड्रॉपडाउन (automatic, external, inline) के लिए अलग-अलग सेटिंग चुनें.

आइकॉन

इनपुट, कनेक्शन, और फ़ील्ड के अलावा, ब्लॉक में एक या उससे ज़्यादा आइकॉन हो सकते हैं. इनका इस्तेमाल कई तरह से किया जाता है. जैसे, चेतावनियां दिखाना, ब्लॉक-लेवल की टिप्पणियां डालना या म्यूटेटर यूज़र इंटरफ़ेस (यूआई) दिखाना. उदाहरण के लिए, यहां टिप्पणी के आइकॉन वाला एक ब्लॉक और उससे जुड़ा एडिटर दिया गया है.

ज़्यादा जानकारी के लिए, Icons देखें.

ब्लॉक और JavaScript ऑब्जेक्ट

ब्लॉक, इनपुट, कनेक्शन, फ़ील्ड, और आइकॉन, सभी JavaScript ऑब्जेक्ट होते हैं.

Blockly कॉम्पोनेंट	बेस क्लास	सबक्लास
ब्लॉक करें	Block	BlockSvg
इनपुट	Input	DummyInput
		EndRowInput
		ValueInput
		StatementInput
		कस्टम इनपुट
कनेक्शन	Connection	RenderedConnection
फ़ील्ड	Field	FieldTextInput
		FieldNumber
		FieldLabel
		कस्टम फ़ील्ड
		वगैरह
आइकॉन	Icon	CommentIcon
		MutatorIcon
		WarningIcon
		कस्टम आइकॉन

ब्लॉक में मौजूद ऑब्जेक्ट, पेड़ के आकार का ऑब्जेक्ट बनाते हैं. ब्लॉक के ग्राफ़िकल प्रज़ेंटेशन का इस ट्री से क्या संबंध है, यह समझना तब मददगार होता है, जब आपको प्रोग्राम के हिसाब से ब्लॉक में बदलाव करने के लिए कोड लिखना हो. उदाहरण के लिए, controls_for ब्लॉक:

यह JavaScript ऑब्जेक्ट के इस ट्री से मेल खाता है.

// <Object> means an instance of an Object.
{                                   // Block
  nextConnection: <Connection>,     // ConnectionType NEXT_STATEMENT
  outputConnection: null,
  previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
  inputList: [                      // Array of Inputs in block
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [                   // Array of fields in Input
        <FieldLabel>,               // 'count with'
        <FieldVariable>,            // i
        <FieldLabel>,               // 'from'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'to'
      ],
    },
    {                               // ValueInput
      connection: <Connection>,     // ConnectionType INPUT_VALUE
      fieldRow: [
        <FieldLabel>,               // 'by'
      ],
    },
    {                               // StatementInput
      connection: <Connection>,     // ConnectionType NEXT_STATEMENT
      fieldRow: [
        <FieldLabel>,               // 'do'
      ],
    },
  ]
}