Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS...
Transcript of Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS...
![Page 1: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/1.jpg)
MODERNE FRONTEND-GESTALTUNG (VON SWING INS WEB)
Karsten Lentzsch – JGoodies
![Page 2: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/2.jpg)
JGoodies: Karsten Lentzsch
▪ Java-GUI-Bibliotheken und -Rahmenwerk
▪ Beispielanwendungen
▪ Beratung zu Java-Desktop
▪ Gestaltung und Oberflächen-Bau
▪ Didaktik und Produktionskosten
▪ Swing/JavaFX/SWT. Und nun?
Renovieren, umziehen, neu bauen
![Page 3: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/3.jpg)
Vorher
![Page 4: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/4.jpg)
Nachher
![Page 5: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/5.jpg)
Nachher
![Page 6: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/6.jpg)
Modern
![Page 7: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/7.jpg)
Modernisierungen für Desktop-Apps
und Zielgestaltung kennenlernen
Ziel
![Page 8: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/8.jpg)
Zusammenfassung
▪ UI-Techniken ändern sich schnell
▪ Design-Sprachen entwickeln sich langsam
▪ Nutze Design als Brücke von neu zu alt!
▪ Kenne Material Design und UWP!
▪ UWP lohnt für den Desktop
▪ Kenne SAPs Floorplans!
![Page 9: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/9.jpg)
Gliederung
Einleitung
Anwendungsrahmen
Formulare
Standardinhalte
Sonstiges
Galerie
![Page 10: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/10.jpg)
JAVA-DESKTOP – QUO VADIS?
![Page 11: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/11.jpg)
Java-Desktop
▪ Swing
▪ Swing + Rahmenwerk + Bibliotheken
▪ JavaFX
▪ JavaFX + Rahmenwerk + Bibliotheken
▪ SWT + JFace
▪ SWT + JFace + Eclipse RCP
![Page 12: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/12.jpg)
Moderne Implementierung
▪ Node.js (JavaScript-Laufzeitumgebung)
▪ Electron (in etwa: Chrome stand-alone)
▪ JavaScript-Bibliotheken (z. B. React)
▪ JavaScript-Rahmenwerk (z. B. Angular)
![Page 13: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/13.jpg)
Typische Geschäftsanwendung
▪ Aktions- oder datenzentrierte Navigation
▪ Suchen und Filtern
▪ Ergebnistabellen/-listen
▪ Vorschau und Detailanzeigen
▪ Editoren
▪ Standarddialoge für Nachrichten, Fragen, Auswahl, Kleineingaben
![Page 14: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/14.jpg)
Was haben wir vor uns?
▪ Anwender sind aus dem Web-Alltagsgebrauch mehr und mehr gute Gestaltung gewohnt. Und fordern die ein.
▪ Neue Gerätetypen und -größen
▪ Touch-Bedienung
▪ High DPI
▪ Neue Implementierungstechniken (Angular)
![Page 15: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/15.jpg)
Fragen
▪ Wie kann ich Investitionen schützen?
▪ Wie geht es mit meinem Team weiter?
▪ Wie kann ich mein Team bei Laune halten?
▪ Wie kann ich zeitgemäße Software liefern?
▪ Wie umgehen mit der ungewissen Lage?
![Page 16: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/16.jpg)
Renovieren, umziehen, neu bauen?
![Page 17: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/17.jpg)
Möglichkeiten
▪ Toolkit wechseln
▪ Gestaltung verbessern
▪ Implementierung vereinfachen
▪ Absprung in neue Welt vorbereiten
▪ Technische Investitionen schützen
▪ Gestalterische Investitionen schützen
▪ Handfertigung -> Industrielle Fertigung
![Page 18: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/18.jpg)
Brauchbaren Tech-Stack finden
▪ Worüber wird gesprochen?
Siehe Google Trends
▪ Wo tut sich was?
Siehe Entwickler-Mailing-Listen
▪ Wo fließt das große Geld hin?
Google, Facebook, Großbanken vs. „Hansels“
![Page 19: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/19.jpg)
Toolkit-Wechsel
Swing ,JavaFX,SWT,GWT, Angular, React
„Roher“ Code
Abstrahiert
Standardisiert Standardisiert
![Page 20: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/20.jpg)
![Page 21: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/21.jpg)
![Page 22: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/22.jpg)
Toolkit-unabhängiger Code
new ListViewBuilder()
.padding(Paddings.TOP_LEVEL)
.labelText("_Lager:")
.listView(lagerTable))
.listBar(newButton, editButton, deleteButton)
.build();
![Page 23: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/23.jpg)
Was ist in den letzten 20 UI-Jahren passiert?
![Page 24: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/24.jpg)
Bessere Gestaltung I
▪ Aktions-zentrierte Sichten (Win XP)
▪ [Vor-]/Zurück-Navigation (Browser)
▪ Ein-Feld-Suchen (Google), komplex wenn nötig
▪ Kurze Wege im Bildschirmfluss
Hub-Seiten als Start (Windows 10)
Globale Suche (Apple Spotlight)
▪ Anzeigesichten vor Editoren (iOS, Web)
▪ Zeitgemäßer Komponentensatz
▪ Standarddialoge (Vista)
![Page 25: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/25.jpg)
Bessere Gestaltung II
▪ Kluge Suchvorschläge (Google Suggest)
▪ Tabbed Browsing (Chrome)
▪ Gute asynchrone Meldungen (Action Center)
▪ Flache, reduzierte Oberfläche
▪ Einheitliches Bedienkonzept Desktop/Web
![Page 26: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/26.jpg)
Nutze Gestaltung als Brücke von alt zu neu!
![Page 27: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/27.jpg)
Gliederung
Einleitung
Anwendungsrahmen
Formulare
Standardinhalte
Sonstiges
Galerie
![Page 28: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/28.jpg)
Gute Stilführer für Alle
▪ UWP (Microsoft Design Language 2)
▪ Android (Google Material Design)
▪ iOS (Apple Design Specification)
▪ Zeigen, klären, leiten:
Was ist eine App?
Wie sehen Apps aus?
Wie bedient man sie?
![Page 29: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/29.jpg)
Microsofts UWP (Windows 10)
▪ Unterscheidet Apps nach: Typ, Größe, Struktur
▪ Anwendungsaufbau
Navigation
Inhalte
Kommandos
▪ Navigationskonzepte
▪ Seitenfluss
▪ Beantwortet viele konkrete Gestaltungsfragen
![Page 30: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/30.jpg)
Anwendungsfenster als:
▪ Splash
▪ Anmeldung
▪ Primärfenster
![Page 31: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/31.jpg)
![Page 32: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/32.jpg)
![Page 33: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/33.jpg)
![Page 34: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/34.jpg)
Seitenaufbau
![Page 35: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/35.jpg)
![Page 36: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/36.jpg)
Peer-to-Peer-Navigation
![Page 37: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/37.jpg)
![Page 38: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/38.jpg)
Hierarchische Navigation
![Page 39: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/39.jpg)
![Page 40: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/40.jpg)
![Page 41: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/41.jpg)
Primär-/Sekundärnavigation
![Page 42: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/42.jpg)
![Page 43: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/43.jpg)
![Page 44: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/44.jpg)
Primär-/Sekundärnavigation II
![Page 45: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/45.jpg)
![Page 46: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/46.jpg)
![Page 47: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/47.jpg)
Seiten-Orientierung
▪ Anwendungen werden flacher
▪ Reduziert Dialog-Kaskaden
▪ Bringt Lebenszyklus für Views
![Page 48: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/48.jpg)
![Page 49: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/49.jpg)
![Page 50: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/50.jpg)
Seiten-Orientierung (II)
▪ Commit-Modell kann bleiben
▪ Oder ablösen durch „Fertig“ oder „Zurück“
![Page 51: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/51.jpg)
![Page 52: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/52.jpg)
![Page 53: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/53.jpg)
Page-Interface (Swing)
JComponent getTopAppBar();
JComponent getContent();
JComponent getBottomAppBar();
void onNavigatedTo(Object);
boolean onNavigatingFrom();
void onNavigatedFrom();
![Page 54: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/54.jpg)
Page-Interface (Swing)
JComponent getTopAppBar();
JComponent getContent();
JComponent getBottomAppBar();
void onNavigatedTo(NavEventArgs, Object);
boolean onNavigatingFrom(NavEventArgs);
void onNavigatedFrom();
![Page 55: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/55.jpg)
DESKTOP VS. WEB
![Page 56: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/56.jpg)
![Page 57: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/57.jpg)
![Page 58: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/58.jpg)
Pull Down-Menü ersetzen
▪ Aufgaben-orientierte Startseite(n)
▪ Gemischte Startseiten (Aktionen und Daten)
![Page 59: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/59.jpg)
![Page 60: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/60.jpg)
![Page 61: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/61.jpg)
![Page 62: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/62.jpg)
Screenflow verkürzen: Start
▪ Häufige Aktionen
▪ Zuletzt verwendete Daten
▪ Anstehende Aufgaben
▪ Wichtige Hinweise, Termine
![Page 63: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/63.jpg)
![Page 64: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/64.jpg)
Hub, HubSection, Tile
![Page 65: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/65.jpg)
Hub-Code I
new Hub.Builder()
.beginSection("Aktuelles")
.beginTile()
.name("Aufgaben")
.number(3)
.numberUnit("Überfällig")
.error()
.medium()
.endTile()
.beginTile()
…
.endTile()
…
.endSection()
.build();
![Page 66: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/66.jpg)
Hub-Code II
new ObjectTile.Builder()
.name("Nachrichten")
.logo(WindowsIcons.MAIL)
.title(<Einzeiler>)
.subtitle(<Mehrzeiler>)
.number(1000)
.numberUnit("EUR")
.badge(3) // auch: ALERT, BUSY, …
.wide()
.build();
![Page 67: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/67.jpg)
Navigationsbäume ersetzen
▪ Hub, HubSection, Tile
▪ Sekundärnavigation
▪ Master-Liste
![Page 68: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/68.jpg)
![Page 69: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/69.jpg)
![Page 70: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/70.jpg)
![Page 71: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/71.jpg)
![Page 72: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/72.jpg)
Navigationsbaum ersetzen II
▪ Ebene 1: HubSection („Module“), Tile
▪ Ebene 2,3: HubSection, Tile
![Page 73: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/73.jpg)
![Page 74: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/74.jpg)
![Page 75: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/75.jpg)
![Page 76: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/76.jpg)
![Page 77: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/77.jpg)
Tabbed Browsing
▪ Häufig: mehrere Dokumente gleichzeitig
▪ Zurück-Navigation ist innerhalb des Tabs
▪ Öffnen im selben oder einem anderen Tab
![Page 78: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/78.jpg)
![Page 79: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/79.jpg)
![Page 80: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/80.jpg)
![Page 81: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/81.jpg)
![Page 82: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/82.jpg)
![Page 83: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/83.jpg)
![Page 84: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/84.jpg)
![Page 85: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/85.jpg)
Meine Einschätzung zur UWP
▪ Sieht modern aus, fühlt sich gut an
▪ Integriert sich gut in Windows 7, 8, 10
▪ Die UWP-Doku sortiert das Denken/Gestalten
▪ Bereitet einen Wechsel auf Web vor
▪ Erleichtert Umgang mit Fachdienst
▪ Überfliegen der UWP-Doku reicht
▪ Umbaukosten sind akzeptabel
Einmalaufwand für Navigation
Optionaler Aufwand pro Inhaltsseite
![Page 86: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/86.jpg)
Die UWP lohnt für Java-Gestaltung!
![Page 87: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/87.jpg)
Alternativen zur UWP
▪ Googles Material Design
▪ iOS
▪ Die UWP ist näher dran an Windows-Desktop
![Page 88: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/88.jpg)
Swing mit Windows 10
▪ Windows 10 bringt neuen Look (Metro)
▪ Neue Komponenten
▪ Größere Grundschrift (16pt statt 12pt)
▪ Navigations- und Kommandobereiche größer als klassische Swing-Inhalte
Optional die Inhalte vergrößert darstellen (125%)
![Page 89: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/89.jpg)
![Page 90: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/90.jpg)
![Page 91: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/91.jpg)
Gliederung
Einleitung
Anwendungsrahmen
Formulare
Standardinhalte
Sonstiges
Galerie
![Page 92: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/92.jpg)
Geräteunabhängiges Layout
▪ Große Unterschiede der
Bildschirmgröße
Hardware-Auflösung (96 – 800 dpi)
▪ Gestaltung muss umgeordnet werden
▪ Überfordert Standard-Java-LayoutManager
▪ Praktikable Lösung für Formulare:
Formularstruktur beschreiben statt fertiger Layouts
![Page 93: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/93.jpg)
![Page 94: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/94.jpg)
![Page 95: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/95.jpg)
![Page 96: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/96.jpg)
![Page 97: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/97.jpg)
![Page 98: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/98.jpg)
![Page 99: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/99.jpg)
Formularaufbau SAP OpenUI5
▪ Section – Tabs oder Anchors
▪ Subsection – horizontale Trennung
▪ Block – Umbruch-Einheit
▪ Group – logische Einheit
▪ Row – Zeilenverbund (z. B. PLZ, Ort)
▪ Item – unterste Ebene: Label, Komponente
![Page 100: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/100.jpg)
Formular-Code
new SimpleForm.Builder()
.title("Payment Information")
.beginGroup("Credit Card")
.beginItem()
.label("_Name on card")
.component(nameOnCardField)
.required()
.endItem()
.beginRow()
…
.endRow()
…
.endGroup()
.build();
![Page 101: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/101.jpg)
Anwendungsfälle
▪ Desktop-Formulare sind „Kraut und Rüben“
▪ Anforderung: kleine und große Desktops
▪ [Vorbereitung der] Geräteunabhängigkeit
▪ Möglicher Wechsel der Komponenten
Label + Komponente
Komponente enthält Label (z. B. Material Designs Eingabekomponente)
![Page 102: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/102.jpg)
![Page 103: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/103.jpg)
Gliederung
Einleitung
Anwendungsrahmen
Formulare
Standardinhalte
Sonstiges
Galerie
![Page 104: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/104.jpg)
Hand- vs. Industrieproduktion
▪ Visuelle Muster
Bretter (Toolkit-Komponenten)
Möbel: Schrank, Herd
Raum: Küche, Bad
Gebäudetypen: Einfamilienhaus, Mehrfamilienhaus
![Page 105: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/105.jpg)
SAP Floorplans
▪ List Report▪ Object Page▪ Initial Page▪ Worklist▪ Wizard▪ Overview Page▪ Analytical List Page
▪ Herausragende Quelle für Features Gestaltungsdetails
![Page 106: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/106.jpg)
List Report-Spezifikation
▪ Usage
▪ Structure
▪ Responsiveness and Adaptiveness
▪ Guidelines
Header Title: Variants, Filter, Toolbar
Header Content: Expand/Collapse, Filter Bar
Content Area: Layout, Icon Tab Bar, Table Toolbar, Table, Navigation, Footer Toolbar
▪ Actions
![Page 107: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/107.jpg)
![Page 108: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/108.jpg)
![Page 109: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/109.jpg)
![Page 110: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/110.jpg)
![Page 111: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/111.jpg)
![Page 112: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/112.jpg)
![Page 113: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/113.jpg)
![Page 114: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/114.jpg)
![Page 115: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/115.jpg)
Object Page
▪ Konsistent, standardisiert, flexibel
▪ Günstige Konstruktion
▪ Elemente:
Titel, Untertitel, Überschrift
Kopfdaten (Facetten)
Kopf-AppBar
Inhalt – flach, Tabs oder Anchors
Fuß-AppBar
![Page 116: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/116.jpg)
![Page 117: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/117.jpg)
![Page 118: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/118.jpg)
![Page 119: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/119.jpg)
![Page 120: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/120.jpg)
Object Page-Code
class HealthPage extends ObjectPage {
...
HealthPage(HealthPerson p) {
this.person = p;
.setBreadcrumbs(p.s1, p.s2, p.s3);
.setTitle(p.getName());
.setSubtitle("%s - %s", p.s4, p.s5);
.setHeaderContent(this::buildFacets);
.setHeaderAppBar(this::buildAppBar);
.setContent(this::buildTabs);
}
}
![Page 121: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/121.jpg)
FacetBar-Code
new FacetBar.Builder()
.beginTextFacet()
.text(person.getAdresse())
.endTextFacet()
.beginFormFacet()
.beginItem()
.label("Funktion")
.text(person.getLanguage())
.endItem()
…
.endFormFacet()
.beginImageFacet()
…
.endImageFacet()
.build();
![Page 122: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/122.jpg)
Initial Page
▪ Finden eines einzelnen Objektes
▪ Z. B. Scan am Warenausgang
![Page 123: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/123.jpg)
![Page 124: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/124.jpg)
![Page 125: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/125.jpg)
Worklist
▪ Liste von Objekten, die abgearbeitet werden
▪ Z. B. Urlaubsanträge, Batchdateien
![Page 126: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/126.jpg)
![Page 127: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/127.jpg)
DIALOGE
![Page 128: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/128.jpg)
![Page 129: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/129.jpg)
UX Guide-Dialogarten
Dialog
Eigenschaft Assistent Aufgabe
![Page 130: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/130.jpg)
![Page 131: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/131.jpg)
Dialoge – Basis
Object result = new TaskPaneBuilder()
.owner(evt)
.title(“Confirm Delete”)
.mainInstructionText(
“Do you want to delete %s?”, objName)
.commitCommands(CommandValue.YES, CommandValue.NO)
.showDialog();
![Page 132: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/132.jpg)
Dialoge - Style Guide-API
boolean proceed = new MessagePaneBuilder()
.owner(evt)
.title(“Confirm Delete”)
.mainInstructionText(
“Do you want to delete %s?”, objName)
.showConfirmation();
![Page 133: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/133.jpg)
Dialoge - Standard
boolean proceed = new StandardPaneBuilder()
.owner(evt)
.showDeleteConfirmation(objName);
![Page 134: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/134.jpg)
STANDARD-EINGABETECHNIKEN
![Page 135: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/135.jpg)
![Page 136: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/136.jpg)
![Page 137: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/137.jpg)
![Page 138: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/138.jpg)
![Page 139: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/139.jpg)
Gliederung
Einleitung
Anwendungsrahmen
Formulare
Standardinhalte
Sonstiges
Galerie
![Page 140: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/140.jpg)
„Allgemein“-Tab -> Objektkopf
▪ Überschaubare Anzahl von Eigenschaften
▪ Read-only
▪ Identifizieren das Objekt
![Page 141: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/141.jpg)
![Page 142: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/142.jpg)
![Page 143: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/143.jpg)
Tab -> Eigene Seite
▪ Selten verwendeter Tab
▪ Eigenes Thema
▪ Komplexe Teilaufgabe
![Page 144: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/144.jpg)
![Page 145: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/145.jpg)
Tabelle -> Liste
▪ Mehrzeilige Listenzelle statt Spalten
▪ Bei geringer Breite lohnenswert bzw. Pflicht
▪ Ändert die Lesbarkeit
▪ Sortieren und Gruppieren ist unwichtig oder muss anders gelöst werden (AppBar)
▪ Wenige [wichtige] Spalten
▪ Bei Master-Details: identifizierende Spalten in den Master
weitere Spalten in die Details
![Page 146: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/146.jpg)
![Page 147: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/147.jpg)
![Page 148: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/148.jpg)
Standard-Renderer (Swing)
class Renderer
extends DoubleLineRenderer<RowObject> {
public void setValue(RowObject row) {
.setGraphic(toIcon(row.getSeverity()));
.setPrimaryText(row.getName());
.setSecondaryText("%s (%s)",
row.s1(), row.s2());
.setNumber(row.getNumber());
.setNumberUnit(row.getUnit());
.setState(toState(row.getState()));
}
}
![Page 149: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/149.jpg)
Tabelle/Liste einbetten
▪ Wenige Zeilen
▪ Z. B. Adressen, Kontaktdaten, Rollen
▪ Im Editor
1. Wenige Zellen: direkt editierbar (Kontaktdaten)
2. Viele Zellen: read-only expandierbar (Adresse)
3. Komplexes Objekt: read-only->Seite (Partner)
![Page 150: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/150.jpg)
![Page 151: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/151.jpg)
![Page 152: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/152.jpg)
![Page 153: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/153.jpg)
![Page 154: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/154.jpg)
![Page 155: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/155.jpg)
Gliederung
Einleitung
Anwendungsrahmen
Formulare
Standardinhalte
Sonstiges
Galerie
![Page 156: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/156.jpg)
TAXI
![Page 157: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/157.jpg)
![Page 158: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/158.jpg)
![Page 159: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/159.jpg)
AKTIONS-ORIENTIERT
![Page 160: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/160.jpg)
![Page 161: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/161.jpg)
KACHEL-ALTERNATIVE (SAP)
![Page 162: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/162.jpg)
![Page 163: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/163.jpg)
TODO
![Page 164: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/164.jpg)
![Page 165: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/165.jpg)
![Page 166: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/166.jpg)
![Page 167: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/167.jpg)
VABNET
![Page 168: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/168.jpg)
![Page 169: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/169.jpg)
![Page 170: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/170.jpg)
![Page 171: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/171.jpg)
Zusammenfassung
▪ UI-Techniken ändern sich schnell
▪ Design-Sprachen entwickeln sich langsam
▪ Nutze Design als Brücke von neu zu alt!
▪ Kenne Material Design und UWP!
▪ UWP lohnt für den Desktop
▪ Kenne SAPs Floorplans!
![Page 172: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/172.jpg)
Referenzen
Googles Material Design▪ „Material Design“▪ Material Design->Communication->Writing
Microsoft Windows 10 (UWP)▪ docs.microsoft.com/de-de/windows/uwp▪ „Navigationsdesigngrundlagen UWP“
SAP Floorplans▪ „SAP Floorplans“
![Page 173: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/173.jpg)
Demo: Showcase
JGoodies.com -> Downloads -> Demos
▪ Formularrahmenwerk
▪ Floorplans in Swing
▪ Standarddialoge
▪ Komponenten
▪ Visuelle und technische Muster
![Page 174: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/174.jpg)
Referenzen
JGoodies.com -> Downloads -> Presentations
▪ Moderne Gestaltung für Java:
Weitere Screenshots
Mehr Überarbeitungen
![Page 175: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/175.jpg)
Video
Auszeichnung dieses Vortrags von der W-JAX 2019
▪ https://youtu.be/_urHgEJkfFk
![Page 176: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/176.jpg)
Mehr zur menschlichen Seite
JAX-Video:
„Warum so viele kluge Leute so schlechte Oberflächen entwickeln“
![Page 177: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/177.jpg)
FRAGEN UND ANTWORTEN
![Page 178: Karsten Lentzsch JGoodies MODERNE FRONTEND ... Frontend...Android (Google Material Design) iOS (Apple Design Specification) Zeigen, klären, leiten: Was ist eine App? Wie sehen Apps](https://reader033.fdokument.com/reader033/viewer/2022042915/5f5136767f5b5550255fbd45/html5/thumbnails/178.jpg)
MODERNE FRONTEND-GESTALTUNG (VON SWING INS WEB)
Karsten Lentzsch – JGoodies