שדרוג שדה מותאם אישית

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

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

אזורים מסוכנים

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

Blockly.Field.register

השדות לא רשומים יותר דרך Blockly.Field.register();. יש עכשיו מרחב שמות של fieldRegistry שמטפל ברישום.

Blockly.Field.register('my_field_name', myFieldClass);

הופך:

Blockly.fieldRegistry.register('my_field_name', myFieldClass);

setText

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

CustomFields.UpgradeField.prototype.setText = function(newText) {
  // Do validation.
  if (typeof newText != 'string' || newText === this.text_) {
    return;
  }

  // Fire event.
  if (this.sourceBlock_ && Blockly.Events.isEnabled()) {
    Blockly.events.fire(new Blockly.Events.BlockChange(
        this.sourceBlock_, 'field', this.name, this.text_, newText
    ));
  }

  // Update text value.
  this.text_ = 'prefix' + newText;

  // Rerender.
  this.size_.width = 0;
};

הופך:

CustomFields.UpgradeField.prototype.doClassValidation_ = function(newValue) {
  if (typeof newValue != 'string') {
    return null;
  }
  return newValue;
};

CustomFields.UpgradeField.prototype.getText = function() {
  return  'prefix' + this.value_;
}

חסימה אוטומטית תטפל:

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

יהיה עליך לטפל ב:

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

ניתן להעברה

למידע נוסף על הנכסים EDITABLE ו-SERIALIZABLE, אפשר לבקר כאן מאפיינים שניתנים לעריכה ולסידור בסדר יורד.

CustomFields.UpgradeField.prototype.SERIALIZABLE = true;

ניתן להתעלם מהאזהרה שבהמשך, אבל אפשר לפתור אותה על ידי הגדרת SERIALIZABLE נכס:

Detected an editable field that was not serializable. Please define
SERIALIZABLE property as true on all editable custom fields. Proceeding
with serialization.

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

size_.width

this.size_.width = 0;

הופך:

this.isDirty_ = true;

אפשר להתעלם מהאזהרה שבהמשך, אבל אפשר לפתור אותה על ידי הגדרת isDirty_ במקום הנכס size_.width:

Deprecated use of setting size_.width to 0 to rerender a field. Set
field.isDirty_ to true instead.

האזהרה שלמעלה מציינת ש-Blockly זיהה שאתם משתמשים בשיטה ישנה לעיבוד מידע ונרצה להשתמש בשיטה החדשה.

למידע נוסף על הנכס isDirty_: isDirty_.

להתחיל

הפונקציה init הפכה לתבנית פונקציה כדי לצמצם כפילויות של קוד במחלקות משנה.

CustomFields.UpgradeField.prototype.init = function() {
  if (this.fieldGroup_) {
    // Already initialized once.
    return;
  }

  // Call superclass.
  CustomFields.UpgradeField.superClass_.init.call(this);

  // Create DOM elements.
  this.extraDom_ = Blockly.utils.dom.createSvgElement('image',
      {
        'height': '10px',
        'width': '10px'
      });
  this.extraDom_.setAttributeNS('http://www.w3.org/1999/xlink',
      'xlink:href', 'image.svg');
  this.extraDom_.style.cursor = 'pointer';
  this.fieldGroup_.appendChild(this.extraDom_);

  // Bind events.
  this.mouseOverWrapper_ =
    Blockly.browserEvents.bind(
        this.getClickTarget_(), 'mouseover', this, this.onMouseOver_);
  this.mouseOutWrapper_ =
    Blockly.browserEvents.bind(
        this.getClickTarget_(), 'mouseout', this, this.onMouseOut_);

  // Render.
  this.setValue(this.getValue());
};

הופך:

CustomFields.UpgradeField.prototype.initView = function() {
  CustomFields.UpgradeField.superClass_.initView.call(this);

  this.extraDom_ = Blockly.utils.dom.createSvgElement('image',
      {
        'height': '10px',
        'width': '10px'
      });
  this.extraDom_.setAttributeNS('http://www.w3.org/1999/xlink',
      'xlink:href', 'image.svg');
  this.extraDom_.style.cursor = 'pointer';
  this.fieldGroup_.appendChild(this.extraDom_);
};

CustomFields.UpgradeField.prototype.bindEvents_ = function() {
  CustomFields.UpgradeField.superClass_.bindEvents_.call(this);

  this.mouseOverWrapper_ =
    Blockly.bindEvent_(
        this.getClickTarget_(), 'mouseover', this, this.onMouseOver_);
  this.mouseOutWrapper_ =
    Blockly.bindEvent_(
        this.getClickTarget_(), 'mouseout', this, this.onMouseOut_);
};

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

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

יהיה עליך לטפל ב:

onMouseDown_

CustomFields.UpgradeField.prototype.onMouseDown_ = function(e) {
  // ...
};

הופך:

CustomFields.UpgradeField.prototype.showEditor_ = function() {
  // ...
}

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

מידע נוסף על עורכים זמין במאמר עורכים.

setValue

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

text_

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

למידע נוסף על הערך של שדה מסוים לעומת הטקסט שלו, המבנה של שדה.

קבלת עזרה בשדרוג

מה צריך לספק

כשמבקשים עזרה, מומלץ לשאול שאלות ספציפיות:

לא מומלץ: "מה לא בסדר בשדה הזה?"

גם לא מומלץ: "עזרה בשדרוג השדה הזה".

מומלץ: "טקסט השדה לא מתעדכן כמו שצריך".

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

לא מומלץ:

  • תמונות של קוד.
  • חסר קוד.

המלצה:

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

איפה לפרסם

פרסום שאלות לגבי שדרוג אצל מפתח החסימה בפורום.

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