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');
}

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 तरीके का इस्तेमाल, कनेक्शन के टाइप की जांच करने के लिए किया जाता है. अगर null आर्ग्युमेंट दिया जाता है, जो डिफ़ॉल्ट होता है, तो इस इनपुट को किसी भी ब्लॉक से कनेक्ट किया जा सकता है. ज़्यादा जानकारी के लिए, कनेक्शन की जांच करना देखें.

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

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 से फ़ील्ड, बाईं ओर अलाइन हो जाएंगे.