कस्टम ब्लॉक जोड़ें

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

ब्लॉक के तीन कॉम्पोनेंट होते हैं:

  • ब्लॉक डेफ़िनिशन ऑब्जेक्ट: ब्लॉक के लुक और व्यवहार के बारे में बताता है. इसमें टेक्स्ट, रंग, फ़ील्ड, और कनेक्शन शामिल हैं.
  • टूलबॉक्स रेफ़रंस: टूलबॉक्स एक्सएमएल में ब्लॉक टाइप के बारे में जानकारी, ताकि उपयोगकर्ता इसे फ़ाइल फ़ोल्डर में जोड़ सकें.
  • जनरेटर फ़ंक्शन: इस ब्लॉक के लिए कोड स्ट्रिंग जनरेट करता है. इसे हमेशा JavaScript में ही लिखा जाता है, भले ही टारगेट भाषा JavaScript न हो.

ब्लॉक की परिभाषा

वेब के लिए ब्लॉक रूप से, स्क्रिप्ट फ़ाइलों के ज़रिए Blocks लोड करता है. blocks/ डायरेक्ट्री में, स्टैंडर्ड ब्लॉक के लिए ऐसे कई उदाहरण शामिल हैं. यह मानते हुए कि आपके ब्लॉक मौजूदा कैटगरी में फ़िट नहीं होते, एक नई JavaScript फ़ाइल बनाएं. इस नई JavaScript फ़ाइल को एडिटर की एचटीएमएल फ़ाइल में मौजूद <script ...> टैग की सूची में शामिल करना ज़रूरी है.

ब्लॉक की सामान्य परिभाषा कुछ इस तरह दिखती है:

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "message0": 'length of %1',
      "args0": [
        {
          "type": "input_value",
          "name": "VALUE",
          "check": "String"
        }
      ],
      "output": "Number",
      "colour": 160,
      "tooltip": "Returns number of letters in the provided text.",
      "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
    });
  }
};

JavaScript

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

  • string_length: यह ब्लॉक के टाइप का नाम है. सभी ब्लॉक का नेमस्पेस एक जैसा होता है. इसलिए, अपनी कैटगरी (इस मामले में string) से बने नाम का इस्तेमाल करें. इसके बाद, अपने ब्लॉक का फ़ंक्शन (इस मामले में length) इस्तेमाल करें.

  • init: यह फ़ंक्शन ब्लॉक का लुक और स्टाइल तय करता है.

इससे नीचे दिए गए ब्लॉक के बारे में पता चलता है:

`string_length` ब्लॉक.

ब्लॉक की परिभाषाओं की जानकारी, Blocks तय करें में देखी जा सकती है.

JSON फ़ॉर्मैट

JSON ब्लॉक डेफ़िनिशन की कैटगरी का इस्तेमाल करके, एक साथ कई ब्लॉक तय किए जा सकते हैं.

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

टूलबॉक्स रेफ़रंस जोड़ें

एक बार परिभाषित हो जाने पर, टूलबॉक्स में ब्लॉक का संदर्भ देने के लिए टाइप का नाम इस्तेमाल करें:

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

ज़्यादा जानकारी के लिए, टूलबॉक्स गाइड देखें.

ब्लॉक-कोड जनरेटर जोड़ें

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

javascriptGenerator.forBlock['text_length'] = function(block, generator) {
  // String or array length.
  var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Order.MEMBER];
};

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

→ ब्लॉक-कोड जनरेटर के बारे में ज़्यादा जानकारी...