Utilizzo del caricamento lazy in un mashup

Mashup Builder > Mashup > Utilizzo del caricamento lazy in un mashup

Questa funzionalità è supportata in ThingWorx 9.3.2 o versioni successive.

Il caricamento lazy consente di ridurre o ritardare le operazioni a uso intensivo di risorse e dati per migliorare le prestazioni e il tempo di caricamento del mashup. È possibile utilizzare il caricamento lazy per configurare un mashup in modo che carichi i componenti essenziali, quindi i dati aggiuntivi ed esegua i servizi in base alle azioni eseguite dall'utente. Inoltre, è possibile scaricare i contenitori dal DOM per liberare le risorse di sistema e migliorare le prestazioni quando un contenitore non è visibile. In questo modo si riesce a fornire agli utenti un accesso più rapido alle funzionalità essenziali, migliorando la velocità di risposta complessiva del mashup. In Mashup Builder il caricamento lazy è supportato utilizzando proprietà, eventi e servizi per i tipi di contenitore seguenti:

• Contenitori layout

• Contenitori all'interno delle schede e dei widget del pannello dinamico.

L'evento Loaded del mashup viene in genere utilizzato per l'esecuzione di funzioni e servizi dati in un mashup, anche quando i dati non sono visibili. Quando si progettano mashup più complessi, gli utenti possono riscontrare tempi di caricamento più lunghi e una riduzione delle prestazioni quando un mashup contiene gli elementi elencati di seguito.

• Un numero elevato di servizi dati che vengono eseguiti contemporaneamente.

• Entità multimediali di grandi dimensioni, che possono influire sul tempo necessario per il download delle risorse.

• Visualizzazioni che includono una quantità elevata di dati, ad esempio griglie complesse e widget Raccolta, che possono influire sulle prestazioni del rendering.

Si consideri, ad esempio, un mashup che utilizza un widget Scheda per creare un layout in cui ogni scheda contiene un tipo diverso di visualizzazione o un insieme di widget di input. Il caricamento dei dati per tutte le schede in parallelo, quando un utente deve visualizzare solo alcune schede, aumenta il tempo di caricamento e il numero totale di richieste di rete nel server. È possibile scegliere di caricare schede specifiche in base alle azioni intraprese dall'utente, all'output di un servizio o a una funzione di espressione. Per ulteriori informazioni sull'utilizzo del caricamento lazy in un widget Schede, vedere Widget Schede (con tema applicabile).

Best practice e considerazione sull'utilizzo

• Utilizzare l'evento Loaded del contenitore anziché l'evento del mashup per eseguire i servizi associati a un widget che viene caricato mediante caricamento lazy. L'associazione dell'evento mashup Loaded per l'esecuzione di un servizio per un contenitore caricato mediante caricamento lazy non visualizza alcun risultato, a meno che non venga eseguito il servizio LoadContainer.

• Progettare il layout della soluzione, quindi determinare le parti del mashup che possono essere caricate separatamente. Considerare i tipici casi di utilizzo per la soluzione e utilizzare queste informazioni per decidere come caricare il contenuto. In alcuni casi, quando un utente deve passare rapidamente da una vista all'altra, e quindi ha meno tempo per caricare una scheda alla volta, caricare sin dall'inizio più dati del necessario può offrire un'esperienza utente migliore. Anziché caricare i dati per un secondo o due ogni volta che vengono aperti un contenitore o una scheda, è possibile scegliere di caricare in anticipo dati specifici. Dopo aver creato il mashup, è necessario misurarne il tempo di caricamento e le prestazioni e quindi fare un confronto con i casi di utilizzo previsti per il progetto.

• Quando un contenitore impiega più di un secondo per caricare il contenuto, prendere in considerazione l'ipotesi di mantenerlo caricato, anche quando non è più presente nella vista corrente. Se il contenuto resta caricato, l'utente non deve attendere che venga ricaricato ogni volta che passa a una vista diversa e quindi torna a quella precedente. È possibile aggiungere un pulsante e associarlo al widget ReloadContainer per consentire agli utenti di ricaricare manualmente i dati.

• Assicurarsi che i dati di un contenitore caricato mediante caricamento lazy vengano utilizzati da altri widget, servizi o funzioni solo dopo che il contenitore è stato caricato.

• I mashup possono contenere molti widget e sezioni che non sono rilevanti per tutti gli utenti per tutto il tempo. Creare regole utilizzando servizi e funzioni per controllare il caricamento e la visibilità di widget e dati. È possibile caricare il contenuto in base all'input dell'utente o agli eventi che si verificano in fase di esecuzione.

Utilizzare le regole di visibilità nei contenitori caricati mediante caricamento lazy in modo che vengano visualizzati solo se necessario.

• Assicurarsi che le funzioni che utilizzano i parametri di input dei widget caricati mediante caricamento lazy vengano eseguite dopo il caricamento del contenitore padre. Le funzioni di mashup potrebbero funzionare solo quando tutti i partecipanti associati sono visibili o sono stati visualizzati almeno una volta.

Per configurare le proprietà di caricamento lazy per un contenitore, attenersi alla procedura descritta di seguito.

1. In Mashup Builder selezionare un contenitore nell'area di lavoro o utilizzando il pannello Navigatore.

2. Nel pannello Proprietà impostare la proprietà LazyLoading del contenitore su True. Vengono visualizzati ulteriori proprietà, servizi ed eventi per il caricamento lazy.

◦ Per scaricare i dati per il contenitore, impostare la proprietà EnableContainerUnload su True, quindi associare un evento che esegue il servizio UnloadContainer.

