গবেষণা সমীক্ষা: ব্লকলি নিয়ে আপনার অভিজ্ঞতা সম্পর্কে আমাদের বলুন

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

ব্লকের সংজ্ঞাগুলি বর্ণনা করে যে একটি ব্লক কীভাবে দেখায় এবং আচরণ করে, যার মধ্যে পাঠ্য, রঙ, আকৃতি এবং অন্য কোন ব্লকের সাথে এটি সংযোগ করতে পারে।

JSON বিন্যাস বনাম JavaScript API

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

যাইহোক, JSON ফরম্যাট সরাসরি উন্নত বৈশিষ্ট্য যেমন মিউটেটর বা ভ্যালিডেটরকে সংজ্ঞায়িত করতে সক্ষম নয়। এগুলি অবশ্যই জাভাস্ক্রিপ্টে লিখতে হবে, সাধারণত এক্সটেনশন হিসাবে।

Blockly-এর আসল জাভাস্ক্রিপ্ট ইমপ্লিমেন্টেশন ব্যবহার করে অ্যাপগুলি নিম্ন স্তরের Blockly API ফাংশন কলগুলিতে সরাসরি ব্লক সংজ্ঞা লিখতে পারে, নীচের বিভিন্ন জাভাস্ক্রিপ্ট উদাহরণে দেখানো হয়েছে।

JSON

Blockly.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"
}]);

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

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

init ফাংশন ব্লকের আকৃতি তৈরি করে। এই ফাংশনের পরিপ্রেক্ষিতে কীওয়ার্ড this আসল ব্লক তৈরি করা হচ্ছে।

উভয় উদাহরণ একই 'স্ট্রিং_লেংথ' ব্লক লোড করে।

ওয়েবে, JSON ফরম্যাট initJson ফাংশন ব্যবহার করে লোড করা হয়। এটি ব্লকলি ওয়েবপেজগুলিতে দুটি ফর্ম্যাট মিশ্রিত করার অনুমতি দেয়। যেখানেই সম্ভব JSON দিয়ে আপনার ব্লককে সংজ্ঞায়িত করতে পছন্দ করা হয় এবং JSON সমর্থন করে না এমন ব্লক সংজ্ঞার অংশগুলির জন্যই JavaScript ব্যবহার করুন।

নীচে একটি ব্লকের উদাহরণ দেওয়া হল যা মূলত JSON ব্যবহার করে সংজ্ঞায়িত করা হয়েছে, কিন্তু একটি গতিশীল টুলটিপ বৈশিষ্ট্যের জন্য JavaScript API ব্যবহার করে প্রসারিত করা হয়েছে।

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

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() {
    this.jsonInit(mathChangeJson);
    // 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'));
    });
  }
};

ব্লক রং

একটি ব্লকের প্রাথমিক রঙ JSON colour বৈশিষ্ট্য, block.setColour(..) ফাংশন দ্বারা বা থিম ব্যবহার করে এবং একটি ব্লক শৈলী সংজ্ঞায়িত করে।

JSON

{
  // ...,
  "colour": 160,
}

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

init: function() {
  // ...
  this.setColour(160);
}

আরো বিস্তারিত জানার জন্য ব্লক রঙ নির্দেশিকা দেখুন.

বিবৃতি সংযোগ

ব্যবহারকারীরা nextStatement এবং previousStatement সংযোগকারী ব্যবহার করে ব্লকের ক্রম তৈরি করতে পারে। ব্লকলির স্ট্যান্ডার্ড লেআউটে, এই সংযোগগুলি উপরের এবং নীচে, ব্লকগুলি উল্লম্বভাবে স্ট্যাক করা আছে।

পূর্ববর্তী সংযোগকারীর সাথে একটি ব্লকে একটি আউটপুট সংযোগকারী থাকতে পারে না এবং এর বিপরীতে। বিবৃতি ব্লক শব্দটি কোন মান আউটপুট ছাড়া একটি ব্লক বোঝায়। একটি বিবৃতি ব্লক সাধারণত পূর্ববর্তী সংযোগ এবং পরবর্তী সংযোগ উভয়ই থাকবে।

nextStatement এবং previousStatement সংযোগ টাইপ করা যেতে পারে, কিন্তু এই বৈশিষ্ট্যটি স্ট্যান্ডার্ড ব্লক দ্বারা ব্যবহার করা হয় না।

পরবর্তী সংযোগ

ব্লকের নীচে একটি বিন্দু তৈরি করে, যাতে অন্যান্য বিবৃতিগুলি এর নীচে স্ট্যাক করা যায়। একটি পরবর্তী সংযোগ সহ একটি ব্লক কিন্তু কোনো পূর্ববর্তী সংযোগ সাধারণত একটি ইভেন্টকে উপস্থাপন করে না এবং একটি টুপি দিয়ে রেন্ডার করার জন্য কনফিগার করা যেতে পারে।

JSON

টাইপ করা হয়নি:

{
  ...,
  "nextStatement": null,
}

টাইপ করা ( বিরল ):

