Karsten Lentzsch JGoodies MODERNE GESTALTUNG FÜR DEN JAVA … · JGoodies: Karsten Lentzsch...
Transcript of Karsten Lentzsch JGoodies MODERNE GESTALTUNG FÜR DEN JAVA … · JGoodies: Karsten Lentzsch...
MODERNE GESTALTUNG FÜR DEN JAVA-DESKTOP
Karsten Lentzsch – JGoodies
JGoodies: Karsten Lentzsch
▪ Java-GUI-Bibliotheken und -Rahmenwerk
▪ Beispielanwendungen
▪ Berate zu Java-Desktop
▪ Helfe beim Oberflächen-Bau
▪ Didaktik und Produktionskosten
▪ Swing. Und nun?
Renovieren, umziehen, neu bauen
Vorher
Nachher
Nachher
Vorher
Nachher
Machbare moderne Gestaltung
für den Java-Desktop kennenlernen
Ziel
Gliederung
Einleitung
Suche
Read-only-Sichten
Detailtypographie
Objektdarstellung (UI5)
Universal Windows Platform (UWP)
Kacheln
Tabbed Browsing
JAVA-DESKTOP – QUO VADIS?
Was haben wir vor uns?
▪ Anwender sind aus dem Web-Alltagsgebrauch mehr und mehr gute Gestaltung gewohnt. Und fordern die ein.
▪ Neue Toolkits
▪ Neue Gerätetypen
▪ High DPI
▪ Java 9, Java 10
▪ Gute Stilführer für alle (UWP, Material Design)
Was sollen wir tun?
Renovieren, umziehen, neu bauen?
Möglichkeiten
▪ Toolkit wechseln
▪ Gestaltung verbessern
▪ Implementierung vereinfachen
▪ Absprung in neue Welt vorbereiten
▪ Investitionen schützen
▪ Handfertigung -> Industrielle Fertigung
Universal Desktop API
return new ListViewBuilder()
.padding(Paddings.TOP_LEVEL)
.labelText("_Contacts:")
.listView(contactsTable))
.listBar(newButton, editButton, deleteButton)
.build();
Prinzip
Swing JavaFX
„Roher“ Code
Abstrahiert
Standardisiert Standardisiert
Prinzip
Swing ,JavaFX,GWT, Angular, React
„Roher“ Code
Abstrahiert
Standardisiert Standardisiert
Visuelle Verbote
▪ Pfusche nicht mit Farben!
▪ Pfusche nicht mit Schriften!
▪ [Sei vorsichtig mit Icons!]
Visuelle Gebote (Kurz)
▪ Reduziere auf das Wesentliche!
▪ Rahmen weg
Modernisierung 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)
Modernisierung II
▪ Kluge Suchvorschläge (Google Suggest)
▪ Tabbed Browsing (Chrome)
▪ Gute asynchrone Meldungen (Action Center)
▪ Einheitliches Bedienkonzept Desktop/Web
▪ Flache, reduzierte Oberfläche
Gliederung
Einleitung
Suche
Read-only-Sichten
Detailtypographie
Objektdarstellung
Universal Windows Platform (UWP)
Kacheln
Tabbed Browsing
Gliederung
Einleitung
Suche
Read-only-Sichten
Detailtypographie
Objektdarstellung
Universal Windows Platform (UWP)
Kacheln
Tabbed Browsing
EDITOR-ARTEN
AKTIONS-ORIENTIERT
READ-ONLY-ANSICHT I
READ-ONLY-ANSICHT II
READ-ONLY-ANSICHT II
Gliederung
Einleitung
Suche
Read-only-Sichten
Detailtypographie
Objektdarstellung
Universal Windows Platform (UWP)
Kacheln
Tabbed Browsing
FACT SHEETS
NOCHMAL FACT SHEETS
Gliederung
Einleitung
Suche
Read-only-Sichten
Detailtypographie
Objektdarstellung
Universal Windows Platform (UWP)
Kacheln
Tabbed Browsing
Objektkopf-Code
return new ObjectHeader.Builder()
.title("…")
.subtitle("…")
.number("…")
.numberUnit("…")
.addAttribute()
.label("Arbeit")
.text("+49 431 18761")
.done()
.addStatus()
.text("Offen")
.state(ERROR)
.done()
.build();
TESTS
CRM
UI5 INTEGRIEREN
Meine Einschätzung zu UI5
▪ Sieht nach Business aus
▪ Etliche gute Ideen
▪ Überfliegen der „Build“-Seiten reicht
▪ Teams sind nicht hellauf begeistert
Aufwand pro Inhaltsseite
FALKE
Gliederung
Einleitung
Suche
Read-only-Sichten
Detailtypographie
Objektdarstellung
Universal Windows Platform (UWP)
Kacheln
Tabbed Browsing
Microsofts UWP
▪ Unterscheidet Apps nach
Typ
Größe
Struktur
▪ Unterteilt Apps in
Navigation
Inhalte
Kommandos
Seitenaufbau
TODO
Peer-to-Peer-Navigation
CONTRACT
CASHING
Seiten-Orientierung
▪ Anwendungen werden flacher
▪ Reduziert Dialog-Kaskaden
▪ Bringt Lebenszyklus für Views
Page-Interface
JComponent getTopAppBar();
JComponent getContent();
JComponent getBottomAppBar();
void onNavigatedTo(Object);
boolean onNavigatingFrom();
void onNavigatedFrom();
VABNET
Hierarchische Navigation
Primär-/Sekundärnavigation
POWER
TAXI
DESKTOP VS. WEB
UWP-Doku
▪ Anwendungsaufbau
▪ Navigationskonzepte
▪ Seitenfluss
▪ Beantwortet viele konkrete Gestaltungsfragen
Meine Einschätzung
▪ 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
Die UWP lohnt für Java-Gestaltung!
Alternativen zur UWP
▪ Googles Material Design
▪ iOS
▪ Die UWP ist näher dran an Windows-Desktop
Gliederung
Einleitung
Suche
Read-only-Sichten
Detailtypographie
Objektdarstellung
Universal Windows Platform (UWP)
Kacheln
Tabbed Browsing
NOCHMAL TAXI
Hub, HubSection, Tile
HUB ALS ABKÜRZUNG
Hub-Code I
return new Hub.Builder()
.addSection("Aktuelles")
.addTile()
.name("Aufgaben")
.number(3)
.numberUnit("Überfällig")
.error()
.medium()
.done()
.done()
.build();
Hub-Code II
.addTile(new IconicTile.Builder()
.name("Nachrichten")
.logo("Windows:Mail")
.badge(3)
.wide()
.build())
HUB ALS BAUMERSATZ
Gliederung
Einleitung
Suche
Read-only-Sichten
Detailtypographie
Objektdarstellung
Universal Windows Platform (UWP)
Kacheln
Tabbed Browsing
HÄUFIGE AUFGABE:MEHRERE DOKUMENTE GLEICHZEITIG
DIALOGE
UX Guide-Dialogarten
Dialog
Eigenschaft Assistent Aufgabe
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();
Dialoge - Style Guide-API
boolean proceed = new MessagePaneBuilder()
.owner(evt)
.title(“Confirm Delete”)
.mainInstructionText(
“Do you want to delete %s?”, objName)
.showConfirmation();
Dialoge - Standard
boolean proceed = new StandardPaneBuilder()
.owner(evt)
.showDeleteConfirmation(objName);
Auflösungsunabhängigkeit
▪ Keine Pixel im Screen-Design!
Statt dessen etwa DLU oder Effective Pixel
▪ Skalierbare Icons
FontAwesome
SAP OpenUI5 Icons
Windows 10/UWP Icons
SONSTIGES
Java 8
▪ Methodenrefs fördern Code-Organisation
Event-Handling
GUI-Konfiguration
ActionListener FX
private void initEventHandling() {
view.newButton.setOnAction(
this::onNewPerformed
);
view.editButton.setOnAction(
this::onEditPerformed
);
view.deleteButton.setOnAction(
this::onDeletePerformed
)
}
Java 9/Modulsystem
▪ Etliche Klassen nicht mehr zugänglich
▪ Drittanbieter-Bibliotheken
brauchen Updates oder
funktionieren nicht mehr
▪ Beispiele
[Noch] Kein JGoodies Binding für JavaFX
Tod guter Schriften unter Windows
Halber Tod eines guten Windows L&fs
Ablösung von Java Web Start?
▪ Java-Laufzeitparameter
▪ Kontrolle über die JRE-Version
▪ Ersatz: z. B. GetDown
Java 10
▪ Ende des Java 9-“Kill“-Schalters
Windows 10
▪ Neuer Look (Metro)
Komponenten,
Komponenten-Styling,
Icons
Bildschirmaufbau
▪ Neue Bedienmetaphern
Geräte
▪ Tablet
▪ Telefon
▪ Wand-Anzeige
▪ Neue Gerätegrößen
High DPI
▪ Geräte mit Hardware-Auflösung > 200 dpi
▪ Erweiterte Anforderung an die GUI-Skalierung
Geräteabstand
Systemweite Skalierung
Sonstiges
▪ Mac IconBar
▪ Touch-Fähigkeit der GUI
▪ Touch-Gesten (Zwei- und Drei-Finger)
Demos: Showcase
JGoodies.com -> Downloads -> Demos
▪ UI5 in Java
▪ Komponenten
▪ Standarddialoge
▪ Muster
▪ Referenzimplementierungen für Presentation Model und MVP
Referenzen
UWP
▪ dev.windows.com/de-de/design
▪ „Navigationsdesigngrundlagen UWP“
UI5
▪ www.build.me
▪ „Fiori Apps Library“
Referenzen
JGoodies.com -> Downloads -> Presentations
▪ Visuell: Effektiv gestalten mit Swing
▪ Muster: Desktop-Muster und Datenbindung
▪ Implementierung: Java UI Design with Style
▪ Meta Design: Effizient gestalten mit Swing
▪ Rahmenwerk: JSR 296 –Swing App Framework
Mehr zur menschlichen Seite
JAX-Video:
„Warum so viele kluge Leute so schlechte Oberflächen entwickeln“
FRAGEN UND ANTWORTEN
MODERNE GESTALTUNG FÜR DEN JAVA-DESKTOP
Karsten Lentzsch – JGoodies