JSON এবং জাভাস্ক্রিপ্ট

Blockly-এ ব্লক সংজ্ঞায়িত করার দুটি উপায় রয়েছে: JSON অবজেক্ট, যা কী-মান জোড়া ব্যবহার করে এবং JavaScript ফাংশন, যা Blockly's API বলে। JSON ফর্ম্যাটটি পছন্দের কারণ এটি স্থানীয়করণকে সহজ করে এবং পড়তে এবং লিখতে সহজ। যাইহোক, এটি সরাসরি উন্নত বৈশিষ্ট্য যেমন মিউটেটর বা ভ্যালিডেটর সংজ্ঞায়িত করতে ব্যবহার করা যাবে না। এগুলি অবশ্যই জাভাস্ক্রিপ্টে লিখতে হবে, সাধারণত এক্সটেনশন হিসাবে।

মূল টার্ম: "JSON" অবজেক্টগুলি আসলে, প্লেইন জাভাস্ক্রিপ্ট অবজেক্ট। এগুলিকে 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 এ সংরক্ষণ করে।

জাভাস্ক্রিপ্ট

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 ব্যবহার করে।

জাভাস্ক্রিপ্ট

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

ব্লক সংজ্ঞা API

এই বিভাগে কাস্টম ব্লক সংজ্ঞায়িত করতে ব্যবহৃত বস্তু এবং ফাংশন সংক্ষিপ্ত করা হয়।

ব্লকলি।ব্লকস

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

BlocksWithJsonArray সংজ্ঞায়িত করুন

defineBlocksWithJsonArray JSON অবজেক্টের একটি অ্যারে গ্রহণ করে, তাদের থেকে ব্লক সংজ্ঞা তৈরি করে এবং সেগুলিকে Blockly.Blocks এ যোগ করে।

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

JsonArray থেকে ব্লক ডেফিনিশন তৈরি করুন এবং ব্লকগুলিকে সংজ্ঞায়িত করুন

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 সংশ্লিষ্ট পদ্ধতিগুলিকে কল করে। উদাহরণ স্বরূপ, একটি JSON অবজেক্টের সাথে কী-মান পেয়ার colour: 150 ফলে this.setColour(150) এ কল আসে। একটি JSON অবজেক্ট লোড করতে একটি init ফাংশনে jsonInit ব্যবহার করুন।

var myJson = {
  // ...
};

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