{
  "nextStatement": "Action",
  ...
}

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

টাইপ করা হয়নি:

this.setNextStatement(true);  // false implies no next connector, the default

টাইপ করা (বিরল):

this.setNextStatement(true, 'Action');

পূর্ববর্তী সংযোগ

ব্লকের শীর্ষে একটি খাঁজ তৈরি করে, যাতে এটি স্টেটমেন্টের স্ট্যাক হিসাবে সংযুক্ত হতে পারে।

পূর্ববর্তী সংযোগ সহ ব্লকগুলির একটি আউটপুট সংযোগ থাকতে পারে না।

JSON

টাইপ করা হয়নি:

{
  ...,
  "previousStatement": null,
}

টাইপ করা ( বিরল ):

{
  "previousStatement": "Action",
  ...
}

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

টাইপ করা হয়নি:

this.setPreviousStatement(true);  // false implies no previous connector, the default

টাইপ করা (বিরল):

this.setPreviousStatement(true, 'Action');

ব্লক আউটপুট

একটি ব্লকের একটি একক আউটপুট থাকতে পারে, যা অগ্রণী প্রান্তে একটি পুরুষ জিগস সংযোগকারী হিসাবে উপস্থাপিত হয়। আউটপুট মান ইনপুট সংযোগ. আউটপুট সহ ব্লকগুলিকে সাধারণত মান ব্লক বলা হয়।

JSON

টাইপ করা হয়নি:

{
  // ...,
  "output": null,
}

টাইপ করা:

{
  // ...,
  "output": "Number",
}

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

টাইপ করা হয়নি:

init: function() {
  // ...
  this.setOutput(true);
}

টাইপ করা:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

একটি আউটপুট সংযোগকারী সহ ব্লকগুলিতে পূর্ববর্তী বিবৃতি খাঁজ থাকতে পারে না।

ইনপুট ব্লক করুন

একটি ব্লকে এক বা একাধিক ইনপুট থাকে, যেখানে প্রতিটি ইনপুট ক্ষেত্রগুলির একটি ক্রম থাকে এবং একটি সংযোগে শেষ হতে পারে। বিল্ট ইন ইনপুট বিভিন্ন ধরনের আছে.

মান ইনপুট : একটি মান ব্লকের একটি আউটপুট সংযোগের সাথে সংযোগ করে। একটি math_arithmetic ব্লক (সংযোজন, বিয়োগ) হল দুটি মান ইনপুট সহ একটি ব্লকের উদাহরণ।
বিবৃতি ইনপুট : একটি বিবৃতি ব্লকের পূর্ববর্তী সংযোগের সাথে সংযোগ করে। একটি while লুপের নেস্টেড বিভাগটি একটি স্টেটমেন্ট ইনপুটের একটি উদাহরণ।
ডামি ইনপুট : একটি ব্লক সংযোগ নেই. বাহ্যিক মান ইনপুট ব্যবহার করার জন্য ব্লকটি কনফিগার করা হলে একটি নতুন লাইনের মতো কাজ করে।
শেষ-সারি ইনপুট : একটি ব্লক সংযোগ নেই, এবং সর্বদা একটি নতুন লাইনের মত কাজ করে।

কাস্টম রেন্ডারিং সমর্থন করার জন্য আপনি একটি কাস্টম ইনপুটও তৈরি করতে পারেন।

JSON ফরম্যাট এবং JavaScript API তাদের ইনপুট বর্ণনা করতে সামান্য ভিন্ন মডেল ব্যবহার করে।

JSON-এ ইনপুট এবং ক্ষেত্র

JSON সংজ্ঞায়িত ব্লকগুলি ইন্টারপোলেটেড মেসেজ স্ট্রিং ( message0 , message1 , ...) এর একটি ক্রম হিসাবে গঠন করা হয়, যেখানে প্রতিটি ইন্টারপোলেশন টোকেন ( %1 , %2 , ...) একটি ক্ষেত্র বা একটি ইনপুট শেষ (এভাবে যেখানে ইনপুট সংযোগকারী রেন্ডার করে, মেসেজের মধ্যে) মিলে যাওয়া JSON argsN অ্যারেতে। এই বিন্যাস আন্তর্জাতিকীকরণ সহজ করার উদ্দেশ্যে করা হয়েছে.

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

ইন্টারপোলেশন টোকেনগুলি অবশ্যই args0 অ্যারের সাথে সম্পূর্ণ মেলে: কোন সদৃশ, কোন বাদ যাবে না। টোকেন যেকোনো ক্রমে উপস্থিত হতে পারে, যা বিভিন্ন ভাষাকে ব্লকের লেআউট পরিবর্তন করতে দেয়।

একটি ইন্টারপোলেশন টোকেনের উভয় পাশের পাঠ্য হোয়াইটস্পেস-ছাঁটা। % অক্ষর ব্যবহার করে পাঠ্য (যেমন শতাংশের উল্লেখ করার সময়) %% ব্যবহার করা উচিত যাতে এটি একটি ইন্টারপোলেশন টোকেন হিসাবে ব্যাখ্যা করা না হয়।

