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