Split Pane in Ionic – besser mit iPad + Tablet

Split Pane Steffen Lippke Ionic TutorialMobile First. Desktop Bitte auch.

Gleiche Text. Gleiche Bilder. Unterschiedliche Displays. Der responsive Ansatz soll Deine App für alle Geräte kompatibel machen.

Ich zeige Dir visuell, wie mit simplen Statements Deinen Webseiten auf allen Geräten glänzen kann.

Inhalt - Weg zu Master-Detail

Herausforderung + Coding-Ziel

Coding zur Umsetzung

Coding-Ansatz + Konzept

Erweiterungen + Aufgaben

Grundlagen einfach erklärt

Fertiges Ziel / Ergebniss

1. Kapitel

Herausforderung & Ziel: Master-Detail auf iPad schön gestalten

Herausforderung und Ziel
Herausforderung und Ziel

Mit den großen Screens kommen die Editoren, Listen und die Navigation in Apps erst richtig zur Geltung. Kleine Bildschirme sind keine Universallösung.

Das Prinzip ist simpel: Links stehen alle Einträge (Master) und rechts der Inhalt (Detail).

Die Gliederung der Screens ermöglicht eine Navigation durch Struktur ohne ständige Wechsel der Screens.

 

 

Unser Ziel: Gallarie an Webeiten

Das erste iPad aus 2010 stellt an die mobilen Betriebssysteme eine neue Herausforderung:

Wie kann eine Webseite konsistent auf einem Smartphone und einem Tablet darstellen?

Das Master-Detail-Prinzip ist die Antwort auf diese Frage bei 85% aller Apps. Was beim Smartphone auf zwei Ansichten verteilt ist, kann die Spilt Pane von Ionic in einer Ansicht darstellen.

Das Tutorial geht noch auf die automatische Erkennung der CSS von Tablet und Smartphone ein. Wie kann der Entwickler unterschiedliche Designs, Größen und Ausrichtungen schaffen?

Split Pane in Ionic Master Detail
Split Pane in Ionic Master Detail

 

 

Technische Grundlagen - Dein Vorwissen

  • etwas App Erfahrung - für was brauche ich einen Master Detail
  • Ionic Umgebung mit Grundlagen

Lerninhalte - vom kleinen zum GROSSEN

In diesem Tutorial lernst Du…

… einen Master-Detail View in Ionic einfach einzubinden
… den „Viewport“ mit den essentiellen Möglichkeiten kennen
… bessere Variablennamen für Deine Ionic Code zu finden

 

2. Kapitel

Konzept: Funktion Master-Detail Ansicht

Konzept und Lösungsansatz
Konzept und Lösungsansatz

Mit Lippke’s  Infografiken schaffen schnell eine Überblick über das Master-Detail-Prinzip.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

Welche Möglichkeiten haben wir? Wie kann ich die Ansicht verbinden?

 

 

Das Smartphone und Tablet unterscheidet sich nicht wesentlich. Das Tablet kann nur zwei Screen parallel darstellen. Der zweite Screen (Detail), welche den höheren Informationsgehalt besitzt, sitzt auf der rechten Seite.

Master Detail im Idealfall
Master Detail im Idealfall

Darstellung auf dem Smartphone

Beim Smartphone haben wir nur eine kleine Fläche, welche die Meisten primär hochkant nutzen. Der kleinere Screen muss die Informationen der Detail-Ansicht gestapelt anzeigen …

  • Die Breite der Bilder wächst auf Bildschirmbreite
  • Textblöcke, die nebeneinander stehen, zeigt das Smartphone untereinander an
  • Buttons und Links müssen nun auch für Wurstfinger geeignet sein
  • Die Webseite muss Text ausreichend groß anzeigen.

    Master Detail in Ionic auf 2 Bildschirme Smartphone
    Master Detail in Ionic auf 2 Bildschirme Smartphone

Master-Detail, so wie es sein sollte

Im Idealfall ist die Masteransicht scrollbar und mit einer Vielzahl an Elementen gefüllt, während der Detail-View statisch bleibt. Die zentralen Informationen stellt der Detail-View dar.

Die Detail Ansicht kann die App einfach erweitern: Mit einigen Buttons und Modals kann der Detail-View mehr Informationen zu Verfügung stellen.

  • Öffnungszeiten zeigt die App in eine Pop-Up an
  • Diverse Links zu den Webseiten sind erreichbar
  • Buttons zu Editiere / Änderungsmenu

    Master Detail auf drei Screens
    Master Detail auf drei Screens

Diese sollte möglichst als Modal, einer Extraansicht, aufpoppen. Zu Modal Thema habe ich schon eine Tutorial erstellt. Wenn Ihr euren Master-Detail View fertiggestellt habt, könnt Ihr die App mit Modals erweitern.

3. Kapitel

Grundlagen: Unterschiedliche Auflösungen. Gleiche App.

Theorie einfach erklärt
Grundlagen einfach erklärt

