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

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

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

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

تعريف الحظر

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

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

يبدو تعريف الكتلة النموذجي على النحو التالي:

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

← مزيد من المعلومات حول أدوات إنشاء رموز الحظر...