◦ Per caricare il contenitore in fase di esecuzione, associare il servizio LoadContainer a un widget, a una funzione o a un evento del servizio dati.

I contenitori caricati mediante caricamento lazy nel widget Schede vengono caricati, scaricati e ricaricati automaticamente quando si passa a una scheda configurata per il caricamento lazy.

◦ Per ricaricare il contenuto all'interno del contenitore, associare il servizio ReloadContainer a un evento, ad esempio un clic su un pulsante.

3. Associare l'evento Loaded del contenitore selezionato per l'esecuzione di servizi all'interno di widget, servizi dati o funzioni.

Facoltativamente, associare l'evento Unloaded per l'esecuzione di azioni quando il contenitore viene rimosso dal DOM.

4. Fare clic su Salva e quindi su Visualizza mashup.

Quando il servizio LoadContainer viene eseguito in fase di esecuzione, viene attivato l'evento Loaded, che esegue tutti i servizi associati, ad esempio i dati per un grafico o un servizio Evaluate di una funzione di espressione o di convalida.

Proprietà del caricamento lazy

Nella tabella seguente sono elencate le proprietà, gli eventi e i servizi disponibili per abilitare e configurare il caricamento lazy per i contenitori in un mashup.

Proprietà	Descrizione	Tipo di base	Valore di default
LazyLoading	Consente di caricare, scaricare e ricaricare il contenitore utilizzando eventi widget, funzione o servizio in fase di esecuzione.	BOOLEAN	False
LoadContainer	Servizio associabile che consente di caricare, scaricare e ricaricare il contenitore in fase di esecuzione utilizzando eventi widget, funzione o servizio.	Servizio
Loaded	Evento che viene attivato quando il contenitore viene caricato e visualizzato nella vista del mashup in fase di esecuzione. È possibile utilizzare questo evento per eseguire servizi associati ai widget all'interno del contenitore.	Evento
EnableContainerUnload	Consente di scaricare il contenitore e il relativo contenuto utilizzando il servizio UnloadContainer quando la proprietà LazyLoading è attivata.	BOOLEAN	False
UnloadContainer	Scarica il contenitore e il relativo contenuto, inclusi i contenitori figlio, dalla vista del mashup in fase di esecuzione. Associare questo evento agli eventi nel mashup, ad esempio l'evento Clicked del widget Pulsante o l'evento True della funzione di convalida.	Servizio
ReloadContainer	Ricarica il contenitore e il relativo contenuto scaricandolo e caricandolo nella vista del mashup in fase di esecuzione. Questa proprietà è disponibile solo quando EnableContainerUnload è selezionata.	Servizio
Unloaded	Evento che viene attivato quando il contenitore viene scaricato e rimosso dalla vista del mashup in fase di esecuzione. Questa proprietà è disponibile solo quando EnableContainerUnload è selezionata.	Evento

Utilizzo del caricamento lazy all'interno di estensioni widget personalizzate

La sezione che segue descrive i passi necessari per aggiornare un'estensione widget personalizzata per supportare il caricamento lazy. Per utilizzare le funzionalità del caricamento lazy per i contenitori, è necessario esaminare e aggiornare manualmente il file <nomewidget>.runtime.js del widget.

I widget utilizzano una funzione denominata beforeDestroy(), che permette di cancellare i dati e le associazioni dei widget prima che vengano rimossi dal DOM HTML. Nelle versioni precedenti di ThingWorx un modo tipico per rimuovere un widget dal DOM consiste nel dichiarare una variabile che punta all'oggetto widget e quindi assegnare un valore null a questa variabile quando viene chiamata la funzione beforeDestroy. Ad esempio:

this.beforeDestroy = function(){
/** Destroy widget
thisWidget = null;
}

Eliminare i widget utilizzando questo metodo comporta problemi durante il ricaricamento del widget, poiché i metodi chiamati tentano di utilizzare questa variabile. Per utilizzare il caricamento lazy in un widget personalizzato, è necessario aggiornare i riferimenti alla funzione beforeDestroy() nel file <nomewidget>.runtime.js delle estensioni widget personalizzate aggiungendo l'argomento domOnly. Un esempio è il codice seguente:

this.beforeDestroy = function(domOnly) {

if (!domOnly) {
thisWidget = null;
]
};

L'argomento domOnly consente di rimuovere il widget dal DOM senza eliminare il widget e di ricaricarlo nel DOM in un secondo momento.

Per aggiornare un'estensione esistente, attenersi alla procedura descritta di seguito.

1. Estrarre l'estensione del widget, quindi aprire il file di origine del widget <nomewidget>.runtime.js in un editor di testo. Questo file JavaScript definisce la struttura del widget e il relativo comportamento quando viene utilizzato in un mashup.

2. Cercare tutti i riferimenti alla funzione beforeDestroy() nel contenuto del file. Questa funzione viene chiamata prima della rimozione dell'elemento DOM del widget e prima che il widget venga scollegato dal widget padre ed eliminato.

◦ Se il metodo è referenziato, aggiungere l'argomento domOnly come descritto di seguito.

this.beforeDestroy = function(domOnly) {

3. Aggiungere un'istruzione condizionale per l'assegnazione della variabile per eliminare il widget solo quando il valore dell'argomento domOnly è false:

if (!domOnly) {
thisWidget = null;
}

4. Salvare il file runtime.js del widget, quindi creare un nuovo package dell'estensione personalizzata.

5. Importare il widget aggiornato in Composer.

È ora possibile utilizzare il widget personalizzato in contenitori caricati mediante caricamento lazy.

È stato utile?