Upgrade für ein benutzerdefiniertes Feld durchführen

Im Juli 2019 (Version 2.20190722) Es wurde eine API mit stärker kodifizierten Feldern hinzugefügt. Sie ist dazu gedacht, so abwärtskompatibel wie möglich. Wenn Sie also eine vor Juli 2019 nicht mehr ändern, wird es höchstwahrscheinlich auch weiterhin funktionieren. Bevor Sie entscheiden, ob Ihr benutzerdefiniertes Feld aktualisiert werden muss, sollten Sie Folgendes lesen: den Abschnitt Gefahrenbereiche durchgehen und Ihr Feld gründlich testen.

Weil es vor Juli 2019 keine Standardisierung zwischen Feldern gab Es ist schwierig, alle Änderungen abzudecken, die ein Entwickler vornehmen muss. In diesem Dokument wird versucht, alle wahrscheinlichen Änderungen abzudecken. zu einem Thema behandeln, das Sie interessiert, Unterstützung beim Upgrade erhalten.

Hinweis :Bei wenigen benutzerdefinierten Feldern ist es möglicherweise einfacher, mithilfe der Anleitung zum Erstellen benutzerdefinierter Felder umschreiben, anstatt sie stückweise aufzurüsten.

Gefahrenbereiche

Gefahrenbereiche sind bekannte Orte, an denen sich die API geändert hat. kaputt.

Blockly.Field.register

Felder sind nicht mehr über Blockly.Field.register(); registriert. Es gibt ist jetzt ein „fieldRegistry“-Namespace, der die Registrierung verarbeitet.

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

Wird zu:

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

setText

Die Funktion setText wird nicht mehr vom Blockly-Kern aufgerufen. Wenn Ihr setText also die Logik enthält, die in den Umgang mit Werten die Funktion getText, und den Rendering-Funktionen, Das hängt davon ab, was genau die Funktion setText tut.

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

Wird zu:

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

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

Automatisch verarbeitet:

• Es wird geprüft, ob sich der neue Wert vom alten unterscheidet.
• Der Wert wird aktualisiert.
• Änderungsereignisse werden ausgelöst.
• Feld wird erneut gerendert.

Sie müssen sich um Folgendes kümmern:

• Wertvalidierung (doClassValidation_):
• Feldtext (getText):
• Feld-UI

Hinweis: Wir empfehlen, alle setText-Aufrufe in setValue-Aufrufe, da setValue die Validierung unterstützt und setText nicht.

Empfohlene Upgrades

Bei empfohlenen Upgrades wurde die Field API geändert. Wenn Sie jedoch keine Änderungen vornehmen, damit Ihr Feld höchstwahrscheinlich weiterhin funktioniert.

SERIALISierbar

Weitere Informationen zu den Attributen EDITABLE und SERIALIZABLE finden Sie unter Bearbeitbare und serialisierbare Attribute.

CustomFields.UpgradeField.prototype.SERIALIZABLE = true;

Die Warnung unten kann ignoriert werden. Sie können das Problem jedoch beheben, indem Sie die SERIALIZABLE definieren. Property:

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

Die Warnung oben bedeutet, dass Blockly der Meinung ist, dass Sie Feld, das serialisiert werden soll (weil das Attribut EDITABLE wahr ist), aber kann erst bestätigt werden, wenn Sie die Eigenschaft SERIALIZABLE definiert haben. Wenn Sie damit alles ordnungsgemäß funktioniert und das Feld serialisiert, aber Sie erhalten Konsolenwarnungen.

size_.width

this.size_.width = 0;

Wird zu:

this.isDirty_ = true;

Die Warnung unten kann ignoriert werden. Sie können das Problem jedoch beheben, indem Sie die isDirty_ festlegen. anstelle der size_.width-Eigenschaft:

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

Die Warnung oben bedeutet, dass Blockly erkannt hat, dass du eine alte Methode zum erneuten Rendern eines und möchten, dass Sie die neue Methode verwenden.

Weitere Informationen zum Attribut isDirty_ findest du unter isDirty_.

init

Aus der Funktion init wurde eine Vorlage erstellt zu und reduzieren Sie doppelt Code in Unterklassen.

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());
};

Wird zu:

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_);
};

Folgendes wird in „blockly“ jetzt automatisch verarbeitet:

• Es wird geprüft, ob das Feld bereits initialisiert ist.
• fieldGroup_ wird erstellt.
• Feld wird gerendert.
• Kurzinfo zur Bindung und Anzeige von Editor-Ereignissen.

Sie müssen sich um Folgendes kümmern:

• Weitere hinzufügen DOM-Elemente (initView)
• Weitere hinzufügen Ereignisbindungen (bindEvents_)
• Ereignisbindungen entfernen (dispose).

Wichtig: Die gesamte DOM-Erstellung sollte innerhalb von initView erfolgen, da dies effizient zu gestalten. Ziehen Sie eine Refaktorierung in Betracht, wenn die DOM-Erstellung im Konstruktor, setText, setValue oder render_.

onMouseDown_

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

Wird zu:

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

Wir empfehlen, die showEditor_-Funktion zur Verarbeitung der Maus zu überschreiben und nicht auf die onMouseDown_-Funktion, da diese den Durchgang von Eingaben ermöglicht. über das Gestensystem.

Weitere Informationen zu Bearbeitern finden Sie unter Bearbeiter.

setValue

Die Funktion setValue ist jetzt eine Vorlage zu und reduzieren Sie doppelt Code in Unterklassen. Wenn die setValue-Funktion Logik enthält, sollten Sie es refaktorieren, damit es den in diesem Artikel Umgang mit Werten:

text_

Wir empfehlen, niemals auf das text_-Attribut deines direkt eingeben. Verwenden Sie stattdessen die Methode Funktion getText um auf den vom Nutzer lesbaren Text Ihres Felds und die setValue um den gespeicherten Wert Ihres Felds zu aktualisieren.

Weitere Informationen zum Wert eines Felds im Vergleich zu seinem Text finden Sie unter Anatomie eines Felds.

Unterstützung beim Upgrade erhalten

Hinweis: Bevor Sie Hilfe beim Upgrade anfordern, führen Sie bitte ein Upgrade Ihrer mithilfe der bereitgestellten Informationen unabhängig voneinander eingeben.

Was muss angegeben werden?

Wenn Sie um Unterstützung bitten, stellen Sie am besten konkrete Fragen:

Nicht empfohlen: „Was stimmt mit diesem Feld nicht?“

Auch nicht empfohlen: „Helfen Sie mir, dieses Feld zu aktualisieren.“

Empfohlen: „Feldtext wird nicht richtig aktualisiert.“

Außerdem ist es wichtig, den unterstützenden Personen Ressourcen zur Verfügung zu stellen. Diese Dateien sollten für andere einfach zu nutzen sein.

Nicht empfohlen:

• Bilder von Code
• Unvollständiger Code.

Empfohlen:

• Ein vollständiger Feldcode im Textformat.
• Bilder von GIFs, die schlechtes Feldverhalten zeigen.
• Schritte zum Reproduzieren eines schlechten Feldverhaltens.
• Die Version von Blockly, von der Sie ein Upgrade ausführen.

Ort der Veröffentlichung

Fragen zum Upgrade stellen Sie in der blockly-Entwickler- Forum.

Wenn Sie sicher sind, dass das Problem mit dem Blockly-Kern zusammenhängt, können Sie auch ein Problem posten auf dem blockly-GitHub. Wenn Sie ein Problem posten möchten, füllen Sie bitte alle die angeforderten Informationen.