סקירה כללית על אבני בניין בהתאמה אישית

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

כדי להגדיר סוג חדש של בלוק ולהשתמש בו, צריך שלושה דברים:

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

הגדרת בלוק

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

אפשר להגדיר אותו ב-JSON או ב-JavaScript באופן הבא:

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

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

מידע נוסף על הגדרות של חסימה ועל אופן הפעולה שלהן זמין במאמר מהי הגדרת חסימה?

גנרטורים של קוד בבלוק

כדי להפוך בלוק לקוד, צריך פונקציות גנרטורים נפרדות לכל שפה שרוצים ליצור. לדוגמה, הנה מחולל שיוצר JavaScript:

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

מידע נוסף זמין במאמר גנרטורים של קוד בלוקים.

מסמך עזר של ארגז הכלים

אחרי שמגדירים את סוג הבלוק, משתמשים בשם הסוג כדי להפנות אליו בתיבת כלים:

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>

מידע נוסף זמין במאמרים הגדרת תיבת כלים נפתחת או הגדרת תיבת כלים של קטגוריה.