Lazy Loading in Mashups verwenden

Mashup Builder > Mashups > Lazy Loading in Mashups verwenden

Diese Funktionalität wird in ThingWorx 9.3.2 oder höher unterstützt.

Lazy Loading ermöglicht es Ihnen, ressourcen- und datenintensive Operationen zu reduzieren oder zu verzögern, um die Mashup-Ladezeit und -Leistung zu verbessern. Sie können Lazy Loading verwenden, um ein Mashup so zu konfigurieren, dass wesentliche Komponenten geladen werden, und dann die zusätzlichen Daten laden und Dienste basierend auf Benutzeraktionen ausführen. Außerdem können Sie Container aus dem DOM entladen, um Systemressourcen freizugeben und die Leistung zu verbessern, wenn ein Container nicht mehr angezeigt wird. Dies ermöglicht es Ihnen, Benutzern schnelleren Zugriff auf wesentliche Funktionen bereitzustellen, wodurch die allgemeine Reaktionsfähigkeit des Mashups verbessert wird. Im Mashup Builder wird Lazy Loading mithilfe von Eigenschaften, Ereignissen und Diensten für die folgenden Typen von Containern unterstützt:

• Layout-Container

• Container innerhalb der Widgets "Registerkarten" und "Dynamischer Bereich".

Das Mashup-Ereignis Loaded wird normalerweise verwendet, um Datendienste und Funktionen in einem Mashup auszuführen, selbst wenn die Daten nicht sichtbar sind. Beim Entwerfen komplexerer Mashups können Benutzer mit längeren Ladezeiten und geringerer Leistung konfrontiert sein, wenn ein Mashup Folgendes enthält:

• Eine hohe Anzahl von Datendiensten, die gleichzeitig ausgeführt werden.

• Große Media-Entitäten, die sich auf die Download-Dauer von Ressourcen auswirken können.

• Visualisierungen, die eine große Datenmenge anzeigen, z.B. komplexe Raster und Widgets des Typs "Sammlung", die sich auf die Rendering-Leistung auswirken können.

Denken Sie beispielsweise an ein Mashup, das ein Registerkarten-Widget verwendet, um ein Layout zu erstellen, in dem jede Registerkarte einen anderen Typ von Visualisierung oder einen Satz von Eingabe-Widgets enthält. Das parallele Laden von Daten für alle Registerkarten, wenn ein Benutzer nur einige Registerkarten anzeigen muss, erhöht die Ladezeit und die Gesamtzahl der Netzwerkanforderungen an den Server. Sie können bestimmte Registerkarten auf Grundlage von Benutzeraktionen, der Ausgabe eines Dienstes oder einer Ausdrucksfunktion laden. Weitere Informationen zum Verwenden von Lazy Loading in einem Registerkarten-Widget finden Sie unter Widget "Registerkarten" (mit Thema versehbar).

Optimale Vorgehensweisen und Überlegungen zur Verwendung

• Verwenden Sie das Ereignis Loaded des Containers anstelle des Mashup-Ereignisses, um Dienste auszuführen, die an ein mit Lazy Loading geladenes Widget gebunden sind. Wenn Sie das Mashup-Ereignis Loaded binden, um einen Dienst für einen mit Lazy Loading geladenen Container auszuführen, werden keine Ergebnisse angezeigt, es sei denn, der Dienst LoadContainer wird ausgeführt.

• Entwerfen Sie das Layout Ihrer Lösung, und bestimmen Sie dann Teile Ihres Mashups, die separat geladen werden können. Denken Sie an die typischen Anwendungsfälle für die Lösung, und verwenden Sie diese Informationen, um zu entscheiden, wie Inhalt geladen werden soll. In einigen Fällen kann das Laden von mehr Daten als anfänglich erforderlich zu einem besseren Benutzererlebnis führen, wenn ein Benutzer schnell zwischen verschiedenen Ansichten wechseln muss, wodurch weniger Zeit zum Laden der einzelnen Registerkarten bleibt. Anstatt beim Öffnen eines Containers oder einer Registerkarte Daten für ein oder zwei Sekunden zu laden, können Sie festlegen, dass bestimmte Daten im Voraus geladen werden. Nachdem Sie das Mashup erstellt haben, sollten Sie seine Ladezeit und Leistung messen und diese dann mit den erwarteten Anwendungsfällen für Ihren Entwurf vergleichen.