আর্গুমেন্টের ক্রম এবং আর্গুমেন্টের ধরন ব্লকের আকৃতি নির্ধারণ করে। এই স্ট্রিংগুলির একটি পরিবর্তন করা ব্লকের বিন্যাস সম্পূর্ণরূপে পরিবর্তন করতে পারে। এটি বিশেষভাবে গুরুত্বপূর্ণ যে ভাষায় ইংরেজির চেয়ে আলাদা শব্দের ক্রম আছে। একটি অনুমানমূলক ভাষা বিবেচনা করুন যেখানে "set %1 to %2" (উপরের উদাহরণে যেমন ব্যবহার করা হয়েছে) "put %2 in %1" বলার জন্য বিপরীত করতে হবে। এই একটি স্ট্রিং পরিবর্তন (এবং বাকি JSON অস্পর্শিত রেখে) নিম্নলিখিত ব্লকের ফলাফল:

ব্লকলি স্বয়ংক্রিয়ভাবে ক্ষেত্রগুলির ক্রম পরিবর্তন করেছে, একটি ডামি ইনপুট তৈরি করেছে এবং বাহ্যিক থেকে অভ্যন্তরীণ ইনপুটগুলিতে স্যুইচ করেছে৷

Blockly স্বয়ংক্রিয়ভাবে একটি শেষ-সারি ইনপুট দিয়ে বার্তা স্ট্রিং-এর যেকোনো নতুন লাইন অক্ষর ( \n ) প্রতিস্থাপন করে।

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

আর্গস

প্রতিটি বার্তা স্ট্রিং একই সংখ্যার একটি args অ্যারের সাথে জোড়া হয়। উদাহরণস্বরূপ, message0 args0 সাথে যায়। ইন্টারপোলেশন টোকেন ( %1 , %2 , ...) args অ্যারের আইটেমগুলিকে নির্দেশ করে। প্রতিটি বস্তুর একটি type স্ট্রিং আছে। বাকি প্যারামিটারগুলি প্রকারের উপর নির্ভর করে পরিবর্তিত হয়:

ক্ষেত্র :
ইনপুট :
- input_value
- input_statement
- input_dummy
- input_end_row

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

প্রতিটি বস্তুর একটি alt ক্ষেত্রও থাকতে পারে। যে ক্ষেত্রে Blockly অবজেক্টের type চিনতে পারে না, তাহলে তার জায়গায় alt অবজেক্ট ব্যবহার করা হয়। উদাহরণস্বরূপ, যদি ব্লকলিতে field_time নামে একটি নতুন ক্ষেত্র যোগ করা হয়, তাহলে এই ক্ষেত্রটি ব্যবহার করে ব্লকগুলি Blockly-এর পুরানো সংস্করণগুলির জন্য একটি field_input ফলব্যাক সংজ্ঞায়িত করতে alt ব্যবহার করতে পারে:

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

একটি alt অবজেক্টের নিজস্ব alt অবজেক্ট থাকতে পারে, এইভাবে চেইন করার অনুমতি দেয়। শেষ পর্যন্ত, যদি Blockly args0 অ্যারেতে একটি অবজেক্ট তৈরি করতে না পারে (কোনও alt অবজেক্টের চেষ্টা করার পরে) তাহলে সেই বস্তুটি কেবল বাদ দেওয়া হয়।

একটি ডামি ইনপুট স্বয়ংক্রিয়ভাবে ব্লকের শেষে যোগ করা হবে যদি message স্ট্রিং পাঠ্য বা ক্ষেত্রগুলির সাথে শেষ হয় যা একটি ইনপুট দ্বারা ধারণ করে না। এইভাবে যদি একটি ব্লকের শেষ ইনপুটটি একটি ডামি ইনপুট হয় তবে এটি args অ্যারে থেকে বাদ দেওয়া যেতে পারে এবং এটির message মধ্যে ইন্টারপোলেশনের প্রয়োজন নেই। একটি টেলিং ডামি ইনপুটের স্বয়ংক্রিয় সংযোজন অনুবাদকদের JSON-এর বাকি অংশ পরিবর্তন করার প্রয়োজন ছাড়াই message পরিবর্তন করতে দেয়। এই পৃষ্ঠায় আগে "set %1 to %2" (কোনও ডামি ইনপুট নেই) এবং "put %2 in %1" (ডামি ইনপুট যোগ করা হয়েছে) এর উদাহরণ দেখুন।

`implicitAlign0`

বিরল ক্ষেত্রে স্বয়ংক্রিয়ভাবে তৈরি ট্রেলিং ডামি ইনপুটকে "RIGHT" বা "CENTRE" -এর সাথে সারিবদ্ধ করতে হবে। নির্দিষ্ট না হলে ডিফল্ট হল "LEFT" ।

