אירועים

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

האזנה לאירועים מסביבת העבודה

למרחבי עבודה יש שיטות 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);

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

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.

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

סוגי אירועים

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

הדגמה (דמו)

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