• Wenn ein Container mehrere Sekunden benötigt, um seinen Inhalt zu laden, sollten Sie ihn geladen beibehalten, selbst wenn er sich nicht mehr in der aktuellen Ansicht befindet. Die Beibehaltung des geladenen Inhalts verhindert, dass der Benutzer beim Wechseln zu einer anderen Ansicht und Zurückkehren zur vorherigen darauf warten muss, dass Inhalt erneut geladen wird. Sie können eine Schaltfläche hinzufügen und sie an das Widget ReloadContainer binden, um es Benutzern zu ermöglichen, die Daten manuell erneut zu laden.

• Stellen Sie sicher, dass Daten aus einem mit Lazy Loading geladenen Container von anderen Widgets, Funktionen oder Diensten erst nach dem Laden des Containers verwendet werden.

• Mashups können viele Widgets und Abschnitte enthalten, die nicht immer für alle Benutzer relevant sind. Erstellen Sie Regeln mithilfe von Diensten und Funktionen, um das Laden und die Sichtbarkeit von Widgets und Daten zu steuern. Sie können Inhalt basierend auf Benutzereingaben oder Ereignissen laden, die zur Laufzeit auftreten.

Verwenden Sie Sichtbarkeitsregeln in den mit Lazy Loading geladenen Containern, sodass sie nur bei Bedarf angezeigt werden.

• Stellen Sie sicher, dass Funktionen, die Eingabeparameter aus mit Lazy Loading geladenen Widgets verwenden, nach dem Laden des Eltern-Containers ausgeführt werden. Mashup-Funktionen funktionieren möglicherweise nur, wenn alle gebundenen Teilnehmer sichtbar sind oder zumindest einmal sichtbar waren.

So konfigurieren Sie Lazy Loading-Eigenschaften für einen Container:

1. Wählen Sie im Mashup Builder im Zeichenbereich oder über den Fensterbereich Explorer einen Container aus.

2. Legen Sie die Container-Eigenschaft LazyLoading im Fensterbereich Eigenschaften auf "true" fest. Zusätzliche Eigenschaften, Dienste und Ereignisse für Lazy Loading werden angezeigt.

◦ Legen Sie zum Entladen von Daten für den Container die Eigenschaft EnableContainerUnload auf "true" fest, und binden Sie dann ein Ereignis, das den Dienst UnloadContainer ausführt.

◦ Binden Sie den Dienst LoadContainer an ein Widget-, Funktions- oder Datendienstereignis, um den Container zur Laufzeit zu laden.

Mit Lazy Loading geladene Container im Widget "Registerkarten" werden automatisch geladen, entladen und erneut geladen, wenn Sie zu einer Registerkarte wechseln, die für Lazy Loading konfiguriert ist.

◦ Binden Sie den Dienst ReloadContainer an ein Ereignis (z.B. einen Schaltflächenklick), um Inhalt innerhalb des Containers neu zu laden.

3. Binden Sie das Ereignis Loaded des ausgewählten Containers, um Dienste in Widgets, Datendiensten oder Funktionen auszuführen.

Binden Sie optional das Ereignis Unloaded, um Aktionen auszuführen, wenn der Container aus dem DOM entfernt wird.

4. Klicken Sie auf Speichern und dann auf Mashup anzeigen.

Wenn das Ereignis LoadContainer zur Laufzeit ausgeführt wird, löst das Ereignis Loaded einen beliebigen, festgelegten Dienst aus, z.B. Daten für ein Diagramm oder den Dienst Evaluate einer Ausdrucks- oder Validatorfunktion.

Lazy Loading-Eigenschaften

Die folgende Tabelle listet Eigenschaften, Ereignisse und Dienste auf, die zum Aktivieren und Konfigurieren von Lazy Loading für Container in einem Mashup verfügbar sind.

