Item Sliding mit Ionic Icons – Optionen für Listeneinträge

Ionic Beginner Tutorial Steffen Lippke Sliding item2007 führte Jobs die "coolen" Wisch-Gesten ein.
Das Publikum damals war schwer beeindruckt.

Für uns heute ist das Wischen "selbstverständlich" geworden.

Natürliche Gesten wie Wischen und langes Drücken unterstreichen die Funktionen in Diener App.

Mit Ionic integrierst Du mit sliding item Wisch- und Druckgesten in Deine App.

Viel Spaß bei einer „visuellen“ Einführung.

Inhalt - Weg zu Optionen in Listen

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Herausforderung & Ziel: Interaktive Liste für eine Rezepte-App

Herausforderung und Ziel
Herausforderung und Ziel

Ein Rezept hinzufügen, löschen, editieren.

Alles das geht mit einer intelligenten Liste, die mit Wisch- (sliding) und Drück-Befehlen (drag) umsetzen kann.

Ionic stellt für Dich eine Lösung bereit mit der Du Deinen Listen mehr Funktion verleihst.

 

 

Swiping ausprobiert item sliding-min
Swiping ausprobiert item sliding

Unser Ziel: Rezepte wie im 21. Jhd. verwalten

Die Nutzung von Gesten unterstützen den Arbeit-Workflow und reduzieren störende Kontrollelemente auf dem Bildschirm.

Der Nutzer erhält freie Sicht auf den wesentlichen Inhalt mit Texten und Bilder. Dem Designer steht mehr Platz für echten Content zur Verfügung.

Technische Grundlagen - Dein Vorwissen

Lerninhalte für das Ionic Tutorial

In diesem Tutorial erfährst Du, wie Du …

… „natürliche“ Gesten in Deine Liste einfügen kannst
… die App mit den Ionic Icons - eine Icon- / Piktogramm-Bibliothek  erweitern kannst
… und wie die Rezept-Optionen ansprechender gestalten kannst

 

2. Kapitel

Konzept: Schachtelung von ion sliding

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Bei dem Ionic item sliding müssen wir eine strikte Schachtelungsstruktur beachten.

Nur wenn Du die vorgesehene Struktur anwendest, erhältst Du Dein gewünschtes Ergebnis. Mit Symbolen und Strings kannst Du die Option in Ionic betiteln.

 

 

Der Nutzer sieht bei den sliding items nur einen kleinen Ausschnitt des Listeneintrags. Der Wisch des Nutzers verschiebt den Sichtbarkeitsbereich.

Die folgende Grafik soll die Idee etwas verdeutlichen.

Vorstellung von item sliding in der Anzeige
Vorstellung von item sliding in der Anzeige

Koch-App Konzept

Für die Rezepte App brauchen wir noch einen Avatar für die Bilder, einen knackigen Titel und einen Beschreibungstext.

Die notwendigen Strings stammen aus einer vorgefertigten JSON-Datei. Die Avatar-Bilder links sollen die Bilder der Rezepte zeigen.

Ionic Funktionen, die wir an die HTML Struktur von sliding item binden, können Operationen wie löschen, editieren, hinzufügen oder sperren … durchführen.

Die Funktionen kannst Du nach Belieben entwicklen. Dieses Tutorial geht aber tiefer auf den möglichen Programmcode ein. Wir konzentrieren uns auf die Anwendung und das Verständnis von sliding item in Ionic.

3. Kapitel

Grundlagen: Jetzt auch visuell

Theorie einfach erklärt
Grundlagen einfach erklärt

Die Schachtelungsstruktur braucht etwas Erklärung, um diese zu verstehen.

Wenn man noch nicht so viel mit HTML gearbeitet hat, kann item sliding schnell verwirrend sein. Das klärt sich jetzt …

 

Ionic sieht vor, dass der Programmierer die Listenzeile und die Optionen separat definiert.

Obwohl in der HTML logischerweise von oben nach unten und links nach rechts aufgebaut ist, haben wir in Ionic eine andere Struktur. Wir schreiben den Code nicht in der Reihenfolge: linke Optionen,  mittige Inhalt und rechten Optionen

Struktur item sliding

