JSON और JavaScript

Blockly में ब्लॉक तय करने के दो तरीके हैं: JSON ऑब्जेक्ट, जो की-वैल्यू पेयर का इस्तेमाल करते हैं और JavaScript फ़ंक्शन, जो Blockly के एपीआई को कॉल करते हैं. JSON फ़ॉर्मैट को प्राथमिकता दी जाती है, क्योंकि इससे लोकलाइज़ेशन को आसान बनाना और उसे पढ़ना और लिखना आसान हो जाता है. हालांकि, इसका इस्तेमाल सीधे तौर पर, ऐडवांस सुविधाओं को तय करने के लिए नहीं किया जा सकता. जैसे, म्यूटेट करने वाले टूल या पुष्टि करने वाले टूल. इन्हें आम तौर पर एक्सटेंशन के तौर पर, JavaScript में लिखा जाना चाहिए.

मुख्य शब्द: असल में, "JSON" ऑब्जेक्ट, सादे JavaScript ऑब्जेक्ट होते हैं. इन्हें JSON ऑब्जेक्ट कहा जाता है, क्योंकि उनकी वैल्यू को JSON के तौर पर सीरियलाइज़ किया जा सकता है. इस शब्द का इस्तेमाल इसलिए किया जाता है, क्योंकि (a) यह Blockly API में दिखता है और (b) ब्लॉक तय करने के दो अलग-अलग तरीकों के बीच अंतर करने का यह एक आसान तरीका है.

JSON या JavaScript का इस्तेमाल करना

यह ब्लॉक:

को JSON या JavaScript में इस तरह से तय किया जा सकता है.

JSON

Blockly.common.defineBlocksWithJsonArray([{
  "type": "string_length",
  "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"
}]);

defineBlocksWithJsonArray, हर JSON ऑब्जेक्ट को init फ़ंक्शन की मदद से, ब्लॉक परिभाषा ऑब्जेक्ट में बदल देता है. यह इन ऑब्जेक्ट को Blockly.Blocks में सेव करता है.

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

ब्लॉक ऑब्जेक्ट में ब्लॉक की परिभाषा वाले ऑब्जेक्ट शामिल होते हैं. इसलिए, कीवर्ड this से उस ब्लॉक के बारे में पता चलता है जिसे बनाया जा रहा है.

दोनों तरीकों से, ब्लॉक डेफ़िनिशन ऑब्जेक्ट को Blockly.Blocks में स्टोर किया जाता है. इसमें ब्लॉक टाइप के नाम (string_length) की एक कुंजी होती है. ब्लॉक डेफ़िनिशन ऑब्जेक्ट में एक ही तरीका (init) होता है, जो ब्लॉक के आकार की जानकारी देता है.

JSON और JavaScript को मिलाना

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

यहां दिए गए उदाहरण में, init फ़ंक्शन की मदद से ब्लॉक की परिभाषा बनाई गई है. यह फ़ंक्शन, JSON ऑब्जेक्ट को लोड करने के लिए jsonInit का इस्तेमाल करता है. साथ ही, डाइनैमिक टूलटिप तय करने के लिए JavaScript API का इस्तेमाल करता है.

JavaScript

// Define the block structure in JSON.
var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    // Use jsonInit to load the JSON block structure.
    this.jsonInit(mathChangeJson);

    // Use JavaScript to define a tooltip function.
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

ब्लॉक डेफ़िनिशन एपीआई

इस सेक्शन में, कस्टम ब्लॉक तय करने के लिए इस्तेमाल किए जाने वाले ऑब्जेक्ट और फ़ंक्शन के बारे में खास जानकारी दी गई है.

Blockly.Blocks

Blockly.Blocks एक ऐसा ऑब्जेक्ट है जिसमें ब्लॉक की परिभाषाएं सेव की जाती हैं. इसकी कुंजियां, ब्लॉक टाइप के नाम होती हैं और इसकी वैल्यू, ब्लॉक की परिभाषा वाले ऑब्जेक्ट होती हैं. JavaScript की मदद से ब्लॉक तय करते समय, Blockly.Blocks का इस्तेमाल करें:

Blockly.Blocks['my_block'] = {
  init: function() {/* ... */},
  onchange: function() {/* ... */},
  // ...
}

आम तौर पर, Blockly.Blocks स्टोर ब्लॉक को मानकर, ऐसा कुछ करने की कोशिश की जाती है. ऐसा इसलिए होता है, क्योंकि Blockly.Blocks ब्लॉक की परिभाषाएं सेव करता है, न कि ब्लॉक.

// Fails with "Blockly.Blocks.my_block.setColour is not a function".
Blockly.Blocks['my_block'].setColour(150);

defineBlocksWithJsonArray

defineBlocksWithJsonArray, JSON ऑब्जेक्ट का कलेक्शन स्वीकार करता है. साथ ही, उनसे ब्लॉक की परिभाषाएं बनाता है और उन्हें Blockly.Blocks में जोड़ता है.

Blockly.common.defineBlocksWithJsonArray([
  {
    type: 'my_block1',
    // ...
  }
  {
    type: 'my_block3',
    // ...
  }
  {
    type: 'my_block2',
    // ...
  }
]);

createBlockDefinitionsFromJsonArray और defineBlocks

createBlockDefinitionsFromJsonArray, JSON ऑब्जेक्ट के कलेक्शन को स्वीकार करता है और एक ऐसा ऑब्जेक्ट दिखाता है जो ब्लॉक टाइप के नामों को ब्लॉक की परिभाषाओं से मैप करता है. आम तौर पर, इसका इस्तेमाल defineBlocks के साथ किया जाता है, जो Blockly.Blocks में ब्लॉक की परिभाषाएं जोड़ता है.

const myBlockDefinitions = Blockly.common.createBlockDefinitionsFromJsonArray([
  {
    type: 'my_block1',
    // ...
  }
  {
    type: 'my_block3',
    // ...
  }
  {
    type: 'my_block2',
    // ...
  }
]);
Blockly.common.defineBlocks(myBlockDefinitions);

Block.jsonInit

jsonInit, एक JSON ऑब्जेक्ट को स्वीकार करता है और Block पर उससे जुड़े तरीके को कॉल करता है. उदाहरण के लिए, colour: 150 की-वैल्यू पेयर वाले JSON ऑब्जेक्ट से this.setColour(150) को कॉल किया जाता है. JSON ऑब्जेक्ट को लोड करने के लिए, init फ़ंक्शन में jsonInit का इस्तेमाल करें.

var myJson = {
  // ...
};

Blockly.Blocks['my_block'] = {
  init: function() {
    this.jsonInit(myJson);
    // The rest of the init function.
  }
};