Elementi custom JS e refresh pagina

[d.termini]

Sicuramente è una mia mancanza perché non avrò scritto il wrapper nel modo corretto, però se ho un elemento custom in una videata e premo F5 per fare il refresh, poi l'applicazione va in errore su MioWrapper.Realize() e non riesco più a riprenderne il controllo.
Probabilmente perché sta caricando le dipendenze nell'ordine sbagliato, oppure non le sta proprio ricaricando, visto che nel wrapper mi dice che non è definito l'oggetto caricato come dipendenza.
Cosa posso vedere? (a parte mettere un check sul wrapper in modo che non vada in errore secco)

[eurekapv]

Ciao se puoi allega qui il file JS del Wrapper che ci do un occhio... perchè altrimenti è difficile.

Comunque il problema dell'F5 è anche quello che l'oggetto JS viene rieseguito (quindi riscatta la Realize() e reinizializza tutte le proprietà del tuo wrapper.
Esempio se avevo una proprietà color che potevo modificare da codice Inde, dopo F5 torna al suo valore di inizializzazione JS: questo perchè la Load di videata dove di solito si fanno operazioni con F5 non viene rieseguita.

Quindi io metto le inizializzazioni dei parametri e anche altri metodi nell'Evento OnActivate della Form (che è l'unico che viene rieseguita dopo F5)

Spero di esser stato chiaro :-)

[d.termini]

Ciao Pietro, grazie per il suggerimento su onActivate della form, provo a vedere se riesco a gestirlo così.
Per quanto riguarda l'errore sul wrapper ho semplicemente messo un "if (typeof dipendenza == "undefined") return;", ovviamente non può caricare il componente ma almeno si riesce a riprendere il controllo dell'applicazione.

È possibile capire se l'onActivate scatta perché è stata ricaricata la pagina?

[eurekapv]

Ma esattamente quella variabile dipendenza che leggo che cosa è ?
Perchè puo' essere undefined?

[d.termini]

Perché dal wrapper devo usare l'oggetto caricato dalle librerie esterne, e per qualche motivo quando ricarico la pagina non c'è più, probabilmente solo una questione di tempistica.

[eurekapv]

Ti riporto un mio wrapper

Code: Select all

AlphabeticLine.Init = function()
{
  if (AlphabeticLine.inited)
    return;
  //
  //Questa è la versione reale del componente sviluppato
  let developedVersion = '1';
  let pthis = this;
  let codeVersione = '1.0.9';
 
  let calCSS = [
    `JSComponents/AlphabeticLine/core/css/AlphabeticLine.css?v=${codeVersione}`
    ];

  let calJS = [
    `JSComponents/AlphabeticLine/core/js/AlphabeticLineItem.js?v=${codeVersione}`
    ];
   
  //Carico i CSS
  CustomElement.LoadRequirements(calCSS, "CSS", function () {

    //Ora carico il CSS di Customizzazione
    CustomElement.LoadRequirements(`JSComponents/AlphabeticLine/AlphabeticLineCustom.css?v=${codeVersione}`, "CSS");

  });
 
  //Carico i JS
  CustomElement.LoadRequirements(calJS, "JS", function () {

    AlphabeticLine.inited = true;
    if (AlphabeticLine.toRealize) {
     //FACCIO LA REALIZE SOLO SE HO CARICATO I JS
      pthis.Realize(AlphabeticLine.toRealize);
      delete AlphabeticLine.toRealize;
    }

  });

}

AlphabeticLine.Init();


Faccio la Realize solo nella callback di CustomElement.LoadRequirements così so che i JS sono arrivati.
Tu lo hai simile ?

[d.termini]

No, probabilmente il problema è quello, faccio la loadrequirements quando istanzio il componente ma la realize la fa per conto suo, penso chiamata da InDe.
Tieni conto che questo componente era nato ancora prima dei custom components e poi è stato adattato ed evoluto, quindi probabilmente ci siamo portati dietro una logica che non va proprio bene, anche se funziona correttamente.

Code: Select all

