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

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

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

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

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

वेब के लिए ब्लॉकली, स्क्रिप्ट फ़ाइलों के ज़रिए ब्लॉक को लोड करती है. blocks/ डायरेक्ट्री में, स्टैंडर्ड ब्लॉक के लिए ऐसे कई उदाहरण शामिल हैं. ब्लॉक मानकर मौजूदा कैटगरी के दायरे में नहीं आते हैं, तो नई JavaScript फ़ाइल बनाएं. इस नई JavaScript फ़ाइल को एडिटर की HTML फ़ाइल में <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` ब्लॉक.

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

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 इनपुट) को कोड स्ट्रिंग में रेंडर करता है. इसके बाद, उन्हें एक बड़े एक्सप्रेशन में जोड़ता है.

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