הגדרת בלוקים

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

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

פורמט JSON לעומת JavaScript API

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

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

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

JSON

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

הפונקציה init יוצרת את הצורה של הבלוק. בהקשר של הפונקציה הזו, מילת המפתח this היא החסימה שנוצרת בפועל.

בשתי הדוגמאות האלה טענו את אותו בלוק 'string_length'.

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

לפניכם דוגמה לבלוק שמוגדר בעיקר באמצעות JSON, אבל מורחב באמצעות API של JavaScript כדי להציג הסבר קצר דינמי.

JavaScript

var mathChangeJson = {
  "message0": "change %1 by %2",
  "args0": [
    {"type": "field_variable", "name": "VAR", "variable": "item", "variableTypes": [""]},
    {"type": "input_value", "name": "DELTA", "check": "Number"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 230
};

Blockly.Blocks['math_change'] = {
  init: function() {
    this.jsonInit(mathChangeJson);
    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      return 'Add a number to variable "%1".'.replace('%1',
          thisBlock.getFieldValue('VAR'));
    });
  }
};

צבע הבלוק

הצבע הראשי של בלוק מוגדר באמצעות המאפיין colour של JSON, הפונקציה block.setColour(..) או באמצעות עיצובים והגדרת סגנון בלוקים.

JSON

{
  // ...,
  "colour": 160,
}

JavaScript

init: function() {
  // ...
  this.setColour(160);
}

לפרטים נוספים, ראו מדריך לצבעים של בלוקים.

חיבורים של דף חשבון

המשתמשים יכולים ליצור רצפים של בלוקים באמצעות המחברים nextStatement ו-previousStatement. בפריסה הרגילה של blockly, החיבורים האלה נמצאים למעלה ולמטה, כשהבלוקים מוצבים במאונך.

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

אפשר להקליד את החיבורים nextStatement ו-previousStatement, אבל בלוקים רגילים לא משתמשים בתכונה הזו.

החיבור הבא

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

JSON

ללא הקלדה:

{
  ...,
  "nextStatement": null,
}

מוקלד (נדיר):

{
  "nextStatement": "Action",
  ...
}

JavaScript

ללא הקלדה:

this.setNextStatement(true);  // false implies no next connector, the default

מוקלד (נדיר):

this.setNextStatement(true, 'Action');

החיבור הקודם

יוצרת חריצה בחלק העליון של הבלוק, כדי שאפשר יהיה לחבר אותו כמקבץ של הצהרות.

בלוקים עם חיבור קודם לא יכולים להיות מחוברים כפלט.

JSON

ללא הקלדה:

{
  ...,
  "previousStatement": null,
}

מוקלד (נדיר):

{
  "previousStatement": "Action",
  ...
}

JavaScript

ללא הקלדה:

this.setPreviousStatement(true);  // false implies no previous connector, the default

מוקלד (נדיר):

this.setPreviousStatement(true, 'Action');

חסימת פלט

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

JSON

ללא הקלדה:

{
  // ...,
  "output": null,
}

הוקלד:

{
  // ...,
  "output": "Number",
}

JavaScript

ללא הקלדה:

init: function() {
  // ...
  this.setOutput(true);
}

הוקלד:

init: function() {
  // ...
  this.setOutput(true, 'Number');
}

בלוקים עם מחבר פלט לא יכולים לכלול גם פקודת הצהרה קודמת.

חסימת שיטות קלט

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

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

אפשר גם ליצור קלט מותאם אישית כדי לתמוך בעיבוד בהתאמה אישית.

המודלים של JavaScript ו-JavaScript API שונים מעט כדי לתאר את מקורות הקלט שלהם.

קלט ושדות ב-JSON

בלוקים שמוגדרים ל-JSON בנויים כרצף של מחרוזות הודעות שעברו אינטרפולציה ( message0, message1, ...), כאשר כל אסימון אינטרפולציה (%1, %2, ...) הוא שדה או קצה של קלט (וכך מעבד מחבר הקלט, בתוך ההודעה) במערך ה-argsN התואם של JSON. הפורמט הזה נועד להקל על הלוקליזציה.

JSON

