بلوک های سفارشی را اضافه کنید

در حالی که Blockly تعدادی بلوک استاندارد را تعریف می کند، اکثر برنامه ها نیاز به تعریف و پیاده سازی حداقل چند بلوک مربوط به دامنه دارند.

بلوک ها از سه جزء تشکیل شده اند:

  • شیء تعریف بلوک: ظاهر و رفتار یک بلوک را شامل متن، رنگ، فیلدها و اتصالات تعریف می کند.
  • مرجع جعبه ابزار: اشاره ای به نوع بلوک در جعبه ابزار XML، بنابراین کاربران می توانند آن را به فضای کاری اضافه کنند.
  • تابع Generator: رشته کد این بلوک را ایجاد می کند. همیشه با جاوا اسکریپت نوشته می شود، حتی اگر زبان مقصد جاوا اسکریپت نباشد.

تعریف بلوک

مسدود کردن برای بارگذاری وب بلوک ها از طریق فایل های اسکریپت. دایرکتوری blocks/ شامل چندین نمونه از این قبیل برای بلوک های استاندارد است. با فرض اینکه بلوک های شما در دسته بندی های موجود قرار نمی گیرند، یک فایل جاوا اسکریپت جدید ایجاد کنید. این فایل جاوا اسکریپت جدید باید در لیست تگ های <script ...> در فایل HTML ویرایشگر گنجانده شود.

یک تعریف بلوک معمولی به این صورت است:

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 : این نام نوع بلوک است. از آنجایی که همه بلوک‌ها فضای نام یکسانی دارند، خوب است از نامی استفاده کنید که از دسته شما (در این مورد string ) و به دنبال آن تابع بلوک (در این مورد length ) باشد.

  • init : این تابع ظاهر و احساس بلوک را تعریف می کند.

این بلوک زیر را تعریف می کند:

بلوک «طول_رشته».

جزئیات تعاریف بلوک را می توان در Define Blocks یافت.

آرایه 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 ، بالا) را به رشته‌های کد تبدیل می‌کند و سپس آن‌ها را به یک عبارت بزرگ‌تر متصل می‌کند.

→ اطلاعات بیشتر در مورد مولدهای کد بلوک ...