message0 এর নিচের উদাহরণে "send email to %1 subject %2 secure %3" এবং ব্লকলি স্বয়ংক্রিয়ভাবে তৃতীয় সারির জন্য একটি ডামি ইনপুট যোগ করে। implicitAlign0 তে "RIGHT" সেট করা এই সারিটিকে ডানদিকে সারিবদ্ধ হতে বাধ্য করে। এই প্রান্তিককরণটি সমস্ত ইনপুটগুলিতে প্রযোজ্য যা JSON ব্লক সংজ্ঞাতে স্পষ্টভাবে সংজ্ঞায়িত করা হয়নি, শেষ-সারি ইনপুটগুলি সহ যা বার্তায় নতুন লাইনের অক্ষরগুলি ( '\n' ) প্রতিস্থাপন করে৷ lastDummyAlign0 নামক প্রপার্টিটিও রয়েছে যা implicitAlign0 এর মতই আচরণ করে।

RTL (আরবি এবং হিব্রু) এর জন্য ব্লক ডিজাইন করার সময়, বাম এবং ডান বিপরীত হয়। এইভাবে "RIGHT" ক্ষেত্রগুলিকে বাম দিকে সারিবদ্ধ করবে।

`message1` , `args1` , `implicitAlign1`

কিছু ব্লক স্বাভাবিকভাবেই দুই বা ততোধিক পৃথক অংশে বিভক্ত। এই পুনরাবৃত্তি ব্লকটি বিবেচনা করুন যার দুটি সারি রয়েছে:

যদি এই ব্লকটি একটি একক বার্তার সাথে বর্ণনা করা হয়, তাহলে message0 বৈশিষ্ট্য হবে "repeat %1 times %2 do %3" । এই স্ট্রিংটি একজন অনুবাদকের জন্য বিশ্রী, %2 প্রতিস্থাপনের অর্থ কী তা ব্যাখ্যা করা কঠিন। %2 ডামি ইনপুট এমনকি কিছু ভাষায় কাঙ্ক্ষিত নাও হতে পারে। এবং একাধিক ব্লক থাকতে পারে যা দ্বিতীয় সারির টেক্সট শেয়ার করতে চায়। JSON-এর জন্য একাধিক বার্তা এবং args বৈশিষ্ট্য ব্যবহার করার জন্য একটি ভাল পদ্ধতি:

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

যেকোন সংখ্যক message , args , এবং implicitAlign বৈশিষ্ট্যগুলি JSON বিন্যাসে সংজ্ঞায়িত করা যেতে পারে, 0 দিয়ে শুরু করে এবং ক্রমান্বয়ে বৃদ্ধি পাচ্ছে। নোট করুন যে ব্লক ফ্যাক্টরি বার্তাগুলিকে একাধিক অংশে বিভক্ত করতে সক্ষম নয়, তবে ম্যানুয়ালি করা সহজ।

জাভাস্ক্রিপ্টে ইনপুট এবং ক্ষেত্র

JavaScript API প্রতিটি ইনপুট প্রকারের জন্য একটি append পদ্ধতি অন্তর্ভুক্ত করে:

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

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
    .setCheck('Array')
    .setAlign(Blockly.inputs.Align.RIGHT)
    .appendField('in list');
this.appendStatementInput('DO')
    .appendField('do');
this.appendDummyInput()
    .appendField('end');

প্রতিটি সংযোজন পদ্ধতি কোড জেনারেটর দ্বারা ব্যবহৃত একটি শনাক্তকারী স্ট্রিং নিতে পারে। ডামি এবং শেষ-সারি ইনপুটগুলির জন্য খুব কমই রেফারেন্সের প্রয়োজন হয় এবং শনাক্তকারী সাধারণত সেট না করে রেখে দেওয়া হয়।

JavaScript API-এ কাস্টম ইনপুট যুক্ত করার জন্য একটি জেনেরিক appendInput পদ্ধতিও রয়েছে। মনে রাখবেন এই ক্ষেত্রে, শনাক্তকারীকে সরাসরি আপনার কাস্টম ইনপুটের কনস্ট্রাক্টরের কাছে পাঠানো উচিত।

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

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

সমস্ত appendInput পদ্ধতি (উভয় জেনেরিক এবং নন-জেনারিক) ইনপুট অবজেক্ট ফিরিয়ে দেয় যাতে সেগুলিকে মেথড চেইনিং ব্যবহার করে আরও কনফিগার করা যায়। ইনপুট কনফিগার করার জন্য তিনটি বিল্ট-ইন পদ্ধতি ব্যবহার করা হয়।

`setCheck`

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

input.setCheck('Number');

এই ঐচ্ছিক ফাংশনটি সংযুক্ত ইনপুটগুলির টাইপ-পরীক্ষার জন্য ব্যবহৃত হয়। যদি null-এর একটি যুক্তি দেওয়া হয়, ডিফল্ট, তাহলে এই ইনপুটটি যেকোনো ব্লকের সাথে সংযুক্ত হতে পারে। বিস্তারিত জানার জন্য টাইপ চেক দেখুন।

`setAlign`

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

input.setAlign(Blockly.inputs.Align.RIGHT);

