Ionic Alert Tutorial + Input / Radio / Prompt Warnungen

Intelligente Hinweise aufrufen

Der Aufruf von Alerts sollte am besten über eine eigene Funktion stattfinden. Wenn zum Beispiel eine die if-Anweisung den else-Rumpf aktiviert, dann kann der else-Rumpf auf die Hinweisfunktion verweisen.

Gliederung von Alerts

Bei normalen Alerts legen wir einen Titel (Überschrift), einen Untertitel (Nachrichtentext) und den Namen für den Button an. Die komplexeren Hinweise bekommen zusätzlich noch eine oder mehrere Handler. Die Handler beinhalten Aktionen, die der Hinweis auslösen soll.

Ionic stellt folgende Typen bereit und musst Du unterscheiden:

• Basic Alerts: Einfache Anzeige von Hinweisen
• Prompt Alerts: Hinweis mit Auswahl an Aktionen und Handler
• Confirmation Alerts: Hinweis für die Zustimmung z. B. Annehmen / Ablehnen
• Radio Alerts: Hinweis mit Auswahl für eine Möglichkeit durch Radioboxen
• Checkbox Alerts: Hinweis mit Mehrfachauswahl und Bestätigung

Alerts brauchen zur Nutzung eine Depencies Injection von dem Ionic Modul AlertController. Der AlertController ist inkludiert in dem Ionic Framework.

Wenn Du den Controller in den Konstruktor eingefügt hast, schreibe den Alert Code in Deine Warn-Funktion hinein. Zum Anlegen brauchst Du eine let Variable, die den von AlertController erzeugten Alert speichert.

Alles zu ModalController

Für was brauche ich jetzt Modals?  Alerts gehört zu den Modals oder einfache „Flächen“, die in den Vordergrund treten können

Der ModalController ähnelt stark dem NavContraller. Die Modals sind Seiten / Boxen, welche die App über die aktuell angezeigte Seite schiebt. Dabei nutzen die Modals den push Funktion des NavControllers und setzt das Modal auf die oberste (sichtbare Position) des Seitenstapels.

.pop() und .dismiss() nehmen das Modal vom Stack herunter und die vorherige Seite tritt wieder in den Vordergrund.

Aufbau der Album-Collection

Für unser Fotoalbum beinhaltet home.html die Foto-Karten, die die Urlaube gruppieren. Der img Tag muss außerhalb von ion-content stehen, sonst bekommt das Bild einen unschönen Rand. Der FAB (Floating Action Button) sitzt oben rechts direkt unter dem img Tag.

„Klare“ Ionic Card Buttons

In der Mitte folgt der ion-card-content mit der Beschreibung des Urlaubs. Separat davon steht ein ion-item, welches dafür gedacht ist, die Buttons im unteren Teil der Karte mit item-start und item-end anzuordnen. Ich habe die Buttons mit dem Attribut clear die Farbe entzogen, wie es für Ionic Karten typisch ist.

Alle Hinweise kurz erklärt

Das TypeScript enthält den Code für alle Hinweise. Diese rufen die Klick-Events (click) der home.html auf.

Einfacher Hinweis – Der Array der .create Funktion des AlertConrollers definiert den Titel, Untertitel und die Buttons. Nicht zu vergessen ist die .present() Funktion der Alerts. Nachdem Du den Hinweis in die Konstante deklariert hast, muss die App den Hinweis mit .present() in den Vordergrund schieben.

Prompt Hinweis – Das Prompt Alert fügt zu dem einfachen Hinweis eine Eingabe hinzu: Der Array inputs beschreibt das Eingabefeld mit einem Namen zur Abfrage der Werte und einen Default-Text-Platzhalter.

Bestätigung Hinweis – Der Button untergliedert sich in den Text und seinen Handler. Der Handler ist vergleichbar mit dem JavaScript EventListener. Sobald der Nutzer auf den Button mit dem Text klickt, löst der Klick die Handler-Funktion aus. In diesem Beispiel ist die Aktion eine Konsolenausgabe.

Checkbox Hinweis – addInput fügt dem Checkbox-Hinweis die Steuerelemente hinzu. Der Array definiert den Typ (Checkbox), eine sichtbare Beschriftung, einen Wert zum Auslesen des Inputs und einen Default-Wert (true = abgehackt).

Der Handler des Checkbox-Hinweises arbeitet mit der data, die getroffenen Auswahlen der Checkboxen.