{
  "message0": "set %1 to %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

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

הטקסט בכל צד של אסימון אינטרפולציה נחתך ברווחים. טקסט שמכיל את התו % (למשל, בהתייחס לאחוז) צריך לכלול את %%, כדי שהוא לא יפורש כאסימון אינטרפולציה.

הסדר של הארגומנטים וסוגי הארגומנטים מגדירים את צורת הבלוק. שינוי של אחת מהמחרוזות האלה יכול לשנות לחלוטין את הפריסה של הבלוק. הדבר חשוב במיוחד בשפות עם סדר מילים שונה מאנגלית. חשבו על שפה היפותטית שבה צריך להפוך את "set %1 to %2" (כפי ששימש בדוגמה שלמעלה) כדי לומר "put %2 in %1". אם משנים את המחרוזת האחת הזו (ומשאירים את שאר קובצי ה-JSON ללא שינוי), הם יופיעו בבלוק הבא:

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

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

JSON

{
  "message0": "set %1\nto %2",
  "args0": [
    {
      "type": "field_variable",
      "name": "VAR",
      "variable": "item",
      "variableTypes": [""]
    },
    {
      "type": "input_value",
      "name": "VALUE"
    }
  ]
}

ארגומנטים

כל מחרוזת הודעה מותאמת למערך args של אותו מספר. לדוגמה, message0 מתאים ל-args0. אסימוני האינטרפולציה (%1, %2, ...) מתייחסים לפריטים במערך args. לכל אובייקט יש מחרוזת type. שאר הפרמטרים משתנים בהתאם לסוג:

• שדות:
  • field_input
  • field_dropdown
  • field_checkbox
  • field_colour
  • field_number
  • field_angle
  • field_variable
  • field_label
  • field_image.
• שיטות קלט:
  • input_value
  • input_statement
  • input_dummy
  • input_end_row

תוכלו גם להגדיר שדות מותאמים אישית וקלט מותאם אישית ולהעביר אותם כארגומנטים.

כל אובייקט יכול להכיל גם שדה alt. אם מערכת blockly לא מזהה את type של האובייקט, ייעשה שימוש באובייקט alt במקומו. לדוגמה, אם שדה חדש בשם field_time נוסף ל-Blockly, בלוקים שמשתמשים בשדה הזה יכולים להשתמש ב-alt כדי להגדיר חלופה ל-field_input לגרסאות ישנות יותר של חסימת:

JSON

{
  "message0": "sound alarm at %1",
  "args0": [
    {
      "type": "field_time",
      "name": "TEMPO",
      "hour": 9,
      "minutes": 0,
      "alt":
        {
          "type": "field_input",
          "name": "TEMPOTEXT",
          "text": "9:00"
        }
    }
  ]
}

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

קלט דמה יתווסף אוטומטית לסוף הבלוק אם מחרוזת message מסתיימת בטקסט או בשדות שלא נכללים בקלט. לכן, אם הקלט האחרון בבלוק הוא קלט דמה, ייתכן שהוא יושמט מהמערך args ולא צריך אינטרפולציה ל-message. ההוספה האוטומטית של קלט דמה מתואם מאפשרת למתרגמים לשנות את message בלי שיצטרכו לשנות את שאר ה-JSON. ניתן לעיין בדוגמה של "set %1 to %2" (ללא קלט דמה) ו-"put %2 in %1" (נוסף קלט דמה) מוקדם יותר בדף הזה.

implicitAlign0

במקרים נדירים, צריך ליישר את קלט הדמה הסופי שנוצר באופן אוטומטי ל-"RIGHT" או ל-"CENTRE". אם לא מציינים את הפרמטר ברירת המחדל, ברירת המחדל היא "LEFT".

בדוגמה שלמטה, message0 הוא "send email to %1 subject %2 secure %3", ו-Blockly מוסיף באופן אוטומטי קלט דמה לשורה השלישית. אם קובעים במדיניות implicitAlign0 את הערך "RIGHT", אילוץ היישור של השורה הזו הוא לימין. ההתאמה הזו חלה על כל ערכי הקלט שלא מוגדרים במפורש בהגדרה של בלוק JSON, כולל קלט מהשורה האחרונה שמחליף תווים של שורה חדשה ('\n') בהודעה. יש גם את המאפיין lastDummyAlign0 שהוצא משימוש באותה התנהגות כמו implicitAlign0.

בעת תכנון בלוקים מימין לשמאל (ערבית ועברית), הכיוון השמאלי והימני הם הפוכים. במצב כזה, השדות "RIGHT" יושרו לצד שמאל.

message1,‏ args1,‏ implicitAlign1

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

אם הבלוק הזה מתואר בהודעה יחידה, המאפיין message0 יהיה "repeat %1 times %2 do %3". המחרוזת הזו לא נעימה למתרגם, קשה להסביר מה המשמעות של ההחלפה של %2. יכול להיות שקלט הדמה %2 אפילו לא רצוי בשפות מסוימות. ועשויים להיות כמה בלוקים שרוצים לשתף את הטקסט של השורה השנייה. גישה טובה יותר היא שימוש ביותר ממאפיין אחד של הודעות וארגומנטים בקובץ JSON:

JSON

{
  "type": "controls_repeat_ext",
  "message0": "repeat %1 times",
  "args0": [
    {"type": "input_value", "name": "TIMES", "check": "Number"}
  ],
  "message1": "do %1",
  "args1": [
    {"type": "input_statement", "name": "DO"}
  ],
  "previousStatement": null,
  "nextStatement": null,
  "colour": 120
}

ניתן להגדיר כל מספר של מאפיינים של message, של args ו-implicitAlign בפורמט JSON, שמתחיל ב-0 ומצטבר ברצף. חשוב לזכור שב-Block Factory אי אפשר לפצל הודעות לחלקים מרובים, אבל ניתן לעשות זאת באופן ידני.

קלט ושדות ב-JavaScript

JavaScript API כולל שיטת append לכל סוג קלט:

JavaScript

this.appendEndRowInput()
    .appendField('for each')
    .appendField('item')
    .appendField(new Blockly.FieldVariable());
this.appendValueInput('LIST')
    .setCheck('Array')
    .setAlign(Blockly.inputs.Align.RIGHT)
    .appendField('in list');
this.appendStatementInput('DO')
    .appendField('do');
this.appendDummyInput()
    .appendField('end');

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

ב-JavaScript API יש גם שיטת appendInput כללית לצירוף קלט מותאם אישית. שימו לב שבמקרה הזה, צריך להעביר את המזהה ישירות לבנאי הקלט המותאם אישית.

JavaScript

this.appendInput(new MyCustomInput('INPUT_NAME'))
    .appendField('an example label')

כל השיטות של appendInput (גנריות וגם לא גנריות) מחזירות את אובייקט הקלט, כך שאפשר יהיה להגדיר אותן בצורה מפורטת יותר באמצעות שרשור שיטות. יש שלוש שיטות מובנות שמשמשות להגדרת קלט.

setCheck

JavaScript

input.setCheck('Number');

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

setAlign

JavaScript

input.setAlign(Blockly.inputs.Align.RIGHT);

הפונקציה האופציונלית הזו משמשת ליישור השדות (ראו בהמשך). יש שלושה ערכים של תיאור עצמי שניתן להעביר כארגומנט לפונקציה הזו: Blockly.inputs.Align.LEFT, Blockly.inputs.Align.RIGHT ו-Blockly.inputs.Align.CENTER.

בעת תכנון בלוקים מימין לשמאל (ערבית ועברית), הכיוון השמאלי והימני הם הפוכים. במצב כזה, השדות Blockly.inputs.Align.RIGHT יושרו לצד שמאל.

appendField

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

JavaScript

input.appendField('hello');

רכיב השדה הפשוט ביותר הוא טקסט. המוסכמה של blockly היא להשתמש באותיות קטנות בלבד, מלבד שמות עצם פרטיים (למשל Google, SQL).

שורת קלט יכולה להכיל כל מספר של רכיבי שדה. אפשר לשרשר כמה קריאות appendField יחד כדי להוסיף ביעילות כמה שדות לאותה שורת קלט.

JavaScript

input.appendField('hello')
     .appendField(new Blockly.FieldLabel('Neil', 'person'));

הקריאה appendField('hello') היא למעשה קיצור דרך לשימוש בבנאי FieldLabel מפורש: appendField(new Blockly.FieldLabel('hello')). הפעם היחידה שבה רוצים להשתמש ב-constructor היא כשמציינים שם של מחלקה כדי שניתן יהיה לסגנן את הטקסט באמצעות כלל CSS.

בתוך שורה לעומת חיצונית

קלט מסוג בלוק יכול להופיע כחיצוני או כפנימי.

הגדרת החסימה יכולה לציין ערך בוליאני אופציונלי, שקובע אם הקלט הוא בתוך השורה. אם הערך הוא false, כל ערכי הקלט יהיו חיצוניים (כמו הבלוק השמאלי). אם הערך הוא true, ערכי הקלט יהיו בתוך השורה (כמו הבלוק הימני שלמעלה).

JSON

{
  // ...,
  "inputsInline": true
}

JavaScript

init: function() {
  // ...
  this.setInputsInline(true);
}

אם המדיניות לא מוגדרת, חסימת שימוש ב-Blockly תשתמש בכמה שיטות כדי לנחש איזה מצב הוא הטוב ביותר. בהנחה ש-Blockly עושה את הבחירה הנכונה, עדיף להשאיר את השדה הזה לא מוגדר, כי לתרגומים לשפות שונות יכולים להיות באופן אוטומטי מצבים שונים. ניתן לעיין בדוגמה ל-JSON של "set %1 to %2" (קלט חיצוני) ו-"put %2 in %1" (קלט מוטבע) מוקדם יותר בדף הזה.

יש להשתמש בערכי קלט מוטבעים כשיש סבירות גבוהה שבלוק מסוים יכלול קלט קטן כמו מספרים. המשתמשים יכולים להחליף את המצב של האפשרות הזו דרך תפריט ההקשר, אם ההגדרה collapse מופעלת (ברירת המחדל היא True אם בארגז הכלים יש קטגוריות).

שדות

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

השדות מתווספים לבלוק באמצעות appendField.

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

← מידע נוסף על שדות מובנים.

← מידע נוסף על יצירת שדות מותאמים אישית.

סמלים

סמלים מגדירים רכיבי ממשק משתמש בבלוק שמציגים מידע 'מטא' לגבי הבלוק.

סמלים נוספים לבלוק באמצעות addIcon.

ב-Blockly יש כמה סמלים מובנים, כולל סמלי תגובות וסמלי אזהרה. תוכלו גם ליצור סמלים משלכם.

← מידע נוסף על יצירת סמלים מותאמים אישית.

תיאורי כלים

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

JSON

{
  // ...,
  "tooltip": "Tooltip text."
}

JavaScript

init: function() {
  this.setTooltip("Tooltip text.");
}

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

JavaScript

Blockly.Blocks['math_arithmetic'] = {
  init: function() {
    // ...

    // Assign 'this' to a variable for use in the tooltip closure below.
    var thisBlock = this;
    this.setTooltip(function() {
      var mode = thisBlock.getFieldValue('OP');
      var TOOLTIPS = {
        'ADD': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_ADD,
        'MINUS': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MINUS,
        'MULTIPLY': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_MULTIPLY,
        'DIVIDE': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_DIVIDE,
        'POWER': Blockly.Msg.MATH_ARITHMETIC_TOOLTIP_POWER
      };
      return TOOLTIPS[mode];
    });
  }
};

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

התאמה אישית

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

• תחילה רכיב <div> שבו יתבצע עיבוד התוכן
• השנייה, הרכיב שעליו מעבירים את העכבר בפועל ויוצגו לכם ההסבר הקצר

בגוף הפונקציה אפשר לעבד כל תוכן שרוצים ב-div. כדי לקבל את מחרוזת ההסבר הקצר בבלוק שמעבירים מעליו את העכבר, אפשר לקרוא ל-Blockly.Tooltip.getTooltipOfObject(element); כאשר element הוא הפרמטר השני שלמעלה.

לבסוף, רשמו את הפונקציה הזו כדי ש-Blockly יוכל לקרוא לה בזמן המתאים:

Blockly.Tooltip.setCustomTooltip(yourFnHere);

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

כתובת URL לעזרה

לחסימות אפשר לשייך דף עזרה. כדי לעשות את זה, הם יכולים ללחוץ לחיצה ימנית על הבלוק ולבחור Help (עזרה) בתפריט ההקשר. אם הערך הוא null, התפריט יופיע באפור.

JSON

{
  // ...,
  "helpUrl": "https://en.wikipedia.org/wiki/For_loop"
}

JavaScript

init: function() {
  // ...
  this.setHelpUrl('https://en.wikipedia.org/wiki/For_loop');
}

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

שינוי מאזינים ומאמתים

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

הוספת הפונקציה על ידי קריאה ל-setOnChange באמצעות פונקציה, ואפשר לבצע אותה תוך כדי ההפעלה או באמצעות תוסף JSON אם מתכננים להשתמש בה בכל הפלטפורמות.

JSON

{
  // ...,
  "extensions":["warning_on_change"],
}

Blockly.Extensions.register('warning_on_change', function() {
  // Example validation upon block change:
  this.setOnChange(function(changeEvent) {
    if (this.getInput('NUM').connection.targetBlock()) {
      this.setWarningText(null);
    } else {
      this.setWarningText('Must have an input block.');
    }
  });
});

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.setOnChange(function(changeEvent) {
      if (this.getInput('NUM').connection.targetBlock()) {
        this.setWarningText(null);
      } else {
        this.setWarningText('Must have an input block.');
      }
    });
  }
}