এই ঐচ্ছিক ফাংশনটি ক্ষেত্রগুলিকে সারিবদ্ধ করতে ব্যবহৃত হয় (নীচে দেখুন)। তিনটি স্ব-বর্ণনামূলক মান রয়েছে যা এই ফাংশনের যুক্তি হিসাবে পাস করা যেতে পারে: Blockly.inputs.Align.LEFT , Blockly.inputs.Align.RIGHT , এবং Blockly.inputs.Align.CENTER ।

RTL (আরবি এবং হিব্রু) এর জন্য ব্লক ডিজাইন করার সময়, বাম এবং ডান বিপরীত হয়। এইভাবে Blockly.inputs.Align.RIGHT ক্ষেত্রগুলিকে বাম দিকে সারিবদ্ধ করবে।

`appendField`

একবার একটি ইনপুট তৈরি হয়ে গেলে এবং appendInput সহ একটি ব্লকে যুক্ত করা হলে, কেউ ঐচ্ছিকভাবে ইনপুটে যেকোন সংখ্যক ক্ষেত্র যুক্ত করতে পারে। প্রতিটি ইনপুট কীসের জন্য তা বর্ণনা করতে এই ক্ষেত্রগুলি প্রায়শই লেবেল হিসাবে ব্যবহৃত হয়।

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

input.appendField('hello');

সহজ ক্ষেত্র উপাদান পাঠ্য. Blockly এর নিয়ম হল সঠিক নামগুলি (যেমন Google, SQL) বাদ দিয়ে সমস্ত ছোট হাতের লেখা ব্যবহার করা।

একটি ইনপুট সারিতে যেকোনো সংখ্যক ক্ষেত্রের উপাদান থাকতে পারে। একাধিক appendField কল একই ইনপুট সারিতে দক্ষতার সাথে বেশ কয়েকটি ক্ষেত্র যুক্ত করতে একসাথে চেইন করা যেতে পারে।

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

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

appendField('hello') কলটি আসলে একটি স্পষ্ট FieldLabel কনস্ট্রাক্টর ব্যবহার করার জন্য একটি শর্টকাট: appendField(new Blockly.FieldLabel('hello')) । একটি ক্লাসের নাম নির্দিষ্ট করার সময় শুধুমাত্র একজন কন্সট্রাক্টর ব্যবহার করতে চান যাতে পাঠ্যটি একটি CSS নিয়ম ব্যবহার করে স্টাইল করা যায়।

ইনলাইন বনাম বহিরাগত

ব্লক ইনপুট বাহ্যিক বা অভ্যন্তরীণ হিসাবে রেন্ডার করতে পারে।

ব্লক সংজ্ঞা একটি ঐচ্ছিক বুলিয়ান নিয়ন্ত্রন করতে পারে যে ইনপুট ইনলাইন কিনা। যদি false হয় তবে যেকোনো মান ইনপুট বাহ্যিক হবে (যেমন বাম ব্লক)। যদি true তবে যেকোনো মান ইনপুট ইনলাইন হবে (যেমন উপরের ডান ব্লক)।

JSON

{
  // ...,
  "inputsInline": true
}

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

init: function() {
  // ...
  this.setInputsInline(true);
}

যদি সংজ্ঞায়িত না করা হয় তবে কোন মোডটি সর্বোত্তম তা অনুমান করতে ব্লকলি কিছু হিউরিস্টিক ব্যবহার করবে। অনুমান করা হয় যে ব্লকলি সঠিক পছন্দ করে, এই ক্ষেত্রটিকে অনির্ধারিত রেখে দেওয়া বাঞ্ছনীয় কারণ বিভিন্ন ভাষার অনুবাদে স্বয়ংক্রিয়ভাবে বিভিন্ন মোড থাকতে পারে। এই পৃষ্ঠায় আগে "set %1 to %2" (বহিরাগত ইনপুট) এবং "put %2 in %1" (ইনলাইন ইনপুট) এর JSON উদাহরণ দেখুন।

ইনলাইন ইনপুট ব্যবহার করুন যখন একটি ব্লকে সংখ্যার মতো ছোট ইনপুট থাকার সম্ভাবনা থাকে। ব্যবহারকারী কনটেক্সট মেনুর মাধ্যমে এই বিকল্পটি টগল করতে পারে, যদি collapse কনফিগারেশন সক্ষম করা থাকে (যদি টুলবক্সে বিভাগ থাকে তবে ডিফল্ট সত্য)।

ক্ষেত্র

ক্ষেত্রগুলি একটি ব্লকের মধ্যে বেশিরভাগ UI উপাদানগুলিকে সংজ্ঞায়িত করে৷ এর মধ্যে স্ট্রিং লেবেল, ছবি এবং আক্ষরিক ডেটা যেমন স্ট্রিং এবং সংখ্যার জন্য ইনপুট অন্তর্ভুক্ত। সবচেয়ে সহজ উদাহরণ হল math_number ব্লক, যা একটি field_input ব্যবহার করে ব্যবহারকারীকে একটি সংখ্যা টাইপ করতে দেয়।

