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 फ़ंक्शन का इस्तेमाल करके ब्लॉक की परिभाषा बनाई गई है. यह jsonInit का इस्तेमाल करके JSON ऑब्जेक्ट को लोड करता है. साथ ही, 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 के साथ किया जाता है. यह 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 ऑब्जेक्ट को लोड करने के लिए, jsonInit फ़ंक्शन में init का इस्तेमाल करें.

var myJson = {
  // ...
};

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