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

এই ডকুমেন্টে, আমরা আলোচনা করব কিভাবে জাভাস্ক্রিপ্ট ব্যবহার করে আপনার ব্লকের ইনপুট এবং ফিল্ড (লেবেল সহ) নির্ধারণ করা যায়। আপনি যদি এই পরিভাষাগুলোর সাথে পরিচিত না হন, তবে সামনে এগোনোর আগে ‘একটি ব্লকের গঠন’ দেখে নিন।

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

ইনপুট যুক্ত করুন

জাভাস্ক্রিপ্ট এপিআই-তে প্রতিটি ইনপুট টাইপের জন্য একটি 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 মেথড একটি আইডেন্টিফায়ার স্ট্রিং নিতে পারে, যা কোড জেনারেটরগুলো ইনপুটের সাথে সংযুক্ত ব্লকের জন্য কোড পুনরুদ্ধার করতে ব্যবহার করে। কোড জেনারেটরগুলো কদাচিৎ ডামি এবং এন্ড-অফ-রো ইনপুট রেফারেন্স করে, তাই সাধারণত সেগুলোকে একটি আইডেন্টিফায়ার অ্যাসাইন করার কোনো কারণ থাকে না।

জাভাস্ক্রিপ্ট এপিআই-তে কাস্টম ইনপুট যুক্ত করার জন্য একটি জেনেরিক appendInput মেথডও রয়েছে। মনে রাখবেন যে, এক্ষেত্রে আইডেন্টিফায়ারটি সরাসরি আপনার কাস্টম ইনপুটের কনস্ট্রাক্টরে পাস করতে হবে।

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

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

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

ক্ষেত্রগুলি যুক্ত করুন

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

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

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

সবচেয়ে সহজ ফিল্ড হলো লেবেল। ব্লক্লির নিয়ম অনুযায়ী, বিশেষ নাম (যেমন 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 ফিল্ডগুলোকে বাম দিকে সারিবদ্ধ করবে।