appendField ব্যবহার করে ক্ষেত্রগুলি ব্লকে যুক্ত করা হয়।

ব্লকলি টেক্সট ইনপুট, কালার পিকার এবং ছবি সহ বেশ কিছু বিল্ট-ইন ফিল্ড প্রদান করে। আপনি আপনার নিজস্ব ক্ষেত্র তৈরি করতে পারেন।

→ অন্তর্নির্মিত ক্ষেত্রগুলিতে আরও তথ্য।

→ কাস্টম ক্ষেত্র তৈরির বিষয়ে আরও তথ্য।

আইকন

আইকনগুলি ব্লকের UI উপাদানগুলিকে সংজ্ঞায়িত করে যা ব্লক সম্পর্কে "মেটা" তথ্যকে পৃষ্ঠ করে।

addIcon ব্যবহার করে ব্লকে আইকন যুক্ত করা হয়।

ব্লকলি মন্তব্য আইকন এবং সতর্কতা আইকন সহ বেশ কয়েকটি অন্তর্নির্মিত আইকন সরবরাহ করে। আপনি নিজের আইকনও তৈরি করতে পারেন।

→ কাস্টম আইকন তৈরির বিষয়ে আরও তথ্য।

টুলটিপস

যখন ব্যবহারকারী ব্লকের উপর তাদের মাউস ঘোরায় তখন টুলটিপ তাৎক্ষণিক সহায়তা প্রদান করে। টেক্সট দীর্ঘ হলে, এটি স্বয়ংক্রিয়ভাবে মোড়ানো হবে।

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

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

init: function() {
  this.setTooltip("Tooltip text.");
}

JavaScript API-এ, টুলটিপগুলিকে স্ট্যাটিক স্ট্রিংয়ের পরিবর্তে একটি ফাংশন হিসাবেও সংজ্ঞায়িত করা যেতে পারে। এটি গতিশীল সাহায্যের জন্য অনুমতি দেয়। একটি টুলটিপের উদাহরণের জন্য math_arithmetic দেখুন যা ড্রপডাউন বিকল্পটি বেছে নেওয়া হয়েছে তার উপর নির্ভর করে পরিবর্তিত হয়।

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

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

JavaScript API ব্যবহার করে, ব্লকগুলি স্ট্যাটিক স্ট্রিংয়ের পরিবর্তে একটি ফাংশন নির্দিষ্ট করতে পারে, যা একটি টুলটিপ স্ট্রিং প্রদান করে। এটি গতিশীল টুলটিপগুলির জন্য অনুমতি দেয়। একটি উদাহরণের জন্য math_arithmetic দেখুন।

কাস্টমাইজ করা

আপনি একটি কাস্টম রেন্ডারিং ফাংশন প্রদান করে আপনার টুলটিপগুলির চেহারা কাস্টমাইজ করতে পারেন। একটি ফাংশন তৈরি করুন যা দুটি পরামিতি গ্রহণ করে:

প্রথমে, একটি <div> উপাদান যেখানে আপনি বিষয়বস্তু রেন্ডার করবেন
দ্বিতীয়ত, আসল উপাদান যাকে মাউস করা হচ্ছে এবং যেটির জন্য আপনি টুলটিপ দেখাবেন

ফাংশনের বডিতে, আপনি ডিভ-এ আপনার পছন্দের বিষয়বস্তু রেন্ডার করতে পারেন। মাউস ওভার করা ব্লকে টুলটিপ স্ট্রিং সংজ্ঞায়িত করার জন্য, আপনি Blockly.Tooltip.getTooltipOfObject(element); যেখানে element উপরের দ্বিতীয় প্যারামিটার।

অবশেষে, এই ফাংশনটি নিবন্ধন করুন যাতে ব্লকলি এটিকে উপযুক্ত সময়ে কল করতে পারে:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

একটি উদাহরণের জন্য, কাস্টম টুলটিপ ডেমো দেখুন।

সাহায্য URL

ব্লক তাদের সাথে যুক্ত একটি সাহায্য পৃষ্ঠা থাকতে পারে. ব্লকে ডান-ক্লিক করে এবং প্রসঙ্গ মেনু থেকে "সহায়তা" নির্বাচন করে Blockly for Web-এর ব্যবহারকারীদের জন্য এটি উপলব্ধ। যদি এই মানটি null হয় তবে মেনুটি ধূসর হয়ে যাবে।

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

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

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

JavaScript API ব্যবহার করে, ব্লকগুলি স্ট্যাটিক স্ট্রিংয়ের পরিবর্তে একটি ফাংশন নির্দিষ্ট করতে পারে, যা একটি URL স্ট্রিং প্রদান করে, এইভাবে গতিশীল সাহায্যের জন্য অনুমতি দেয়।

শ্রোতা এবং যাচাইকারী পরিবর্তন করুন