Eigenschaft	Beschreibung	Basistyp	Standardwert
LazyLoading	Ermöglicht es Ihnen, den Container mithilfe von Widget-, Funktions- oder Dienstereignissen zur Laufzeit zu laden, zu entladen und erneut zu laden.	BOOLEAN	False
LoadContainer	Ein bindbarer Dienst, mit dem Sie den Container zur Laufzeit mithilfe von Widget-, Funktions- oder Dienstereignissen laden, entladen und erneut laden können.	Dienst
Loaded	Ein Ereignis, das ausgelöst wird, wenn der Container geladen und in der Laufzeit-Mashup-Ansicht angezeigt wird. Sie können dieses Ereignis verwenden, um Dienste auszuführen, die an Widgets innerhalb des Containers gebunden sind.	Ereignis
EnableContainerUnload	Ermöglicht es Ihnen, den Container und seinen Inhalt mithilfe des Dienstes UnloadContainer zu entladen, wenn die Eigenschaft LazyLoading aktiviert ist.	BOOLEAN	False
UnloadContainer	Entlädt den Container und seinen Inhalt, einschließlich Kind-Containern, aus der Laufzeit-Mashup-Ansicht. Binden Sie dieses Ereignis an Ereignisse im Mashup, z.B. das Ereignis Clicked des Widgets "Schaltfläche" oder das Ereignis True der Validierungsfunktion.	Dienst
ReloadContainer	Lädt den Container und dessen Inhalt durch Entladen und Laden in der Laufzeit-Mashup-Ansicht neu. Diese Eigenschaft ist nur verfügbar, wenn EnableContainerUnload ausgewählt ist.	Dienst
Unloaded	Ein Ereignis, das ausgelöst wird, wenn der Container entladen und aus der Laufzeit-Mashup-Ansicht entfernt wird. Diese Eigenschaft ist nur verfügbar, wenn EnableContainerUnload ausgewählt ist.	Ereignis

Lazy Loading in benutzerdefinierten Widget-Erweiterungen verwenden

Im folgenden Abschnitt werden die Schritte beschrieben, die erforderlich sind, um eine benutzerdefinierte Widget-Erweiterung zu aktualisieren und so Lazy Loading zu unterstützen. Sie müssen die Widget-Datei <Widget-Name>.runtime.js manuell prüfen und aktualisieren, um Lazy Loading-Funktionen für Container zu verwenden.

Widgets verwenden eine Funktion namens beforeDestroy(), die verwendet wird, um die Widget-Bindungen und -Daten zu löschen, bevor sie aus dem HTML-DOM entfernt wird. In früheren Versionen von ThingWorx ist eine typische Methode zum Entfernen eines Widgets aus dem DOM die Deklaration einer Variablen, die auf das Widget-Objekt verweist, und dann die Zuweisung des Wertes null zu dieser Variable, wenn beforeDestroy aufgerufen wird. Beispiel:

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

Das Löschen von Widgets mit dieser Methode verursacht Probleme beim Neuladen des Widgets, da die aufgerufenen Methoden versuchen, diese Variable zu verwenden. Zum Verwenden von Lazy Loading in einem benutzerdefinierten Widget müssen Sie die Verweise auf die Funktion beforeDestroy() in der Datei <Widget-Name>.runtime.js der benutzerdefinierten Widget-Erweiterungen aktualisieren, indem Sie das Argument domOnly hinzufügen. Nachfolgend sehen Sie Beispielcode:

this.beforeDestroy = function(domOnly) {

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

Das Argument domOnly ermöglicht es Ihnen, das Widget aus dem DOM zu entfernen, ohne das Widget zu löschen. Sie können es später erneut in das DOM laden.

Führen Sie die folgenden Schritte aus, um eine vorhandene Erweiterung zu aktualisieren:

1. Extrahieren Sie die Widget-Erweiterung, und öffnen Sie anschließend die Widget-Quelldatei <Widget-Name>.runtime.js in einem Texteditor. Diese JavaScript-Datei definiert Widget-Struktur und -Verhalten, wenn sie in einem Mashup verwendet wird.

2. Durchsuchen Sie den Dateiinhalt nach beliebigen Referenzen auf die Funktion beforeDestroy(). Diese Funktion wird aufgerufen, bevor das DOM-Element des Widgets entfernt und das Widget von seinem Eltern-Widget getrennt und gelöscht wird.

◦ Wenn die Methode referenziert wird, fügen Sie das Argument domOnly wie folgt hinzu:

this.beforeDestroy = function(domOnly) {

3. Fügen Sie eine bedingte Anweisung für die Zuweisung von Variablen hinzu, um das Widget nur zu löschen, wenn der Wert des Arguments domOnly "false" ist:

if (!domOnly) {
thisWidget = null;
}

4. Speichern Sie die Datei runtime.js des Widgets, und packen Sie dann die benutzerdefinierte Erweiterung erneut.

5. Importieren Sie das aktualisierte Widget in Composer.

Sie können das benutzerdefinierte Widget jetzt in mit Lazy Loading geladenen Containern verwenden.

War dies hilfreich?