إضافة قوالب مخصصة

على الرغم من أنّ Blockly تحدِّد عددًا من الكتل العادية، تحتاج معظم التطبيقات إلى تحديد وتنفيذ بضع كتل ذات صلة بنطاق معيّن على الأقل.

تتألّف القوالب من ثلاثة مكونات:

• عنصر تعريف حظر: لتحديد شكل وسلوك العنصر، بما في ذلك النص واللون والحقول والروابط.
• مرجع صندوق الأدوات: هو مرجع لنوع العنصر في ملف XML الخاص بصندوق الأدوات، حتى يتمكّن المستخدمون من إضافته إلى مساحة العمل.
• دالة المنشئ: تنشئ سلسلة الرمز لهذه الوحدة. من المهم دائمًا المكتوبة بلغة JavaScript، حتى إذا لم تكن اللغة الهدف هي JavaScript.

تعريف الحظر

يحظر عمليات التحميل على الويب حظر المحتوى عبر ملفات النصوص البرمجية. يتضمّن الدليل blocks/ العديد من الأمثلة على ذلك للوحدات العادية. افتراض أنّ الوحدات الأساسية لديك لا تتناسب مع الفئات الحالية، فأنشئ ملف JavaScript جديدًا. هذا الجديد يجب تضمين ملف JavaScript في قائمة علامات <script ...> في ملف HTML الخاص بالمحرر.

ملاحظة: يمكن تعريف معظم الكتل باستخدام أدوات مطوّري Blockly، بدلاً من إنشاء الرمز البرمجي أدناه يدويًا.

يبدو تعريف المحتوى المحظور المعتاد على النحو التالي:

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"
    });
  }
};

JavaScript

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: تحدِّد هذه الدالة مظهر الكتلة وأسلوبها.

يحدِّد هذا العنصر الكتلة التالية:

يمكن العثور على تفاصيل تعريفات الكتل في تحديد القوالب:

مصفوفة 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 أعلاه) في سلاسل رموز، ثم بتسلسلها في تعبير أكبر.

→ مزيد من المعلومات عن أدوات إنشاء الرموز البرمجية للإعلانات المعروضة على شكل مربّعات...