Upgrade di un campo personalizzato

A luglio 2019 (release 2.20190722) è stata aggiunta un'API con campi più codificati. È destinata a la più compatibile possibile con le versioni precedenti. Ciò significa che se avessi creato un prima di luglio 2019, molto probabilmente continuerà a funzionare. Prima di decidere se eseguire l'upgrade del campo personalizzato, devi leggere attraverso la sezione Aree pericolose ed esegui test accurati sul tuo campo.

Perché c'era una mancanza di standardizzazione tra i campi prima di luglio 2019 è difficile comprendere tutte le modifiche che uno sviluppatore potrebbe dover apportare. Questo documento riguarda tutte le modifiche probabili, ma se non presenta trattano qualcosa che ti interessa, leggi la sezione su ricevere assistenza per l'upgrade.

Nota: se hai un numero ridotto di campi personalizzati, può essere più semplice riscriverle seguendo le istruzioni per la creazione dei campi personalizzati, anziché provare a eseguirne l'upgrade in modo frammentario.

Aree pericolose

Le aree pericolose sono luoghi noti in cui l'API è cambiata e il campo potrebbe essere non funzionante.

Blockly.Field.register

I campi non sono più registrati tramite Blockly.Field.register();. C'è ora uno spazio dei nomi fieldRegistry che gestisce la registrazione.

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

Diventa:

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

setText

La funzione setText non viene più chiamata dal core Blockly, quindi se il tuo setText contiene una logica, che dovrà essere spostata gestione del valore suite di funzioni, il comando getText e le funzioni di rendering (in base a ciò che sta facendo esattamente la funzione 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;
};

Diventa:

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

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

Blockly gestisce automaticamente:

• È in corso la verifica per verificare se il nuovo valore è diverso da quello precedente.
• Aggiornamento del valore in corso...
• Attivazione degli eventi di modifica.
• Rendering del campo.

Dovrai gestire:

• Convalida del valore (doClassValidation_).
• Testo del campo (getText).
• UI dei campi

di Gemini Advanced.

Nota: ti consigliamo di modificare le chiamate setText in setValue, in quanto setValue supporta la convalida, al contrario di setText.

Aggiornamenti consigliati

Gli upgrade consigliati sono posizioni in cui l'API Field è stata modificata, ma se non apportare modifiche, è molto probabile che il campo funzioni ancora.

SERIALIZZABILE

Per ulteriori informazioni sulle proprietà EDITABLE e SERIALIZABLE, consulta Proprietà modificabili e serializzabili.

CustomFields.UpgradeField.prototype.SERIALIZABLE = true;

L'avviso riportato di seguito può essere ignorato, ma puoi risolverlo definendo il SERIALIZABLE proprietà:

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

L'avviso riportato sopra indica che Blockly ritiene che tu voglia da serializzare (perché la proprietà EDITABLE è true), ma non è sicuro finché non definisci la proprietà SERIALIZABLE. Se scegli di lasciamo perdere questo, tutto funzionerà correttamente e il campo sarà serializzato, ma riceverai avvisi sulla console.

size_.width

this.size_.width = 0;

Diventa:

this.isDirty_ = true;

Il seguente avviso può essere ignorato, ma puoi risolverlo impostando il isDirty_ anziché la proprietà size_.width:

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

L'avviso riportato sopra indica che Blockly ha rilevato che stai utilizzando un metodo obsoleto per eseguire il rendering di un e vorrebbe che usassi il nuovo metodo.

Per ulteriori informazioni sulla proprietà isDirty_, consulta isDirty_.

init

La funzione init è stata trasformata in un modello in e ridurre il codice duplicato nelle sottoclassi.

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

Diventa:

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

Ciò significa che ora Blockly gestisce automaticamente:

• È in corso la verifica dell'inizializzazione del campo.
• Creazione dell'oggetto fieldGroup_ in corso...
• Rendering del campo.
• Descrizione comando per l'associazione e visualizzazione degli eventi dell'editor.

Dovrai gestire:

• L'aggiunta di altri Elementi DOM (initView).
• L'aggiunta di altri associazioni di eventi (bindEvents_).
• Smaltimento delle associazioni di eventi (dispose).

di Gemini Advanced.

Importante: tutta la creazione del DOM deve essere eseguita all'interno di initView, poiché in modo efficace. Valuta la possibilità di eseguire il refactoring se devi creare DOM all'interno costruttore, setText, setValue o render_.

onMouseDown_

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

Diventa:

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

Ti consigliamo di eseguire l'override della funzione showEditor_ per gestire il mouse clic anziché la funzione onMouseDown_, che consente il passaggio dell'input attraverso il sistema di gesti.

Per ulteriori informazioni sugli editor, consulta Editor.

setValue

La funzione setValue è ora un modello in e ridurre il codice duplicato nelle sottoclassi. Se la funzione setValue contiene logica, valuta la possibilità di eseguirne il refactoring affinché rientri nei percorsi di gestione dei valori descritti in Gestione del valore.

text_

Ti consigliamo di non accedere o aggiornare mai la proprietà text_ del tuo . Utilizza invece Funzione getText per accedere al testo leggibile del tuo campo e alla Funzione setValue per aggiornare il valore memorizzato del campo.

Per ulteriori informazioni sul valore di un campo rispetto al suo testo, consulta Struttura di un campo.

Richiesta di assistenza per l'upgrade

Nota: prima di richiedere assistenza per l'upgrade, fai del tuo meglio per eseguire l'upgrade del tuo in modo indipendente usando le informazioni fornite.

Che cosa fornire

Quando chiedi aiuto, è meglio porre domande specifiche:

Opzione non consigliata: "Cosa c'è che non va in questo campo?"

Inoltre non è consigliato: "Aiutami a eseguire l'upgrade di questo campo".

Consigliato: "Il testo del campo non viene aggiornato correttamente".

È inoltre necessario fornire risorse alle persone che ti forniscono assistenza. Questi devono essere facili da usare per gli altri.

Sconsigliato:

• Immagini di codice.
• Codice incompleto.

Consigliato:

• Completa il codice del campo in formato di testo.
• Immagini di GIF con prestazioni scadenti dei campi.
• Passaggi per riprodurre il comportamento errato dei campi.
• La versione di blockly da cui stai eseguendo l'upgrade.

Dove pubblicare

Domande dopo l'upgrade per lo sviluppatore a blocchi Google Cloud.

Se sei sicuro che il problema sia un problema con il core di blockly, puoi anche pubblicare un problema su GitHub a blocchi. Se decidi di pubblicare un problema, compila tutti le informazioni richieste.