ব্লকলিতে ব্লক সংজ্ঞায়িত করার দুটি উপায় রয়েছে: JSON অবজেক্ট, যা কী-ভ্যালু পেয়ার ব্যবহার করে, এবং জাভাস্ক্রিপ্ট ফাংশন, যা ব্লকলির এপিআই (API)-কে কল করে। JSON ফরম্যাটটি বেশি পছন্দের, কারণ এটি লোকালইজেশনকে সহজ করে এবং পড়া ও লেখাও সহজ। তবে, এটি মিউটেটর বা ভ্যালিডেটরের মতো উন্নত ফিচারগুলো সরাসরি সংজ্ঞায়িত করতে ব্যবহার করা যায় না। এগুলো অবশ্যই জাভাস্ক্রিপ্টে লিখতে হয়, সাধারণত এক্সটেনশন হিসেবে।
JSON বা জাভাস্ক্রিপ্ট ব্যবহার করুন
এই ব্লক:
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 এ একটি ব্লক ডেফিনিশন অবজেক্ট সংরক্ষিত হয়, যার কী (key) হলো ব্লক টাইপের নাম ( string_length )। এই ব্লক ডেফিনিশন অবজেক্টটিতে একটিমাত্র মেথড ( init ) থাকে, যা ব্লকটির আকৃতি নির্ধারণ করে।
JSON এবং JavaScript মিশ্রিত করুন
JSON ফরম্যাট মূলত একটি ব্লকের বাহ্যিক রূপ ও গঠন নির্ধারণ করতে সহায়তা করে। এটি সরাসরি কিছু বৈশিষ্ট্য, যেমন ভ্যালিডেটর এবং মিউটেটর, নির্ধারণ করতে পারে না, যার জন্য একটি ফাংশন সংজ্ঞায়িত করার প্রয়োজন হয়। এই সমস্যা সমাধানের জন্য, আপনার ব্লকের যতটা সম্ভব অংশ JSON দিয়ে সংজ্ঞায়িত করুন এবং বাকি অংশের জন্য জাভাস্ক্রিপ্ট ব্যবহার করুন।
নিম্নলিখিত উদাহরণটি একটি init ফাংশন সহ একটি ব্লক ডেফিনিশন তৈরি করে, যা একটি JSON অবজেক্ট লোড করার জন্য jsonInit এবং একটি ডাইনামিক টুলটিপ সংজ্ঞায়িত করার জন্য জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে।
জাভাস্ক্রিপ্ট
// 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 ব্যবহার করুন:
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.
}
};