המערכת מפעילה את הפונקציה ומעבירה את האירוע change. בתוך הפונקציה, הערך this מתייחס למופע הבלוק.

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

תוכלו למצוא דוגמאות בבלוקים controls_flow_statements, logic_compare ו-procedures_ifreturn.

שימו לב שלשדות הניתנים לעריכה יש פונקציות event listener משלהם לצורך אימות הקלט, שגורמות לתופעות לוואי.

מוטציה

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

JSON

{
  // ...,
  "mutator":"if_else_mutator"
}

הערה: לרשותכם מידע נוסף על יצירת מוטטורים.

הגדרות אישיות לכל בלוק

למכונות חסימה יש מספר מאפיינים שמגדירים את ההתנהגות שלהן מול המשתמש. אפשר להשתמש בהם כדי להגביל את סביבת העבודה כך שתשקף מאפיינים מסוימים של הדומיין (למשל, יש רק אירוע 'התחלה' אחד), או למקד את המאמץ של המשתמש (למשל, מדריך).

מצב שניתן למחיקה

block.setDeletable(false);

אם המדיניות מוגדרת כ-False, המשתמש לא יוכל למחוק את החסימה. היא חוסמת כברירת מחדל מחיקה בסביבת עבודה שניתנת לעריכה.

ניתן למחוק באופן פרוגרמטי כל בלוק (גם בלוקים שלא ניתנים למחיקה):

