Selbst geschriebene Bedienelemente und zeitgesteuerte Vorgänge

Aufgabe 1: Modales Bild

Vollziehen Sie das auf den Vorlesungsfolien zum Thema "Modales Bild" erläuterte Beispiel nach, indem Sie die verschiedenen Lösungen implementieren. Zum Testen der Loader-Funktion nutzen Sie dabei schließlich die auf der Folie "Loader testen: Zeitgesteuerte Vorgänge" aufgeführte zeitgesteuerte Funktion removeLoader. Mit Hilfe dieser Funktion wird das zu ladende Bild erst nach einer Wartezeit von 4s angezeigt.

Das CSS von W3Schools, zu dem auf den Vorlesungsfolien angegebenen HTML und JavaScript, finden Sie hier.

Für die Anzeige können Sie z. B. die folgenden beiden Testbilder nutzen, die Sie unter diesen Links herunterladen können: großes Bild, kleines Bild. Das kleine Bild ist für die Thumbnail-Ansicht. Das große Bild für das Laden mittels JavaScript.

Alternativ zu der zeitgesteuerten Funktion removeLoader kann der Ladevorgang des anzuzeigenden Bilds im Webbrowser auch mit Hilfe von "Browser-Throttling" künstlich verlangsamt werden. Dabei wird die Datenübertragungsrate einer langsameren Netzwerkverbindung simuliert. Um dies auszuprobieren, deaktivieren Sie zunächst den Code für die Funktion removeLoader, d. h. Sie gehen zurück zu dem Inhalt der Folie "Modales Bild mit Ladeanzeige: JavaScript". Dadurch vermeiden Sie, dass sich die Verzögerungseffekte des Throttlings und des zeitgesteuerten Vorgangs überlagern. Das Throttling finden Sie bei den gängigen Browsern unter den Entwicklungstools, die Sie mit F12 aufrufen können.

Unter dem Browser Chrome klicken Sie nach dem Aufrufen der Webentwicklertools zunächst unter "Network" auf "Disable cache", damit das geladene Bild nicht im Browsercache zwischengespeichert wird und damit bei jedem Aufruf neu geladen werden muss. Dann öffnen Sie die Drop-Down-Liste unter "Online" und wählen dort "Slow 3G". Dadurch wird die Datenübertragung in einem langsameren 3G-(UMTS-)Netzwerk simuliert. Wenn Sie dann in der Webseite auf das Thumbnail-Bild klicken, wird der Ladevorgang so durchgeführt, als ob er in besagtem 3G-Netzwerk stattfinden würde. Hierdurch sollte der Lader einige Sekunden sichtbar sein. Geschieht das Laden zu schnell, so können Sie es weiter verlangsamen, in dem Sie ein eigenes Profil anlegen. Wählen Sie hierzu in der erwähnten Drop-Down-Liste unter "Custom" den Eintrag "Add". Dort können Sie nun ein Profil für eine ausreichend langsame Datenverbindung erstellen. Als Wert für die "Download"-Übertragungsgeschwindigkeit eignet sich z. B. 300kb/s. Geben Sie ihrem Profil einen Namen, z. B. Slow. Unter diesem Namen können Sie es später dann in der Drop-Down-Liste auswählen.

Um den Vorgang des Ladens und damit die Darstellung des Loaders nach dem Schließen des Ansichtsbereichs des geladenen Bilds wiederholen zu können, müssen Sie die Webseite zunächst neu laden. Anderenfalls würde das bereits geladene und im Image-Objekt gespeicherte Bild wieder angezeigt.

Unter Firefox erfolgt die Aktivierung des Throttlings ähnlich. Dort wählen Sie unter dem Reiter "Netzwerkanalyse" in der dort angezeigten Drop-Down-Liste mit dem Eintrag "Keine Drosselung" beispielsweise den Wert "Regular 2G". Dadurch wird die Datenübertragung in einem 2G-(Edge-)Netzwerk simuliert. Daneben klicken Sie wieder auf "Cache deaktivieren". Auch hier sollte der Lader dadurch beim Laden des Bilds einige Sekunden sichtbar sein.

Unabhängig von der hier erläuterten Anwendung ist das Throttling ein gutes Hilfsmittel, um das Laden einer Webseite unter langsamen Verbindungen auszuprobieren und diese gegebenenfalls zu verschlanken, wenn Sie zu langsam lädt. Ursache können hierfür zu viele große Bilder sein oder dass zu viele externe JavaScript-Dateien oder -Frameworks eingebunden werden. Es sollte immer darauf geachtet werden, dass Webseiten nicht unnötig viel Speicherplatz verbrauchen, da dies zum einen die Übertragungsnetze unnötig belastet und die Transferzeit erhöht und bei Nutzern mit Volumentarifen, z. B. für Smartphones, zusätzliche Kosten verursachen kann.

Beispiele für Loader finden Sie auf der w3schools-Seite im Abschnitt Loader.

Aufgabe 2: Progress Bar

1. Implementieren Sie die in Abb. 1 dargestellte einfache GUI zur Steuerung eines Ladebalkens. Es ist kein Flexbox hierfür erforderlich. Das CSS finden Sie hier.

   

   
   

   Wird im Eingabefeld ein Prozentwert zwischen 1 und 100 eingegeben und danach OK gedrückt, so läuft der Ladebalken zu dem gewünschten Prozentwert.

   Nutzen Sie hierfür die auf den Vorlesungsfolien angegebene Funktion moveTo(percent).