function SyncfusionSchedulerWrapper(owner)
{
   // Chiama il costruttore base
   CustomElement.call(this, owner);
   //
   // Inizializzo proprietà di appoggio del wrapper.
   // Verranno utilizzate nel Realize per inizializzare le proprietà dell'oggetto scheduler
   // non accessibili lato server.
   this._height = '100%';
   this._width = '100%';
   this._views = ['Day', 'Week', 'WorkWeek', 'Month', 'Agenda', 'MonthAgenda', 'TimelineDay', 'TimelineWeek', 'TimelineWorkWeek', 'TimelineMonth'];
   this._rowAutoHeight = true;
...

// Definisco l'estensione della classe per RD3
SyncfusionSchedulerWrapper.prototype = new CustomElement();
//
// Carico dipendenze/CSS
// 20241025 - Daniele: dalla versione 24.0 vanno chiamate in modo ritardato, basta anche di poco.
setTimeout(() => {
   CustomElement.LoadRequirements("ej2-js-es5/material.css", "CSS");
   CustomElement.LoadRequirements("ej2-js-es5/ej2.min.js", "JS");
}, 50);

SyncfusionSchedulerWrapper.prototype.Realize = function (parent, cls)
{
   // Creo il mio oggetto DOM
   this.schedulerBox = document.createElement("DIV");
   //
   // Aggiungo il mio oggetto al DOM
   parent.appendChild(this.schedulerBox);
   //
   // Protezione per ricaricamento pagina
   if (typeof ej == "undefined") {
      this.schedulerBox.appendChild(CreateErrorMessage('Attenzione: errore inizializzazione componente, chiudere e riaprire la videata.'));
      return;
   }
   //
   var pthis = this;
   //
   // Chiamo il metodo base
   CustomElement.prototype.Realize.call(this, parent, cls);
   
   var _isViewChanged = false;

   // Create and show the scheduler
   this.scheduleObj = new ej.schedule.Schedule({
      height: this._height,
      width: this._width,
      views: this._views,
...


[eurekapv]

Se vuoi segui il mio esempio ... intanto devi modificare poco (io lo uso in circa 40 componenti)

Code: Select all

// **************************************************************
// Class AlphabeticLine: Creazione di una lista di bottoni con le iniziali dell'alfabeto
// **************************************************************
function AlphabeticLine(pform)
{
  // Call base constructor
  CustomElement.call(this, pform);

  //Contenitore del componente
  this._domContainer = null;
  this._rowDom = null;
  this._idSelected = ''; //Id Bottone selezionato
  this._showNumericButton = false;
  this._showSymbolButton = false;


  this._listItems = []; //Elenco oggetti
  this._symbolButton = null; //Button con i simboli
  this._numericButton = null; //Button con i numeri
  this._allButton = null; //Button con i numeri
  this._color = AlphabeticLineColor.default; //Colore applicato

  this._objWebForm = null; //Oggetto WebForm
  this._parentDom = null; //Parent dove è agganciato il componente 
 
  this._realized = false;

}

//
// Define extension of class
AlphabeticLine.prototype = new CustomElement();

// **************************************************************
// Init the element
// **************************************************************
AlphabeticLine.Init = function()
{
  if (AlphabeticLine.inited)
    return;
  //
  //Questa è la versione reale del componente sviluppato
  let developedVersion = '1.3';
  let pthis = this;
  let codeVersione = '1.0.11';
 
  let calCSS = [
    `JSComponents/AlphabeticLine/core/css/AlphabeticLine.css?v=${codeVersione}`
    ];

  let calJS = [
    `JSComponents/AlphabeticLine/core/js/AlphabeticLineItem.js?v=${codeVersione}`
    ];
   
  //Carico i CSS
  CustomElement.LoadRequirements(calCSS, "CSS", function () {

    //Ora carico il CSS di Customizzazione
    CustomElement.LoadRequirements(`JSComponents/AlphabeticLine/AlphabeticLineCustom.css?v=${codeVersione}`, "CSS");

  });
 
  //Carico i JS
  CustomElement.LoadRequirements(calJS, "JS", function () {

    AlphabeticLine.inited = true;
    if (AlphabeticLine.toRealize) {
      pthis.Realize(AlphabeticLine.toRealize);
      delete AlphabeticLine.toRealize;
    }

  });

}

AlphabeticLine.Init();


// ***************************************************************
// Create DOM objects useful for this object
// The parent object tells the object where it should be contained
// its child objects in the DOM
// ***************************************************************
AlphabeticLine.prototype.Realize = function (parent) {

  let idElement = '';

  if (!AlphabeticLine.inited) {
    AlphabeticLine.toRealize = parent;
    return;
  }
  //
  // Call base method
  CustomElement.prototype.Realize.call(this, parent);

  //QUI CREA TUTTA LA STRUTTURA DOM E GLI OGGETTI CHE SERVONO

  //Realizzato
  this._realized = true;

     
  //QUESTO E' IMPORTANTE PER INVOCARE LE RICHIESTE CHE INDE HA GIA FATTO QUANDO
  //IL COMPONENTE NON ERA ANCORA CREATO
  CustomElement.prototype.AfterProcessResponse.call(this); 


}


[d.termini]

Grazie Pietro, appena ho tempo vedrò di ristrutturarlo, visto che devo anche aggiornare le librerie esterne prendo la palla al balzo

[d.termini]

Ciao Pietro

ho implementato il tuo metodo perché avevo un altro problema da risolvere (più seccante di quello del refresh) e funziona bene.

Resta comunque il problema del refresh in questo punto

Code: Select all

//Carico i JS
  CustomElement.LoadRequirements(calJS, "JS", function () {

    AlphabeticLine.inited = true;
    if (AlphabeticLine.toRealize) {
      pthis.Realize(AlphabeticLine.toRealize);
      delete AlphabeticLine.toRealize;
    }

  });

Se faccio F5 infatti mi dice che "Realize is not a function", non è un problema, ho spostato lì il controllo dell'errore che avevo fatto e tutto funziona come prima.