JavaScript में ब्लॉक स्ट्रक्चर

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

अपने इनपुट, फ़ील्ड, और कनेक्शन को JSON में भी तय किया जा सकता है.

इनपुट जोड़ना

JavaScript API में हर इनपुट टाइप के लिए एक append तरीका शामिल होता है:

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

चार पंक्तियों वाला ब्लॉक. पहली पंक्ति में, "हर" और "आइटम" लेबल हैं. साथ ही, "x" चुने गए वैरिएबल का ड्रॉपडाउन है. दूसरी लाइन में "in list" लेबल और वैल्यू इनपुट है. तीसरी लाइन में "do" लेबल और स्टेटमेंट इनपुट है. और आखिरी पंक्ति में "end" लेबल है.

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

JavaScript API में, कस्टम इनपुट जोड़ने के लिए, एक सामान्य appendInput तरीका भी शामिल है. ध्यान दें कि इस मामले में, आइडेंटिफ़ायर को सीधे अपने कस्टम इनपुट के कन्स्ट्रक्टर को पास किया जाना चाहिए.

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

appendInput के सभी तरीके (सामान्य और गैर-सामान्य, दोनों) इनपुट ऑब्जेक्ट दिखाते हैं, ताकि उन्हें तरीकों को एक-दूसरे से जोड़कर कॉन्फ़िगर किया जा सके. इनपुट को कॉन्फ़िगर करने के लिए, पहले से मौजूद तीन तरीके इस्तेमाल किए जाते हैं.

फ़ील्ड जोड़ना

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

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

लेबल वाला ब्लॉक

सबसे आसान फ़ील्ड, लेबल होता है. Blockly में, सभी टेक्स्ट को छोटे अक्षरों में लिखा जाता है. हालांकि, इसमें खास नामों (जैसे, Google, SQL) को अपवाद माना जाता है.

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

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

सादे टेक्स्ट में "नमस्ते" लेबल और इटैलिक में "नील" लेबल वाला ब्लॉक.

appendField('hello') कॉल, असल में साफ़ तौर पर बताए गए FieldLabel कंस्ट्रक्टर: appendField(new Blockly.FieldLabel('hello')) का इस्तेमाल करने के लिए एक शॉर्टकट है. कन्स्ट्रक्टर का इस्तेमाल सिर्फ़ तब किया जाना चाहिए, जब क्लास का नाम बताना हो, ताकि लेबल को सीएसएस नियम का इस्तेमाल करके स्टाइल किया जा सके.

कनेक्शन की जांच

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

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

फ़ील्ड अलाइन करना

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

setAlign तरीके का इस्तेमाल, इनपुट में फ़ील्ड अलाइन करने के लिए किया जाता है. इस फ़ंक्शन के लिए, आर्ग्युमेंट के तौर पर तीन वैल्यू इस्तेमाल की जा सकती हैं: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT, और Blockly.inputs.Align.CENTER.

जब किसी ब्लॉक को दाईं से बाईं ओर रेंडर किया जाता है, जैसे कि अरबी और हिब्रू, तो बाईं और दाईं ओर की जगह बदल जाती है. इसलिए, Blockly.inputs.Align.RIGHT फ़ील्ड को बाईं ओर अलाइन करेगा.