2. Die Funktion moveTo(percent) hat den Nachteil, dass Sie die Animation des Ladebalkens immer von 0 beginnend zum angegebenen Endwert in Prozent laufen lässt. Während eines längeren Ladevorgangs, in dem z. B. über das Netz langsam ansteigende Prozentwerte gelesen werden, würde dies bei Neuaufruf mit einem neuen, größeren Prozentwert immer zum Zurückspringen der Animation auf den Anfang führen.

   Schreiben Sie deswegen eine Funktion diffTo(from, to), die die Animation des Ladebalkens am Prozentwert from starten und diese bis zum Prozentwert to laufen lässt. Ist to größer als der Wert von from, so läuft die Animation vorwärts hin zu größeren Werten, bis sie to erreicht. Ist to kleiner, so läuft die Animation rückwärts hin zu kleineren Werten bis zum Endwert to. Der Wert von to entspricht dem aus dem Eingabefeld gelesenen Wert. Der Wert von from ist zu Beginn 0. Nach jedem Aufruf von diffTo(from, to) wird der Wert von to zum neuen Wert von from.

   Ersetzen Sie dann in Ihrer Lösung die Funktion moveTo durch die Funktion diffTo.

   Rückwärts laufende Ladebalken werden z. B. bei Installationsvorgängen eingesetzt, die abgebrochen werden und visualisieren dann, wie viel des abgebrochenen Installationsvorgangs bereits wieder rückgängig gemacht wurde.

Aufgabe 3: Snackbar

Während eines zeitaufwendigen Vorgangs, wie z. B. beim Herunterladen von Daten oder bei der Installation von Software, sollte der Fortschritt visualisiert werden, um den Anwendern eine Vorstellung darüber zu geben, wie lange dieser Vorgang noch dauern wird. Hierfür gedacht ist der Ladebalken. Für eine bedienfreundliche Lösung sollte zusätzlich noch bei Abschluss des Vorgangs eine Erfolgsmeldung erscheinen oder - wenn es zu Problemen kam - eine entsprechende Fehlermeldung. Insbesondere während längerer Vorgänge, befreien derartige Meldungen die Anwender davon, periodisch zu schauen, ob der Vorgang noch läuft oder inzwischen abgeschlossen ist.

Für derartige Meldungen eignet sich gut eine zeitgesteuerte Snackbar-Meldung. Erweitern Sie deswegen Ihre Lösung aus der letzten Aufgabe dahingehend, dass nach der Eingabe des Zielwerts von 100% im Eingabefeld mittels Snackbar die Erfolgsmeldung Download completed! ausgegeben wird, sobald der Ladebalken den 100%-Wert erreicht hat.

Im HTML kann die Snackbar einfach als passend formatiertes <div>-Element umgesetzt werden:

<div id="snackbar"></div>

Hierzu passende CSS-Anweisungen von W3Schools finden Sie hier. Das JavaScript auf den Vorlesungsfolien.

Aufgabe 4: Dropdown-Menü

Implementieren Sie das Dropdown-Menü aus dem Beispiel von den Vorlesungsfolien. Ändern Sie die Funktion handle(font) so ab, dass deren Meldungen in ein HTML-Element ausgegeben werden und nicht mehr mittels alert-Aufruf.

Das Dropdown-Menü aus dem Beispiel funktioniert wie folgt:

• Drücken der linken Maustaste auf dem Menü öffnet dieses. Das Menü bleibt beim Loslassen der Maustaste geöffnet.
• Ein Klick auf einen Menüpunkt selektiert diesen.
• Ein weiterer Mausklick schließt das Menü.

Abweichend hierzu zeigen Menüs üblicherweise das folgende Verhalten:

• Drücken der linken Maustaste auf dem Menü öffnet dieses. Das Menü bleibt beim Loslassen der Maustaste geöffnet.
• Ein Klick auf einen Menüpunkt selektiert diesen und schließt das Menü.

Modifizieren Sie die Lösung derart, dass das Menü dieses Verhalten zeigt. Sie werden hierfür nochmals die Funktion handle(font) abändern müssen.

Das CSS zum Dropdown-Menü finden Sie hier.

Aufgabe 5: Zeichenanwendung mit Bedienoberfläche

Als letzte Aufgabe des vorigen Übungsblatts implementierten Sie das Beispiel zu einer einfachen Zeichenanwendung aus der Vorlesung. Erweitern Sie diese um die im weiteren beschriebenen Bedienelemente. Hierfür ist kein Flexbox erforderlich.

1. Fügen Sie Ihrer Lösung zwei Dropdown-Menüs hinzu, mit denen die Strichbreite und Farbe des Zeichenstifts eingestellt werden kann, siehe Abb. 2 und 3.

   

   

   Je nach gewählter Einstellung erfolgt dann im Canvas-Element das Zeichnen mit unterschiedlichen Farben und Strichstärken.

2. Ordnen Sie unter Ihrem Canvas-Element für die Zeichenoperationen ein Akkordeon-Element an (CSS für das Akkordeon), welches die Funktionalität der Dropdown-Menüs zusammenfasst. Wie im Beispiel aus der Vorlesung, verwaltet das Akkordeon-Element ein paar Radio Buttons. Entsprechend zum Dropdown-Menü erhalten diese Ereignisbehandler für den onclick-Event. In den Ereignisbehandlern werden die gewählten Zeichenparameter eingestellt.

   

   

3. Alternativ zu den Dropdown-Menüs können die Bedienelemente der Zeichenanwendung auch mit Hilfe von Reitern bzw. Tabs organisiert werden. Ergänzen Sie Ihre Anwendung um eine Leiste von Reitern oberhalb der Dropdown-Menüs, wie in den folgenden Abbildungen angegeben (CSS für die Reiter). Um die Reiter mit Inhalt zu füllen, können Sie der Einfachheit halber die im Akkordeon bereits vorhandenen Radio Buttons weiter verwenden, indem Sie den zugehörenden Code mit Copy-Paste duplizieren.