הוספת בלוקים בהתאמה אישית

למרות ש-Blockly מגדיר כמה בלוקים סטנדרטיים, רוב האפליקציות צריכות להגדיר ולהטמיע לפחות כמה בלוקים רלוונטיים של דומיין.

בלוקים מורכבים משלושה רכיבים:

  • אובייקט הגדרת בלוק: מגדיר את המראה וההתנהגות של בלוק, כולל הטקסט, הצבע, השדות והחיבורים.
  • הפניה לארגז כלים: הפניה לסוג הבלוק ב-XML של ארגז הכלים, כך שמשתמשים יכולים להוסיף אותו לסביבת העבודה.
  • פונקציית מחולל: יוצרת את מחרוזת הקוד של הבלוק הזה. זה תמיד כתובים ב-JavaScript, גם אם שפת היעד אינה JavaScript.

חסימת הגדרה

חסימה לטעינת בלוקים באינטרנט דרך קובצי סקריפטים. בספרייה blocks/ יש כמה דוגמאות כאלה לבלוק הסטנדרטי. אם הבלוק לא מתאים לאחת מהקטגוריות הקיימות, יוצרים קובץ JavaScript חדש. החדש הזה צריך לכלול את קובץ ה-JavaScript ברשימה של תגי <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"
    });
  }
};

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: הפונקציה הזו מגדירה את העיצוב והסגנון של הבלוק.

זה מגדיר את הבלוק הבא:

בלוק &#39;string_length&#39;.

ניתן למצוא את הפרטים של הגדרות הבלוקים ב: הגדרת בלוקים

מערך 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 שלמעלה) למחרוזות קוד, ואז מחבר אותן לביטוי גדול יותר.

← מידע נוסף על מחוללי קוד בלוקים…