ব্লকে শ্রোতা ফাংশন পরিবর্তন হতে পারে যা কর্মক্ষেত্রে যেকোন পরিবর্তনের জন্য বলা হয় (ব্লকের সাথে সম্পর্কিত নয় সহ)। এগুলি প্রাথমিকভাবে ব্লকের সতর্কীকরণ পাঠ্য বা ওয়ার্কস্পেসের বাইরে অনুরূপ ব্যবহারকারীর বিজ্ঞপ্তি সেট করতে ব্যবহৃত হয়।

ফাংশনটি একটি ফাংশনের সাথে setOnChange কল করে যোগ করা হয় এবং আপনি যদি সমস্ত প্ল্যাটফর্মে এটি ব্যবহার করার পরিকল্পনা করেন তবে init চলাকালীন বা JSON এক্সটেনশনের মাধ্যমে করা যেতে পারে।

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

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

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

সিস্টেমটি পরিবর্তন ইভেন্টে পাস করে ফাংশনটিকে কল করে। ফাংশনের ভিতরে, this ব্লক ইনস্ট্যান্সকে বোঝায়।

যেহেতু ফাংশনটি যেকোন পরিবর্তনের জন্য বলা হয়, যদি ব্যবহার করা হয়, তাহলে ডেভেলপারদের নিশ্চিত করা উচিত যে শ্রোতা দ্রুত চলে। ওয়ার্কস্পেসের পরিবর্তনগুলি সম্পর্কেও সতর্ক হওয়া উচিত যা শ্রোতার কাছে ক্যাসকেড বা লুপ ব্যাক করতে পারে।

উদাহরণের জন্য controls_flow_statements , logic_compare , এবং procedures_ifreturn ব্লকগুলি দেখুন।

নোট করুন যে সম্পাদনাযোগ্য ক্ষেত্রগুলিতে ইনপুট বৈধতা এবং পার্শ্ব প্রতিক্রিয়া সৃষ্টির জন্য তাদের নিজস্ব ইভেন্ট শ্রোতা রয়েছে৷

মিউটেটর

মিউটেটররা উন্নত ব্লককে আকৃতি পরিবর্তন করতে দেয়, বিশেষত ব্যবহারকারীরা উপাদান যোগ, অপসারণ বা পুনর্বিন্যাস করার জন্য একটি ডায়ালগ খোলার ফলে। mutator কী দিয়ে JSON-এর মাধ্যমে মিউটেটর যোগ করা যেতে পারে।

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

প্রতি-ব্লক কনফিগারেশন

ব্লক ইন্সট্যান্সের অনেকগুলি বৈশিষ্ট্য রয়েছে যা ব্যবহারকারীর সাথে কীভাবে আচরণ করবে তা কনফিগার করে। এগুলি ডোমেনের নির্দিষ্ট বৈশিষ্ট্যগুলিকে প্রতিফলিত করার জন্য ওয়ার্কস্পেসকে সীমাবদ্ধ করতে ব্যবহার করা যেতে পারে (যেমন, ঠিক একটি 'শুরু' ইভেন্ট আছে), বা ব্যবহারকারীর প্রচেষ্টাকে ফোকাস করতে (যেমন, একটি টিউটোরিয়াল)।

অপসারণযোগ্য অবস্থা

block.setDeletable(false);

মিথ্যাতে সেট করা হলে, ব্যবহারকারী ব্লকটি মুছতে পারবেন না। একটি সম্পাদনাযোগ্য কর্মক্ষেত্রে ডিফল্ট মুছে ফেলার জন্য ব্লক করে।

যেকোনো ব্লক, (এমনকি অপসারণযোগ্যও) প্রোগ্রামগতভাবে মুছে ফেলা হতে পারে:

block.dispose();

সম্পাদনাযোগ্য রাষ্ট্র

block.setEditable(false);

মিথ্যাতে সেট করা হলে, ব্যবহারকারী ব্লকের ক্ষেত্রগুলি (যেমন ড্রপডাউন এবং পাঠ্য ইনপুট) পরিবর্তন করতে সক্ষম হবে না। একটি সম্পাদনাযোগ্য কর্মক্ষেত্রে সম্পাদনাযোগ্য হতে ডিফল্ট ব্লক করে।

চলমান রাষ্ট্র

block.setMovable(false);

মিথ্যাতে সেট করা হলে, ব্যবহারকারী সরাসরি ব্লকটি সরাতে পারবেন না। একটি স্থাবর ব্লক যেটি অন্য ব্লকের সন্তান সেই ব্লক থেকে সংযোগ বিচ্ছিন্ন নাও হতে পারে, যদিও অভিভাবক সরানো হলে এটি তার পিতামাতার সাথে সরে যাবে। একটি সম্পাদনাযোগ্য কর্মক্ষেত্রে ডিফল্ট অস্থাবর থেকে ব্লক করে।

যেকোন ব্লক (এমনকি স্থাবরও) একবার কর্মক্ষেত্রে থাকলে প্রোগ্রাম্যাটিকভাবে সরানো যেতে পারে।

block.moveBy(dx, dy)

