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

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

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

• אובייקט של הגדרת חסימה: מגדיר את המראה וההתנהגות של בלוק, כולל הטקסט, הצבע, השדות והחיבורים.
• הפניה לארגז כלים: הפניה לסוג הבלוק ב-XML של ארגז הכלים, שמאפשרת למשתמשים להוסיף אותו לסביבת העבודה.
• פונקציית Generator: יוצרת את מחרוזת הקוד עבור הבלוק הזה. היא תמיד נכתבת ב-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 שלמעלה) במחרוזות קוד, ואז משייכת אותם לביטוי גדול יותר.

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