Implementieren Sie das Beispiel einer Single-Page-App für
Städteinformationen mit Verlaufsverwaltung aus der Vorlesung.
Abb. 1: GUI des Internet-Radios
Das CSS zu dem auf den Vorlesungsfolien angegebenen HTML
und JavaScript finden Sie hier.
Starten Sie die Anwendung, klicken Sie die Städte in einer
bestimmten Reihenfolge an und probieren Sie danach die Funktion
der Vor- und Zurück-Buttons aus. Testen Sie auch das
Bookmarking, in dem Sie URLs mit Städtenamen in der
Adressleiste des Browsers eingeben.
Deaktivieren Sie den Code für das Routing in der
Anwendung. Laden Sie die Anwendung danach neu und probieren Sie
wieder die Vor- und Zurück-Buttons aus. Jetzt sollten diese
nicht mehr funktionieren. Aktivieren Sie schließlich wieder den
Code für das Routing.
Aufgabe 2: Office-App
Implementieren Sie eine Anwendung, in der einige Hilfsmittel unter einer gemeinsamen
Bedienoberfläche inklusive Routing bereitgestellt werden.
Erzeugen Sie hierfür eine Kopie der Single-Page-App aus Aufgabe 1
und ersetzen Sie die Funktionen der Reiter durch ein paar Beispielanwendungen, wie z. B. die folgenden:
Die Notizenanwendung vom letzten Übungsblatt
Die einfache Zeichenanwendung aus der Vorlesung
Ein Radio
Damit ergibt sich z. B. folgende Bedienoberfläche:
Implementieren Sie die in Abb. 4 gezeigte einfache GUI für ein
Internet-Radio, bestehend aus einem Textinputfeld für die
Senderanzeige sowie fünf Kanalwählern, die als Radio Buttons
umgesetzt sind.
Abb. 4: GUI des Internet-Radios
(Sofern Sie die Bedienelemente mit Flexbox anordnen und mit
einem Webkit-Browser arbeiten, wie z. B. Safari, sind für eine korrekte Darstellung und
abhängig von der Browserversion
zusätzliche CSS-Anweisungen erforderlich. Siehe
hierzu den W3Schools-Artikel
CSS3
Flexible Box.)
Definieren Sie für das Abspeichern der zu einem
Internet-Radiokanal gehörenden Daten eine
Konstruktorfunktion function Channel(url,
name). Abgespeichert wird jeweils die URL des
Streaming-Dienstes sowie der Sendername. Speichern Sie in
einem Feld mit dem Namen channelArr neu erzeugte Channel-Objekte für die folgenden Sender ab:
http://mdr-284330-0.cast.mdr.de/mdr/284330/0/mp3/high/stream.mp3
(Siehe auch m3u-Playlist-Dateien unter https://www.sputnik.de/service/sputnik-frequenzen--100.html#sprung5)
Implementieren Sie für die Radio Buttons einen Ereignisbehandler,
z. B. mit dem Namen startAudio(nr). Jeder Radio Button
steht für einen der oben angegebenen Sender. Beim Klicken eines
Radio Buttons wird die Funktion startAudio(nr) mit der
Nummer des zugehörenden Senders aufgerufen. Dabei
steht nr für die
Nummer des zu diesem Button gehörenden Senderobjekts im channelArr.
In der Funktion startAudio(nr) wird folgendes
durchgeführt:
Die Funktion greift auf das Feld channelArr mit den gespeicherten
Senderobjekten zu und liest für das Feldelement mit dem
Indexwert nr den Namen des Senders aus. Der Name wird in dem Texteingabefeld
angezeigt.
Mit Hilfe der im Objekt gespeicherten URL wird das dazugehörende
Senderprogramm mit Hilfe eines <Audio>-Elements abgespielt.
Allgemeine Informationen zu <Audio>-Elementen finden Sie z. B. für HTML hier
bzw. für JavaScript hier. Wenn Sie keine Möglichkeit haben Audioinhalte abzuspielen, können Sie die URL auch einfach zusätzlich zum Sendernamen in das Browser-Fenster ausgeben.
Integrieren Sie das Radio schließlich in die Single-Page-App,
sodass sich insgesamt die folgende Bedienoberfläche ergibt:
