Ich glaube Du spinnst...oder wie man eine bessere User Experience in APEX erzielt.

Ein Problem, das jedem APEX-Entwickler früher oder später über den Weg läuft, ist, dass ein Report trotz reichlicher Optimierung und ausführlichem SQL-Tuning nicht schnell genug lädt. Doch wie kann man trotz langer Ladezeiten dem Anwender die User Experience so angenehm wie möglich machen?

Loading Spinner

Nichts nervt Anwender so sehr, wie das Warten auf die Anwendung. Insbesondere dann, wenn man das Gefühl hat, dass nichts mehr passiert bzw. die Anwendung möglicherweise nur noch "hängt". Ein kleines Signal, dass die Anwendung noch aktiv ist, kann hier sehr "beruhigend" wirken. Zusätzlich halten Sie den Anwender von hastigen und eventuell unerwünschten Eingaben ab. Oracle APEX liefert hierfür den sogenannten "Spinner". Dieser signalisiert den Nutzern, dass die Applikation weiterhin aktiv ist (siehe Abbildung 1). Sie aktiveren einen Spinner mittels JavaScript:

<script>
    apex.widget.waitPopup();
</script>
 

Doch wann rufen wir dieses Popup am besten auf und und wann beenden wir dieses wieder?

Um diese Frage beantworten zu können, müssen wir zunächst verstehen, wie APEX im Hintergrund arbeitet.

Verarbeitung von Seiten

Nehmen wir dazu im ersten Schritt an, dass wir auf der Startseite („Home") unserer APEX-Applikation stehen und nun auf die Seite "Huge Report" navigieren möchten (siehe Abbildung 2).

Während die Seite „Home" noch angezeigt wird und sich im Status „Page Unload" befindet, werden im Hintergrund die Daten unseres Reports und unserer neuen Seite geladen. Das heißt für uns: Wir müssen den Spinner auf unserer Seite „Home" aufrufen. Der Spinner muss auf der Seite "Home" gestartet werden. Denn während die Daten für den Report ermittelt und die neue Seite aufgebaut wird, ist dies immer noch die sichtbare und ausführende Seite.

Weiter gedacht bedeutet dies, dass wir den "Spinner" auf allen Seiten aktivieren müssen, von welchen aus wir auf die Seite "Huge Report" gelangen können.

Aufruf des Spinners

Daher ist es sinnvoll, den Aufruf des Spinners auf der „Global Page" zu definieren. Dafür legen wir im „Footer"-Bereich eine Region vom Typ Static Content an. Platziert wird der Aufruf in diesem Bereich, um sicherzustellen, dass alle JavaScript-Komponenten bereits geladen sind, bevor unser Aufruf stattfindet.

Implementieren wir den Aufruf hier, wie oben abgebildet, so wird der Spinner sofort bei jedem (!) Seitenaufruf geladen. Daher müssen wir dafür sorgen, dass der Aufruf nur bei dem Event PageUnload stattfindet. Das erreichen wir durch die Funktion window.AddEventListener(). Dieser Funktion wird ein Event und ein JavaScript-Code übergeben. Das Event beforeunload ist der Trigger, der genutzt wird, um die Aktion Beim Laden unserer Seite auszuführen. Der Code apex.widget.waitPopup() sorgt dafür, dass der Spinner gestartet wird.

<script>
    window.addEventListener("beforeunload", function(e) {
        apex.widget.waitPopup();
    });
</script>
 

Wir haben nun das folgende Verhalten erzeugt. Sobald eine Seite in den Status "PageUnload" wechselt und eine neue Seite erstellt wird, wird unser "Spinner" eingeblendet. Nachdem die neue Seite komplett erstellt wurde, wird dieser ausgeblendet, da der Befehl auf der neuen Seite noch nicht geladen wurde (Wird erst vor dem PageUnload-Event geladen).

Der Nachteil dieser Lösung: Auch bei kurzen Ladezeiten wird der Spinner angezeigt.

Abhilfe verschafft hier die setTimeout-Funktion. Dieser Funktion kann man JavaScript-Code und einen numerischen Wert übergeben. Dieser repräsentiert die Wartezeit des Timers (Relation: 1sec=1000). Die setTimeout-Funktion sorgt dafür, dass die Seitenverarbeitung weiterläuft, aber der JavaScript-Code, der dieser Funktion übergeben wurde, wird erst ausgeführt, wenn der Timer abgelaufen ist. Implementiert man nun den Aufruf des Spinners in diese Funktion, so wird der Loading-Spinner nicht angezeigt, sofern die Seite schneller lädt als der definierte zeitliche Schwellwert.

<script>
    window.addEventListener("beforeunload", function(e) {
        setTimeout(function(){
            apex.widget.waitPopup();
        }, 2000);
    });
</script>
 

Fazit: Auch Spinner haben ihre Daseinsberechtigung 

Wir haben in diesem Blog gezeigt, dass wir die "User Experience" mit simplen Mitteln relativ einfach steigern können. Natürlich ist dies eher eine "gefühlte" Verbesserung und dient eher zu "Beruhigung" der Anwender. Selbstverständlich sollte man im Vorfeld alles Mögliche tun, um die "Performance" der Seite tatsächlich optimal zu gestalten.

Sie haben Fragen rund um APEX oder Interesse an der Optimierung Ihres (PL/)-SQL Codes, dann sprechen Sie uns an. (info@ordix.de)