Bei alle mobilen Betriebssystemen hat der Programmierer zu beachten, wie die App optimal auf jedem Gerät aussehen kann.

Das Zauberwort lautet Responsive.

Aber wie können Wir diese Skalierbarkeit in der CSS einbinden? Wie kann die gleiche CSS auf verscheiden Ansichten aktiv sein?

 

Ionic erstellt Apps auf einerWeb Basis. Wegen der Webtechnoligen nutzt das Framework den sogenannten Meta-Tag Viewport. Dieser ist standardmäßig in  in der index.html beinhaltet, welche der Inital-Terminalbefehl beim Projekt-Aufsetzung generiert.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Das Statement stellt die Breite der App auf die Gerätebreite ein und annulliert den Zoom.

Mehr mir Media-Queries

Die nächsten wichtigen HTML Befehle sind die Media-Queries. Diese können Geräte und Auflösung spezifische Styles in einer CSS Datei bündeln. Sie setzen sogenannte Breakpoints fest, welche die unterschiedliche CSS  bei denen die Änderung des Displays aktivieren.

@media only screen and (min-width: 700px) {...}

Bei einer Displaygröße von 700px mindestens nutzt die CSS alles Styles, die innerhalb der geschweiften Klammern stehen. Mehreren, verschiedene Media-Queries untergliedern die CSS für die verschiedene Displaygrößengruppen.

Trenne die CSS für bessere Übersicht

Deine Unterteilung soll so einfach wie für die App gestaltet sein:

Ein Smartphone Ansicht mit CSS und eine Tablet / Desktopansicht mit CSS. Des Weiteren können Media-Queries die Rotation des Displays erkennen und durch das Wissen die Website angepasst darstellen:

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />

4. Kapitel

Coden: Split Pane für Master-Detail

Coding und Umsetzung
Coding zur Umsetzung

Genug Theorie und Grundlagen. Fokussieren wir uns auf den Code.

In diesem Tutorial bearbeiteten wir andere Dateien als in src/pages.

Wir gehen an die Wurzel und bearbeiten den app Ordner mit seinen Dateien.

Zuerst definierten wir die Untergliederung in Master und Detail Ansicht. Dabei setzt Ionic Standardmäßig die Untergliederung auf 30% Master / 70% Detail Ansicht.

Starten mit den App Dateien

In der App.html kommen ein paar Zeilen Code hinzu:

Noch etwas CSS für bessere / andere Items:

Detail View erstellen

Der Code dafür befindet sich in app.html. Der Master definieren die Tags ion-menu und das Attribut [content]=“content“. Der Detail ist festgelegt mit ion-nav root main content.

Der Viewport findet Anwendung im Split Pane Tag. Ionic bietet zusätzlich noch Abkürzungen zu den bekanntesten Gerätebreiten an: xs sm, md, lg, xl

Noch etwas Logik in die .ts Datei einfügen:
Home.ts spezifiziert die Detailansicht näher. Die Datei enthält in eine Switch Anweisung alle Title, Texte und Bilderurlnamen, die der Detail-Ansicht anzeigen soll. Die HTML zeigt diese mit den doppelten geschweiften Klammern an.

Sobald der Nutzer auf einen Eintrag in der Master-Ansicht klickt, überträgt die App einen Parameter vom Master zum Detail und lässt die gewünschten Informationen anzeigen.

5. Kapitel

Erweiterungen: Animate me!

Erweiterungen und Weiterführendes
Erweiterungen + mehr

Animation machen Deine App dynamisch.

Sei mutig und probiere ein paar aus.

Inspiration von Profis findest Du in den Design Guidelines oder Behance

Beim Material Design sind einzelne Master-Detail Animation vorgesehen. Mit einem Switch erscheinen die Detail Elemente stückweise. Mit dem Klick auf dem Master sliden Title und Bild in die Detail Ansicht hinein.

11 Kostenlose Exklusive App Dev Tipps

Deine Mail für Zugang zu praxisnahe App Entwicklung Tipps zu erhalten

SEI MUTIG!

6. Kapitel

Fazit: Master-Detail verstanden

Ziel und Fazit
Ziel und Fazit

Ich hoffe, dass ich euch ein besseres Verständis von Master detail verschaffen konnte.

Teilt die Infografiken oder schreibt einen Kommentar.

Viel Spaß beim Programmieren.

 

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

Sichere Dir den kompletten
Fundamental Ionic Course

Die kostenlosen Tutorials sind ein Ausschnitt
aus dem Fudamental Ionic Course by Steffen Lippke.

Schon 4832 erfolgreiche Absolventen

  • Code Downloads + umfangreiche Lösungen + Dateien für Grundlagen zum Coden
  • Visuelle Beschreibungen mit HD+ Screenshots und Hilfen
  • Steffen's Clean Code - Erweiterung - Verbesserungs - Tipps
 

100 h Kurslänge | 100 % Geld-Zurück-Garantie | Live-Support

 
1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 4,50 out of 5)
Loading...

Schreibe einen Kommentar

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