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

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

برای تعریف و استفاده از نوع جدیدی از بلوک، به سه چیز نیاز دارید:

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

تعریف بلوک

تعریف بلوک ظاهر و احساس یک بلوک را مانند متن، فیلدها، اتصالات و رنگ آن تعریف می کند. همچنین می‌تواند رفتار خاص بلوک، مانند کنترل‌کننده رویداد خاص بلوک را تعریف کند. به عنوان مثال، این بلوک:

را می توان در JSON یا جاوا اسکریپت به صورت زیر تعریف کرد:

JSON

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

برای اطلاعات بیشتر در مورد تعاریف بلوک و نحوه عملکرد آنها، به تعریف بلوک چیست مراجعه کنید؟ .

مولدهای بلاک کد

برای تبدیل یک بلوک به کد، به توابع مولد جداگانه برای هر زبانی که می خواهید تولید کنید نیاز دارید. به عنوان مثال، در اینجا یک ژنراتور است که جاوا اسکریپت را تولید می کند:

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

تابع مولد بلوک در حال پردازش و یک مولد زبان را می پذیرد. این کد برای هر بلوک متصل به ورودی ها (مانند ورودی VALUE در مثال) و هر فیلدی تولید می کند و سپس رشته های حاصل را در یک عبارت بزرگتر به هم متصل می کند.

برای اطلاعات بیشتر، به مولدهای Block-code مراجعه کنید.

مرجع جعبه ابزار

بعد از اینکه نوع بلوک خود را تعریف کردید، از نام نوع برای ارجاع آن در جعبه ابزار استفاده کنید:

JSON

var toolbox = {
     "kind": "categoryToolbox",
     "name": "Text"
     "contents": [
       {
         "kind": "block",
         "type": "string_length"
       },
     ]
   };

XML

<xml id="toolbox" style="display: none"> WHY IS THERE DISPLAY: NONE HERE?
   <category name="Text">
     <block type="string_length"></block>
   </category>
   ...
</xml>

برای اطلاعات بیشتر، به تعریف جعبه ابزار پرتاب یا تعریف جعبه ابزار دسته بندی مراجعه کنید.