জাভাস্ক্রিপ্টে ব্লক স্ট্রাকচার

এই নথিতে, আমরা আপনার ব্লকের ইনপুট এবং ক্ষেত্রগুলি (লেবেল সহ) সংজ্ঞায়িত করতে কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করব তা নিয়ে আলোচনা করব। আপনি যদি এই শর্তগুলির সাথে পরিচিত না হন তবে এগিয়ে যাওয়ার আগে একটি ব্লকের অ্যানাটমি দেখুন।

আপনি JSON-এ আপনার ইনপুট, ক্ষেত্র এবং সংযোগগুলিও সংজ্ঞায়িত করতে পারেন।

ইনপুট যোগ করুন

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

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

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

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

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

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

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

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

ক্ষেত্র যোগ করুন

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

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

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

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

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

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

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

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

সংযোগ চেক

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

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

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

ক্ষেত্রগুলি সারিবদ্ধ করুন

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

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

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

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