סקר מחקר: נשמח לשמוע על החוויה שלך עם Blockly

דף זה תורגם על ידי Cloud Translation API.

הגדרת בלוקים

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

פורמט 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. כך ניתן גם לשלב בין שני הפורמטים בדפים מסוג Blockly. זה כן להגדיר את הבלוק שלך באמצעות 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 יכולים להיות typed, אבל התכונה הזו לא נמצאת בשימוש בבלוקים רגילים.

החיבור הבא

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

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 (חיבור, חיסור) הוא דוגמה לבלוק עם שני ערכי קלט.
קלט של הצהרה: מתחבר אל החיבור הקודם של בלוק דפי חשבון. קטע בתוך קטע בלולאת @ הוא דוגמה לקלט של הצהרה.
קלט דמה: למכשיר אין חיבור בלוקים. פועלת כמו שורה חדשה כאשר הבלוק מוגדר לשימוש בקלט ערכים חיצוניים.
קלט מהשורה האחרונה: אין חיבור לבלוקים, והוא תמיד פועל כמו שורה חדשה.

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

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

קלט ושדות ב-JSON

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

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 ללא שינוי) בבלוק הבא:

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

Blockly גם מחליף באופן אוטומטי כל תו בשורה חדשה (\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. שאר הפרמטרים משתנים בהתאם לסוג:

שדות:
שיטות קלט:
- input_value
- input_statement
- input_dummy
- input_end_row

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

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

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.

כשמתכננים בלוקים של RTL (בערבית ובעברית), ימין ושמאל הפוכים. לכן, "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 סוכמו של היצרן לא מסוגל לפצל הודעות למספר חלקים, אבל אפשר לעשות זאת באופן ידני בקלות.

קלט ושדות ב-JavaScript

JavaScript API כולל method 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 גנרית להוספה קלט מותאם אישית. שימו לב שבמקרה הזה, המזהה יועברו ישירות ל-constructor של הקלט המותאם אישית.

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.

כשמתכננים בלוקים של RTL (בערבית ובעברית), ימין ושמאל הפוכים. לכן, 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> שבו התוכן יוצג
שנית, את הרכיב בפועל שמעבירים מעליו את העכבר, ושאתם תראו ההסבר הקצר על

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

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

Blockly.Tooltip.setCustomTooltip(yourFnHere);

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

כתובת URL לעזרה

אפשר לשייך לבלוקים דף עזרה. האפשרות הזו זמינה משתמשי Blockly for Web על ידי לחיצה ימנית על החסימה ובחירה באפשרות 'עזרה' מתפריט ההקשר. אם הערך הוא null, התפריט יוצג באפור החוצה.

JSON

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

JavaScript

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

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

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

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

כדי להוסיף את הפונקציה, שולחים קריאה ל-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.');
      }
    });
  }
}

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

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

אפשר לעיין בcontrols_flow_statements, logic_compare ובprocedures_ifreturn בלוקים של דוגמאות.

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

משנה

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

JSON

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

הגדרה לכל בלוק

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

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

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

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

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

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

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

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

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

הרס

לבלוקים יש הוק (hook) 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 היא הפונקציה שצריך לקרוא אחרי שלוחצים על האפשרות.

הגדרת בלוקים

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

JSON

JavaScript

JavaScript

צבע הבלוק

JSON

JavaScript

קשרים בין דוחות

החיבור הבא

JSON

JavaScript

החיבור הקודם

JSON

JavaScript

חסימת הפלט

JSON

JavaScript

חסימת קלט

קלט ושדות ב-JSON

JSON

JSON

ארגים

JSON

implicitAlign0

message1, args1 implicitAlign1

JSON

קלט ושדות ב-JavaScript

JavaScript

JavaScript

setCheck

JavaScript

setAlign

JavaScript

appendField

JavaScript

JavaScript

פנימי לעומת חיצוני

JSON

JavaScript

שדות

סמלים

הסברים קצרים

JSON

JavaScript

JavaScript

התאמה אישית

כתובת URL לעזרה

JSON

JavaScript

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

JSON

JavaScript

משנה

JSON

הגדרה לכל בלוק

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

מצב עריכה

מצב נייד

חסימת נתונים

הרס

JSON

JavaScript

תפריטי הקשר

`implicitAlign0`

`message1`, `args1` `implicitAlign1`

`setCheck`

`setAlign`

`appendField`