Die Kapselung übernimmt der Ober-Tag ion-sliding.

Dann folgt direkt der Tag des normalen Listeneintrags. Dann kommen gebündelt am Ende alle Optionen:

linke und rechte Seite schreibst Du direkt hintereinander in den Code. Nur an dem Attribut side erkennst Du, auf welcher Seite die App die Option anzeigt.

item sliding im Code Schachtelung
item sliding im Code Schachtelung

Die Funktionen bindest Du mit Ein-Weg-Bindungen (One-Way-Binding) an die HTML Tags. Die eigentlichen Funktionen schreibst Du in der TypeScript Datei.

4. Kapitel

Coden: Dynamische Listen in Ionic

Coding und Umsetzung
Coding zur Umsetzung

Von der Theorie zur Praxis. Entwickle, diene erste Rezepte-App.

Wenn Du ein paar Zeilen Code geschrieben hast, verstehst Du das System item-sliding auch schneller.

Die Grundlage für jede Liste in Ionic ist die ion-list. Dieses Element rahmt die Liste. Das sliding-item ersetzt ion-item komplett.

Rezepte App mit Item Sliding
Rezepte App mit Item Sliding

Diese fügst Du so wie im folgenden Code hinzu:

Die strukturierende Anweisung *ngFor in Angular (Directives) ermöglicht die Iteration der item-sliding Struktur. Dadurch vermeidest Du Hart-Coding. Zu Listen habe ich schon ein ausführlicheres Tutorial erarbeitet. Werfe ein Blick auf den Post, wenn Du in diesem Thema noch nicht so sicher bist.

Provider als Datenlieferant - Angular

Damit die App die JSON nutzen kann, brauchen wir einen Provider, eine Angular Service.

Diesen entwicklen wir uns selber. Die JSON stellt die Grundlage für die App dar, die Du als Schnittstelle für ein Backend nutzen kannst. Die Datei landet in dem Ordner src/assets, sodass der Provider diese auslesen kann.

Der Provider nimmt sich die JSON und wandelt es in ein verständliches Format um.

Jetzt fügst Du den Provider zu app.modules.ts hinzu und in die home.ts integrierest Du diesen.

Der Rezepte-Provider ist jetzt nutzbar. Du erweiterst den Konstruktor mit dem Provider und schreibst in den Rumpf den Aufruf für die Datenabfrage. Die vorher deklarierte Variable recipes speichert die empfangen JSON des Providers temporär. *ngFor in der HTML Datei stellt die Rezepte im letzten Schritt dar.

Spezielle Funktionen für item-sliding

Die TypeScript Datei enthält die swipe und drag Funktionen des sliding-items. Glücklicherweise musst Du nicht das animierte Erscheinen der Optionen durch den Wisch programmieren. Das übernimmt der Codes des Frameworks für Dich. Für die Funktion der Optionen musst Du lediglich die Funktionen für das Ausführen der einzelnen Optionen schreiben.

Auswahlen von Rezepten
Auswahlen von Rezepten

Oder wähle mehrere aus ...

Muli Select von Items-min
Muli Select von Items

5. Kapitel

Erweiterungen: Füge weitere Optionen hinzu

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Ändern alleine reicht Dir nicht aus?

Dann erweitere es doch um noch mehr Funktionen.

Jetzt kannst Du die vorbereiteten Funktionen wie

drag, click, edit, share ...

mit etwas Leben füllen.

Probiere verschiedenes aus.

Ionic Listen Optionen
Ionic Listen Optionen

Erstelle weitere Funktionen.

Ändere die Icons mit Ideen vom Framwork.

6. Kapitel

Fazit: App für’s 21. Jahrhundert

Ziel und Fazit
Ziel und Fazit

Du kannst stolz auf die neuen Funktionen sein.

Mit Gesten schaffst Du den ersten Schritt in Richtung einer intuitiver UI. Du distanzierst Dich von den statischen Webseiten aus 1997.

Was macht aus Deiner Sicht eine App modern?

Schreibt mal in die Kommentare!

Oder lasst eine Like da.

 

Credits zu den verwendeten Bildern
Icons made by Vectors Market from www.flaticon.com is licensed by CC 3.0 BY

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.