কাস্টম ব্লক যোগ করুন

যদিও ব্লকলি বেশ কয়েকটি স্ট্যান্ডার্ড ব্লককে সংজ্ঞায়িত করে, বেশিরভাগ অ্যাপ্লিকেশনকে কমপক্ষে কয়েকটি ডোমেন প্রাসঙ্গিক ব্লক সংজ্ঞায়িত এবং প্রয়োগ করতে হবে।

ব্লক তিনটি উপাদান নিয়ে গঠিত:

• ব্লক সংজ্ঞা অবজেক্ট: টেক্সট, রঙ, ক্ষেত্র এবং সংযোগ সহ একটি ব্লকের চেহারা এবং আচরণ সংজ্ঞায়িত করে।
• টুলবক্স রেফারেন্স: টুলবক্স XML-এ ব্লক টাইপের একটি রেফারেন্স, যাতে ব্যবহারকারীরা এটিকে ওয়ার্কস্পেসে যোগ করতে পারেন।
• জেনারেটর ফাংশন: এই ব্লকের জন্য কোড স্ট্রিং তৈরি করে। টার্গেট ভাষা জাভাস্ক্রিপ্ট না হলেও এটি সবসময় জাভাস্ক্রিপ্টে লেখা হয়।

ব্লক সংজ্ঞা

ওয়েব লোডের জন্য ব্লকলি স্ক্রিপ্ট ফাইলের মাধ্যমে ব্লক। blocks/ ডিরেক্টরিতে স্ট্যান্ডার্ড ব্লকের জন্য এই ধরনের বেশ কয়েকটি উদাহরণ রয়েছে। আপনার ব্লক বিদ্যমান শ্রেণীবিভাগের মধ্যে মাপসই না অনুমান, একটি নতুন জাভাস্ক্রিপ্ট ফাইল তৈরি করুন. এই নতুন জাভাস্ক্রিপ্ট ফাইলটিকে সম্পাদকের HTML ফাইলে <script ...> ট্যাগের তালিকায় অন্তর্ভুক্ত করা দরকার।

দ্রষ্টব্য: নীচের কোডটি ম্যানুয়ালি তৈরি করার পরিবর্তে ব্লকলি ডেভেলপার টুলস ব্যবহার করে বেশিরভাগ ব্লককে সংজ্ঞায়িত করা যেতে পারে।

একটি সাধারণ ব্লক সংজ্ঞা এই মত দেখায়:

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "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');
  }
};

• string_length : এটি ব্লকের টাইপ নাম। যেহেতু সমস্ত ব্লক একই নেমস্পেস শেয়ার করে, তাই আপনার ব্লকের ফাংশন (এই ক্ষেত্রে length ) অনুসরণ করে আপনার বিভাগ (এই ক্ষেত্রে string ) দিয়ে তৈরি একটি নাম ব্যবহার করা ভাল।

• init : এই ফাংশনটি ব্লকের চেহারা এবং অনুভূতি নির্ধারণ করে।

এটি নিম্নলিখিত ব্লক সংজ্ঞায়িত করে:

ব্লক সংজ্ঞার বিশদ বিবরণ ব্লক সংজ্ঞায়িত এ পাওয়া যাবে।

JSON অ্যারে

JSON ব্লক সংজ্ঞাগুলির একটি অ্যারে ব্যবহার করে একাধিক ব্লক একবারে সংজ্ঞায়িত করা যেতে পারে।

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

টুলবক্স রেফারেন্স যোগ করুন

একবার সংজ্ঞায়িত হলে, টুলবক্সে ব্লক রেফারেন্স করতে টাইপ নামটি ব্যবহার করুন:

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

আরও বিস্তারিত জানার জন্য টুলবক্স গাইড দেখুন।

ব্লক-কোড জেনারেটর যোগ করুন

অবশেষে, ব্লকটিকে কোডে রূপান্তর করতে, ব্লকটিকে একটি জেনারেটর ফাংশনের সাথে যুক্ত করুন। জেনারেটরগুলি পছন্দসই আউটপুট ভাষার জন্য নির্দিষ্ট, তবে স্ট্যান্ডার্ড জেনারেটরগুলি সাধারণত নিম্নলিখিত বিন্যাস গ্রহণ করে:

javascriptGenerator.forBlock['text_length'] = function(block, generator) {
  // String or array length.
  var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Order.MEMBER];
};

জেনারেটর ফাংশন প্রক্রিয়াকরণের জন্য ব্লকের একটি রেফারেন্স নেয়। এটি কোড স্ট্রিংগুলিতে ইনপুটগুলি (উপরের VALUE ইনপুট) রেন্ডার করে এবং তারপরে সেগুলিকে একটি বৃহত্তর অভিব্যক্তিতে সংযুক্ত করে।

→ ব্লক-কোড জেনারেটর সম্পর্কে আরও তথ্য...