block.dispose();

מצב שניתן לערוך

block.setEditable(false);

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

מצב ניתן להזזה

block.setMovable(false);

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

אפשר להעביר באופן פרוגרמטי כל בלוק (גם נדל"ן) כשהוא בסביבת עבודה.

block.moveBy(dx, dy)

ברירת המחדל של מיקום ההתחלה של חסימה בסביבת עבודה היא (0, 0).

חסימת נתונים

this.data = '16dcb3a4-bd39-11e4-8dfc-aa07a5b093db';

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

לעתים קרובות הוא משמש לשיוך חסימה למשאב חיצוני.

כשהם סריאליים ל-JSON, הנתונים מאוחסנים כנכס ברמה עליונה בבלוק:

{
  "type": "my_block",
  "data": "16dcb3a4-bd39-11e4-8dfc-aa07a5b093db",
  // etc..
}

מחרוזת הנתונים מאוחסנת בתג <data></data> בתוך הבלוק, כשהיא מבצעת סריאליזציה ל-XML (המערכת הישנה של סריאליזציה עם ארגז קרח:

<block type="my_block">
  <data>16dcb3a4-bd39-11e4-8dfc-aa07a5b093db</data>
  <!-- etc... -->
</block>

הרס

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

JSON

{
  // ...,
  "extensions":["destroy"],
}

Blockly.Extensions.registerMixin('destroy', {
  destroy: function() {
    this.myResource.dispose();
  }
});

JavaScript

Blockly.Blocks['block_type'] = {
  destroy: function() {
    this.myResource.dispose();
  }
}

מתבצעת קריאה ל-method destroy אחרי שההורה של הבלוק נמחק, אבל לפני שהצאצאים או השדות של הבלוקים הוסרו.

תפריטי הקשר

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

אפשר להשבית את תפריט ההקשר של חסימה ספציפית על ידי ביצוע של הפעולות הבאות:

block.contextMenu = false;

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

כל אפשרות בתפריט היא אובייקט עם שלושה מאפיינים:

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