Pages vorladen

Wenn Sie beim Testen Ihrer Applikation feststellen, dass bestimmte Pages sehr lange zum Anzeigen benötigen und somit die Benutzererfahrung schmälern, können Sie das Laden dieser Pages in die Startphase der Applikation vorverlegen. Beim Navigieren in der App werden diese Pages dann sofort angezeigt.

Bevor die Pages in der Visualisierung zum ersten Mal angezeigt werden, müssen die darin enthaltenen JavaScript-Steuerelemente im Browser initialisiert werden. Je nach Art und Anzahl der Steuerelemente kann dies einige Sekunden beanspruchen. Sobald die Objekte geladen sind und im Cache liegen, wird die Seite umgehend dargestellt. Um dieses Verhalten auch bei der ersten Anzeige von Seiten zu ermöglichen, können bestimmte Pages explizit vorgeladen werden. Die folgende Abbildung zeigt den Prozess ohne und mit der Vorladefunktion.

Die erste Zeile in der Grafik zeigt den Standardfall. Hier erfolgt die Initialisierung jeder Page (init) bei ihrem ersten Aufruf, was je nach Komplexität zu einer geringen Wartezeit führen kann. In diesem Szenario würde der Maschinenbediener die Steuerelemente auf Page1, Page2 und Page3 beim ersten Laden zuerst nicht sehen und könnte sie nicht unmittelbar bedienen (operation). Je nach Zeitspanne kann dies irritierend wirken. Wenn die Wartezeit als nicht mehr akzeptabel wahrgenommen wird, bietet es sich an, diese Pages vorzuladen.

Die Darstellung darunter zeigt den Ablauf mit aktivierter Vorladefunktion. Hier wurde die Initialisierung von Page1 und Page2 in den Startprozess der Visualisierung verlagert. Die Objekte werden also initialisiert, während der Nutzer den Splashscreen sieht. Bei dieser Konfiguration erscheinen beide Pages ohne Verzögerung beim ersten Aufruf. Page3 wird erst initialisiert, wenn diese das erste Mal vom Anwender aufgerufen wird. Wie in der Abbildung gezeigt, kann die Konfiguration dazu führen, dass der Startprozess etwas verlängert wird. Diese potenzielle Auswirkung sollte bei der Projektierung berücksichtigt werden.

Dauert das Laden einer Page nur geringfügig länger, können Sie für diese Page statt des Vorladens die Anzeige eines animierten Ladesymbols aktivieren. Die Actions SetViewAction und NavigateToPageAction sowie die Navigationssteuerelemente Region, Button, ToggleButton, TabButton und MenuItem (Unterelemente des Steuerelements TabBar) beinhalten für diesen Zweck die Eigenschaft ShowLoadingSymbol.

Einschränkung: Das Vorladen von Pages kann in Projekten ab der Version 1.7.0 verwendet werden. Das bedeutet, dass die Option auf den Eigenschaftenseiten bei Projekten, die mit einer vorherigen Version erstellt wurden, nicht verfügbar ist. Nachdem das Projekt mindestens auf die Version 1.7.0 aktualisiert wurde, ist die Einstellung sichtbar.

Um das Vorladen von bestimmten Pages im Projekt zu aktivieren, führen Sie folgende Schritte aus:

Wählen Sie im Projektexplorer den Knoten [Projektname]_Client > Projektkonfiguration > Applikation aus.
Aktivieren Sie auf den Eigenschaftenseiten auf dem Tab Vorladen die Option Vorladen aktivieren.
Die Schaltfläche Seiten auswählen... wird aktiviert.

Klicken Sie auf die Schaltfläche Seiten auswählen... Der Dialog Pages für das Vorladen auswählen erscheint.

	Hier sind alle im Clientprojekt angelegten Pages aufgelistet, die vorgeladen werden können.
	Systemrelevante Pages (aktuell nur die LoadingPage.html) werden im Dialog nicht aufgelistet. Im Dialog werden ausschließlich Pages projektiert. Alle darin enthaltenen Steuerelemente werden automatisch vorgeladen. Dies gilt auch für in der Page verknüpfte Elemente, wie z. B. Views. Enthält eine Page also eine Region, in der Views projektiert wurden, werden diese ebenfalls initialisiert. Voraussetzung ist hierbei, dass jede Region über die Eigenschaft Name eine eindeutige ID gesetzt bekommen hat. Ab der Version 1.7.0 erfolgt die Namensvergabe bei der Platzierung eines Region-Elementes automatisch. Soll die Vorladefunktion in aktualisierten Projekten verwendet werden, ist es aber erforderlich, alle Regions zu benennen, die sich auf Pages befinden, welche vorgeladen werden sollen. Wird das Steuerelement Lenze.UI.PanoramaView in einem Projekt verwendet, muss auch dieses einen eindeutigen Namen besitzen, damit die verknüpften Inhalte korrekt initialisiert werden können. Die automatische Benennung ist ab der EASY UI Designer Version 1.7.0 verfügbar. Bei Projekten, die mit einer Version <1.7 erstellt wurden, muss daher der Name bei jedem PanoramaView ergänzt werden, das sich auf einer Page befindet, die vorgeladen werden soll.
	Das Feld Suche erlaubt die Filterung der Pages über ihren Namen.
	Über die Checkbox in der Spalte Vorladen kann die gewünschte Seite für das Vorladen aktiviert oder deaktiviert werden.
	Die Spalte Anzahl der Steuerelemente gibt einen Überblick über die Summe der zu initialisierenden Steuerelemente. Die Anzahl kann aufgrund von Abhängigkeiten in der Projektierung der Steuerelemente höher sein als die Anzahl der sichtbaren Objekte in einer Page. Diese Information hilft daher bei der Auswahl der vorzuladenden Seiten, da sie einen Anhaltspunkt für den Umfang einer Page gibt.
	Die Spalte Ordner zeigt an, in welchem Projektordner sich die Page befindet.
	Die Tabelle lässt sich durch Klick auf einen Spaltenkopf abwechselnd auf- und absteigend sortieren.

Wählen Sie im Dialog die Pages aus, die Sie vorladen wollen.
Klicken Sie auf Übernehmen.

Wenn Sie Pages umbenennen oder in andere Ordner verschieben, aktivieren Sie diese Pages für das Vorladen erneut. Denken Sie auch z. B. daran die Navigation zu diesen Pages anzupassen.