একটি ওয়ার্কস্পেসে ব্লকের শুরুর অবস্থান ডিফল্ট (0, 0)।

ডেটা ব্লক করুন

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

ডেটা হল একটি ঐচ্ছিক এবং নির্বিচারে স্ট্রিং যা ব্লকের সাথে সংযুক্ত। যখন ব্লকটি সিরিয়াল করা হয় তখন ডেটা স্ট্রিংটি এটির সাথে সিরিয়াল করা হয়। ব্লকটি সদৃশ বা অনুলিপি/পেস্ট করার সময় এটি অন্তর্ভুক্ত।

প্রায়শই এটি একটি বহিরাগত সম্পদের সাথে একটি ব্লক যুক্ত করতে ব্যবহৃত হয়।

যখন JSON-তে সিরিয়ালাইজ করা হয়, তখন ডেটা ব্লকে একটি শীর্ষ-স্তরের সম্পত্তি হিসাবে সংরক্ষণ করা হয়:

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

যখন XML (পুরানো আইসবক্সযুক্ত সিরিয়ালাইজেশন সিস্টেম) ক্রমিক করা হয় তখন ব্লকের মধ্যে একটি <data></data> ট্যাগে ডেটা স্ট্রিং সংরক্ষণ করা হয়:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

ধ্বংস

ব্লকগুলির একটি destroy হুক থাকে, যাকে বলা হয় যখন তারা কর্মক্ষেত্র থেকে মুছে ফেলা হয়। এটি ব্লকের সাথে যুক্ত যেকোন ব্যাকিং ডেটা মডেল/বাহ্যিক সংস্থানগুলি ধ্বংস করতে ব্যবহার করা যেতে পারে যা আর প্রয়োজন নেই।

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

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

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

ব্লকের পিতামাতার নিষ্পত্তি করার পরে destroy পদ্ধতি বলা হয়, কিন্তু তার কোনো সন্তান বা ক্ষেত্র নিষ্পত্তি করার আগে।

প্রসঙ্গ মেনু

ডিফল্টরূপে, ব্লকগুলির একটি রাইট-ক্লিক প্রসঙ্গ মেনু থাকে যা ব্যবহারকারীদের মন্তব্য যোগ করার মতো জিনিসগুলি করতে বা নকল ব্লকগুলি করতে দেয়৷

আপনি এটি করে একটি পৃথক ব্লকের প্রসঙ্গ মেনু নিষ্ক্রিয় করতে পারেন:

block.contextMenu = false;

আপনি মেনুতে দেখানো বিকল্পগুলিও কাস্টমাইজ করতে পারেন। সমস্ত ব্লকের জন্য মেনু কাস্টমাইজ করতে, প্রসঙ্গ মেনু ডকুমেন্টেশন পড়ুন। একটি পৃথক ব্লকের জন্য মেনু কাস্টমাইজ করতে, আপনি customContextMenu প্রয়োগ করতে পারেন। এই ফাংশনটি মেনু বিকল্পগুলির একটি অ্যারে নিয়ে যায় এবং এটিকে জায়গায় পরিবর্তন করে, যার অর্থ আপনি আইটেমগুলি যোগ এবং অপসারণ করতে পারেন।

প্রতিটি মেনু বিকল্প তিনটি বৈশিষ্ট্য সহ একটি বস্তু:

text হল ডিসপ্লে টেক্সট।
enabled একটি বুলিয়ান। অক্ষম করা হলে, বিকল্পটি দেখানো হয় তবে ধূসর পাঠ্য সহ।
callback হল বিকল্পটি ক্লিক করার সময় কল করা ফাংশন।

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

JSON বিন্যাস বনাম JavaScript API

JSON

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

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

ব্লক রং

JSON

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

বিবৃতি সংযোগ

পরবর্তী সংযোগ

JSON

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

পূর্ববর্তী সংযোগ

JSON

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

ব্লক আউটপুট

JSON

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

ইনপুট ব্লক করুন

JSON-এ ইনপুট এবং ক্ষেত্র

JSON

JSON

আর্গস

JSON

implicitAlign0

message1 , args1 , implicitAlign1

JSON

জাভাস্ক্রিপ্টে ইনপুট এবং ক্ষেত্র

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

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

setCheck

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

setAlign

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

appendField

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

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

ইনলাইন বনাম বহিরাগত

JSON

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

ক্ষেত্র

আইকন

টুলটিপস

JSON

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

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

কাস্টমাইজ করা

সাহায্য URL

JSON

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

শ্রোতা এবং যাচাইকারী পরিবর্তন করুন

JSON

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

মিউটেটর

JSON

প্রতি-ব্লক কনফিগারেশন

অপসারণযোগ্য অবস্থা

সম্পাদনাযোগ্য রাষ্ট্র

চলমান রাষ্ট্র

ডেটা ব্লক করুন

ধ্বংস

JSON

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

প্রসঙ্গ মেনু

`implicitAlign0`

`message1` , `args1` , `implicitAlign1`

`setCheck`

`setAlign`

`appendField`