ড্রপডাউন ফিল্ডটি তার ভ্যালু হিসেবে একটি স্ট্রিং এবং টেক্সট হিসেবে একটি স্ট্রিং সংরক্ষণ করে। ভ্যালুটি একটি ভাষা-নিরপেক্ষ কী, যা টেক্সট অ্যাক্সেস করার জন্য ব্যবহৃত হবে এবং ব্লক্লি-র ভাষা পরিবর্তনের সময় এটি অনূদিত হবে না। টেক্সটটি একটি পাঠযোগ্য স্ট্রিং, যা ব্যবহারকারীকে দেখানো হবে।
ড্রপডাউন ফিল্ড
এডিটর খোলা সহ ড্রপডাউন ফিল্ড
সংকুচিত ব্লকে ড্রপডাউন ফিল্ড
সৃষ্টি
ড্রপডাউন কনস্ট্রাক্টরটি একটি মেনু জেনারেটর এবং একটি ঐচ্ছিক ভ্যালিডেটর গ্রহণ করে। মেনু জেনারেটরটি হয় অপশনগুলোর একটি অ্যারে (যেখানে প্রতিটি অপশনে একটি পাঠযোগ্য অংশ এবং একটি ভাষা-নিরপেক্ষ স্ট্রিং থাকে) অথবা এমন একটি ফাংশন যা অপশনগুলোর একটি অ্যারে তৈরি করে। প্রতিটি অপশনের পাঠযোগ্য অংশটি একটি স্ট্রিং, একটি ছবি বা একটি HTML এলিমেন্ট হতে পারে এবং অ্যারেটিতে বিভিন্ন ধরনের অপশনের মিশ্রণ থাকতে পারে।
সাধারণ টেক্সট ড্রপডাউন
JSON
{
"type": "example_dropdown",
"message0": "drop down: %1",
"args0": [
{
"type": "field_dropdown",
"name": "FIELDNAME",
"options": [
[ "first item", "ITEM1" ],
[ "second item", "ITEM2" ]
]
}
]
}
জাভাস্ক্রিপ্ট
Blockly.Blocks['example_dropdown'] = {
init: function() {
this.appendDummyInput()
.appendField('drop down:')
.appendField(new Blockly.FieldDropdown([
['first item', 'ITEM1'],
['second item', 'ITEM2']
]), 'FIELDNAME');
}
};
ভাষা-নিরপেক্ষ কী থেকে পাঠযোগ্য তথ্য আলাদা রাখলে ড্রপডাউন মেনুর সেটিং বিভিন্ন ভাষার মধ্যে সংরক্ষিত থাকে। উদাহরণস্বরূপ, একটি ব্লকের ইংরেজি সংস্করণে এর অর্থ হতে পারে [['left', 'LEFT'], ['right', 'RIGHT]] যেখানে একই ব্লকের জার্মান সংস্করণে এর অর্থ হবে [['links', 'LEFT'], ['rechts', 'RIGHT]] ।
ছবির ড্রপডাউন
একটি ড্রপডাউন মেনুর অপশনগুলো ছবি হতে পারে, যেগুলোকে src , width , height , এবং alt প্রপার্টিসহ অবজেক্ট হিসেবে উপস্থাপন করা হয়।
JSON
{
"type": "image_dropdown",
"message0": "flag %1",
"args0": [
{
"type": "field_dropdown",
"name": "FLAG",
"options": [
["none", "NONE"],
[{"src": "canada.png", "width": 50, "height": 25, "alt": "Canada"}, "CANADA"],
[{"src": "usa.png", "width": 50, "height": 25, "alt": "USA"}, "USA"],
[{"src": "mexico.png", "width": 50, "height": 25, "alt": "Mexico"}, "MEXICO"]
]
}
]
}
জাভাস্ক্রিপ্ট
Blockly.Blocks['image_dropdown'] = {
init: function() {
var input = this.appendDummyInput()
.appendField('flag');
var options = [
['none', 'NONE'],
[{'src': 'canada.png', 'width': 50, 'height': 25, 'alt': 'Canada'}, 'CANADA'],
[{'src': 'usa.png', 'width': 50, 'height': 25, 'alt': 'USA'}, 'USA'],
[{'src': 'mexico.png', 'width': 50, 'height': 25, 'alt': 'Mexico'}, 'MEXICO']
];
input.appendField(new Blockly.FieldDropdown(options), 'FLAG');
}
};
এইচটিএমএল ড্রপডাউন
একটি অপশন যেকোনো HTML এলিমেন্ট হতে পারে, তবে শর্ত হলো এটি যেন খুব বড় না হয় এবং মাউস বা কিবোর্ড ইভেন্ট পরিচালনা করার চেষ্টা না করে। (এই নিয়মগুলো মেনে চলার দায়িত্ব আপনার — Blockly এগুলো প্রয়োগ করে না।)
যখন ড্রপডাউনটি খোলা থাকে, তখন তালিকাটি HTML এলিমেন্টটি প্রদর্শন করে। যখন এটি বন্ধ থাকে এবং এলিমেন্টটি নির্বাচিত অপশন হয়, তখন তালিকাটি (পছন্দের ক্রমানুসারে) এলিমেন্টটির title অ্যাট্রিবিউট, aria-label অ্যাট্রিবিউট, অথবা innerText প্রপার্টি প্রদর্শন করে।
JSON
{
"type": "flags_with_text_dropdown",
"message0": "flag with text %1",
"args0": [
{
"type": "field_dropdown",
"name": "FLAG_WITH_TEXT",
"options": [
["x", "X"], // Placeholder. An empty array throws an exception.
]
}
],
// Use an extension to add the HTML element options.
"extensions": ["flag_with_text_extension"]
}
Blockly.Extensions.register('flag_with_text_extension',
function() {
function createFlagWithTextDiv(text, src) {
const div = document.createElement('div');
div.setAttribute('style', 'width: 75px;');
div.setAttribute('title', text);
const img = document.createElement('img');
img.setAttribute('src', src);
img.setAttribute('style', 'height: 25px; display: block; margin: auto;');
div.appendChild(img);
const para = document.createElement('p');
para.innerText = text;
para.setAttribute('style', 'text-align: center; margin: 5px;');
div.appendChild(para);
return div;
}
const canadaDiv = createFlagWithTextDiv('Canada', 'canada.png');
const usaDiv = createFlagWithTextDiv('USA', 'usa.png');
const mexicoDiv = createFlagWithTextDiv('Mexico', 'mexico.png');
const options = [
['none', 'NONE'],
[canadaDiv, 'CANADA'],
[usaDiv, 'USA'],
[mexicoDiv, 'MEXICO']
];
this.getField('FLAG_WITH_TEXT').setOptions(options);
});
এটি একটি JSON এক্সটেনশন ব্যবহার করে করা হয়।
জাভাস্ক্রিপ্ট
function createFlagWithTextDiv(text, src) {
const div = document.createElement('div');
div.setAttribute('style', 'width: 75px;');
div.setAttribute('title', text);
const img = document.createElement('img');
img.setAttribute('src', src);
img.setAttribute('style', 'height: 25px; display: block; margin: auto;');
div.appendChild(img);
const para = document.createElement('p');
para.innerText = text;
para.setAttribute('style', 'text-align: center; margin: 5px;');
div.appendChild(para);
return div;
}
const canadaDiv = createFlagWithTextDiv('Canada', 'canada.png');
const usaDiv = createFlagWithTextDiv('USA', 'usa.png');
const mexicoDiv = createFlagWithTextDiv('Mexico', 'mexico.png');
Blockly.Blocks['flags_with_text_dropdown'] = {
init: function() {
const input = this.appendDummyInput()
.appendField('flag with text');
const options = [
['none', 'NONE'],
[canadaDiv, 'CANADA'],
[usaDiv, 'USA'],
[mexicoDiv, 'MEXICO']
];
input.appendField(new Blockly.FieldDropdown(options), 'FLAG_WITH_TEXT');
}
};
ডাইনামিক ড্রপডাউন
JSON
{
"type": "dynamic_dropdown",
"message0": "day %1",
"args0": [
{
"type": "field_dropdown",
"name": "DAY",
"options": [
["x", "X"], // Placeholder. An empty array throws an exception.
]
}
],
// Use an extension to set the menu function.
"extensions": ["dynamic_menu_extension"]
}
Blockly.Extensions.register('dynamic_menu_extension',
function() {
this.getField('DAY').setOptions(
function() {
var options = [];
var now = Date.now();
for(var i = 0; i < 7; i++) {
var dateString = String(new Date(now)).substring(0, 3);
options.push([dateString, dateString.toUpperCase()]);
now += 24 * 60 * 60 * 1000;
}
return options;
});
});
এটি একটি JSON এক্সটেনশন ব্যবহার করে করা হয়।
জাভাস্ক্রিপ্ট
Blockly.Blocks['dynamic_dropdown'] = {
init: function() {
var input = this.appendDummyInput()
.appendField('day')
.appendField(new Blockly.FieldDropdown(
this.generateOptions), 'DAY');
},
generateOptions: function() {
var options = [];
var now = Date.now();
for(var i = 0; i < 7; i++) {
var dateString = String(new Date(now)).substring(0, 3);
options.push([dateString, dateString.toUpperCase()]);
now += 24 * 60 * 60 * 1000;
}
return options;
}
};
স্ট্যাটিক অপশনের তালিকার পরিবর্তে একটি ফাংশনও ড্রপডাউনে দেওয়া যেতে পারে, যা অপশনগুলোকে ডাইনামিক বা পরিবর্তনশীল করে তোলে। ফাংশনটির উচিত স্ট্যাটিক অপশনের মতোই [human-readable-value, language-neutral-key] ফরম্যাটে অপশনগুলোর একটি অ্যারে রিটার্ন করা। প্রতিবার ড্রপডাউনটি ক্লিক করা হলে ফাংশনটি রান হয় এবং অপশনগুলো পুনরায় গণনা করা হয়।
বিভাজক
ড্রপডাউন মেনুতে অপশনগুলোর মধ্যে একটি লাইন যোগ করতে 'separator' স্ট্রিংটি ব্যবহার করুন।
JSON
{
"type": "separator_dropdown",
"message0": "food %1",
"args0": [
{
"type": "field_dropdown",
"name": "FOOD",
"options": [
["water", "WATER"],
["juice", "JUICE"],
"separator",
["salad", "SALAD"],
["soup", "SOUP"],
]
}
]
}
জাভাস্ক্রিপ্ট
Blockly.Blocks["separator_dropdown"] = {
init: function() {
var input = this.appendDummyInput()
.appendField("food1");
var options = [
["water", "WATER"],
["juice", "JUICE"],
"separator",
["salad", "SALAD"],
["soup", "SOUP"],
];
input.appendField(new Blockly.FieldDropdown(options), "FOOD");
}
};
ক্রমিকীকরণ
JSON
একটি ড্রপডাউন ফিল্ডের JSON দেখতে এইরকম:
{
"fields": {
"FIELDNAME": "LANGUAGE-NEUTRAL-KEY"
}
}
যেখানে FIELDNAME হলো একটি স্ট্রিং যা একটি ড্রপডাউন ফিল্ডকে নির্দেশ করে, এবং value হলো সেই মান যা ফিল্ডটিতে প্রয়োগ করা হবে। value-টি একটি ভাষা-নিরপেক্ষ অপশন কী হওয়া উচিত।
এক্সএমএল
একটি ড্রপডাউন ফিল্ডের XML দেখতে এইরকম:
<field name="FIELDNAME">LANGUAGE-NEUTRAL-KEY</field>
যেখানে ফিল্ডের name অ্যাট্রিবিউটে একটি ড্রপডাউন ফিল্ডকে নির্দেশকারী স্ট্রিং থাকে এবং ইনার টেক্সট হলো ফিল্ডটিতে প্রয়োগ করার জন্য ভ্যালুটি। ইনার টেক্সটটি একটি বৈধ ও ভাষা-নিরপেক্ষ অপশন কী হওয়া উচিত।
কাস্টমাইজেশন
ড্রপডাউন তীর
Blockly.FieldDropdown.ARROW_CHAR প্রপার্টিটি ড্রপডাউন অ্যারোর প্রতিনিধিত্বকারী ইউনিকোড ক্যারেক্টার পরিবর্তন করতে ব্যবহার করা যেতে পারে।
ARROW_CHAR প্রপার্টিটি অ্যান্ড্রয়েডে ডিফল্টভাবে \u25BC (▼) এবং অন্যথায় \u25BE (▾) হয়।
এটি একটি গ্লোবাল প্রপার্টি, তাই এটি সেট করা হলে সমস্ত ড্রপডাউন ফিল্ড পরিবর্তিত হবে।
মেনুর উচ্চতা
মেনুর সর্বোচ্চ উচ্চতা পরিবর্তন করার জন্য Blockly.FieldDropdown.MAX_MENU_HEIGHT_VH প্রপার্টিটি ব্যবহার করা যায়। এটি ভিউপোর্ট উচ্চতার একটি শতাংশ হিসাবে সংজ্ঞায়িত করা হয়, যেখানে ভিউপোর্টটি হলো উইন্ডো।
MAX_MENU_HEIGHT_VH প্রপার্টিটির ডিফল্ট মান হলো 0.45।
এটি একটি গ্লোবাল প্রপার্টি, তাই এটি সেট করা হলে সমস্ত ড্রপডাউন ফিল্ড পরিবর্তিত হবে।
উপসর্গ/প্রত্যয় মেলানো
যদি ড্রপডাউন মেনুর সমস্ত অপশনে একই উপসর্গ এবং/অথবা প্রত্যয় শব্দ থাকে, তবে সেই শব্দগুলো স্বয়ংক্রিয়ভাবে আলাদা করে স্থির টেক্সট হিসেবে যুক্ত করা হয়। উদাহরণস্বরূপ, একই ব্লক তৈরি করার দুটি উপায় এখানে দেওয়া হলো (প্রথমটি প্রত্যয় মেলানো ছাড়া, এবং দ্বিতীয়টি প্রত্যয় মেলানো সহ):
প্রত্যয় মেলানো ছাড়া:
JSON
{
"type": "dropdown_no_matching",
"message0": "hello %1",
"args0": [
{
"type": "field_dropdown",
"name": "MODE",
"options": [
["world", "WORLD"],
["computer", "CPU"]
]
}
]
}
জাভাস্ক্রিপ্ট
Blockly.Blocks['dropdown_no_matching'] = {
init: function() {
var options = [
['world', 'WORLD'],
['computer', 'CPU']
];
this.appendDummyInput()
.appendField('hello')
.appendField(new Blockly.FieldDropdown(options), 'MODE');
}
};
প্রত্যয় মেলানোর মাধ্যমে:
JSON
{
"type": "dropdown_with_matching",
"message0": "%1",
"args0": [
{
"type": "field_dropdown",
"name": "MODE",
"options": [
["hello world", "WORLD"],
["hello computer", "CPU"]
]
}
]
}
জাভাস্ক্রিপ্ট
Blockly.Blocks['dropdown_with_matching'] = {
init: function() {
var options = [
['hello world', 'WORLD'],
['hello computer', 'CPU']
];
this.appendDummyInput()
.appendField(new Blockly.FieldDropdown(options), 'MODE');
}
};
এই পদ্ধতির একটি সুবিধা হলো, ব্লকটিকে অন্যান্য ভাষায় অনুবাদ করা সহজতর হয়। আগের কোডটিতে 'hello' , 'world' এবং 'computer' স্ট্রিংগুলো ছিল, অপরদিকে সংশোধিত কোডটিতে 'hello world' এবং 'hello computer' স্ট্রিংগুলো রয়েছে। বিচ্ছিন্ন শব্দের চেয়ে বাক্যাংশ অনুবাদ করা অনুবাদকদের জন্য অনেক বেশি সহজ হয়।
এই পদ্ধতির আরেকটি সুবিধা হলো, বিভিন্ন ভাষার মধ্যে শব্দের ক্রম প্রায়শই পরিবর্তিত হয়। এমন একটি ভাষার কথা ভাবুন যেখানে 'world hello' এবং 'computer hello' ব্যবহৃত হয়। সাফিক্স ম্যাচিং অ্যালগরিদমটি সাধারণ 'hello' শব্দটি শনাক্ত করবে এবং ড্রপ-ডাউনের পরে তা প্রদর্শন করবে।
তবে, কখনও কখনও প্রিফিক্স/সাফিক্স মেলানো ব্যর্থ হয়। এমন কিছু ক্ষেত্র আছে যেখানে দুটি শব্দ সর্বদা একসাথে থাকা উচিত এবং প্রিফিক্সটি আলাদা করা উচিত নয়। উদাহরণস্বরূপ 'drive red car' এবং 'drive red truck' থেকে যুক্তিযুক্তভাবে শুধুমাত্র 'drive' অংশটি আলাদা করা উচিত, 'drive red' অংশটি নয়। প্রিফিক্স/সাফিক্স ম্যাচিং দমন করার জন্য একটি সাধারণ স্পেসের পরিবর্তে ইউনিকোডের নন-ব্রেকিং স্পেস '\u00A0' ব্যবহার করা যেতে পারে। সুতরাং, উপরের উদাহরণটি 'drive red\u00A0car' এবং 'drive red\u00A0truck' দিয়ে সমাধান করা যেতে পারে।
উপসর্গ/প্রত্যয় মেলানোর ক্ষেত্রে আরেকটি সমস্যা হলো সেইসব ভাষায়, যেখানে প্রতিটি শব্দকে স্পেস দিয়ে আলাদা করা হয় না। চীনা ভাষা এর একটি ভালো উদাহরণ। '訪問中國' বাক্যটির অর্থ হলো 'visit China' , লক্ষ্য করুন শব্দগুলোর মধ্যে কোনো স্পেস নেই। একসাথে, শেষের দুটি অক্ষর ( '中國' ) হলো 'China' শব্দটি, কিন্তু যদি এদেরকে আলাদা করা হয়, তাহলে এদের অর্থ হবে যথাক্রমে 'centre' এবং 'country' । চীনা ভাষার মতো ভাষায় উপসর্গ/প্রত্যয় মেলানোর কাজটি সঠিকভাবে করতে, যেখানে শব্দটিকে আলাদা করার কথা, সেখানে একটি স্পেস বসিয়ে দিন। উদাহরণস্বরূপ '訪問 中國' এবং '訪問 美國' এর ফলে হবে "visit [China/USA]" , যেখানে '訪問 中 國' এবং '訪問 美 國' এর ফলে হবে "visit [centre/beautiful] country" ।
একটি ড্রপডাউন ভ্যালিডেটর তৈরি করা
একটি ড্রপডাউন ফিল্ডের মান একটি ভাষা-নিরপেক্ষ স্ট্রিং, তাই যেকোনো ভ্যালিডেটরকে অবশ্যই একটি স্ট্রিং গ্রহণ করতে হবে এবং এমন একটি স্ট্রিং রিটার্ন করতে হবে যা একটি উপলব্ধ অপশন , null ) বা undefined )।
যদি আপনার ভ্যালিডেটর অন্য কিছু রিটার্ন করে, তাহলে Blockly-এর আচরণ অনির্ধারিত থাকবে এবং আপনার প্রোগ্রাম ক্র্যাশ করতে পারে।
উদাহরণস্বরূপ, আপনি তিনটি অপশন এবং একটি ভ্যালিডেটর সহ একটি ড্রপডাউন ফিল্ড এইভাবে সংজ্ঞায়িত করতে পারেন:
validate: function(newValue) {
this.getSourceBlock().updateConnections(newValue);
return newValue;
},
init: function() {
var options = [
['has neither', 'NEITHER'],
['has statement', 'STATEMENT'],
['has value', 'VALUE'],
];
this.appendDummyInput()
// Pass the field constructor the options list, the validator, and the name.
.appendField(new Blockly.FieldDropdown(options, this.validate), 'MODE');
}
validate সর্বদা এটিকে দেওয়া মানটিই ফেরত দেয়, কিন্তু এটি updateConnection নামক হেল্পার ফাংশনটিকে কল করে, যা ড্রপডাউনের মানের উপর ভিত্তি করে ইনপুট যোগ বা অপসারণ করে:
updateConnections: function(newValue) {
this.removeInput('STATEMENT', /* no error */ true);
this.removeInput('VALUE', /* no error */ true);
if (newValue == 'STATEMENT') {
this.appendStatementInput('STATEMENT');
} else if (newValue == 'VALUE') {
this.appendValueInput('VALUE');
}
}
