אירועים

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

האזנה לאירועים מ-Workspace

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

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

function onFirstComment(event) {
  if (event.type == Blockly.Events.BLOCK_CHANGE &&
      event.element == 'comment' &&
      !event.oldValue && event.newValue) {
    alert('Congratulations on creating your first comment!')
    workspace.removeChangeListener(onFirstComment);
  }
}
workspace.addChangeListener(onFirstComment);

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

var flyoutWorkspace = yourWorkspace.getFlyout().getWorkspace();
flyoutWorkspace.addChangeListener(onFirstComment);

האזנה לאירועים מבלוקים

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

הפונקציה מתווספת על ידי קריאה ל-Block.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.');
      }
    });
  }
}

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

JavaScript

Blockly.Blocks['block_type'] = {
  init: function() {
    // Example validation upon block change:
    this.onchange = 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 משלהם לצורך אימות הקלט וגרימת תופעות לוואי.

סוגי אירועים

מידע על אירועים ספציפיים מופיע במאמרי העזרה.

הדגמה (דמו)

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