Karsten Lentzsch JGoodies MODERNE GESTALTUNG FÜR DEN JAVA-DESKTOP

Transkript

1 Karsten Lentzsch JGoodies MODERNE GESTALTUNG FÜR DEN JAVA-DESKTOP

2 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

3 Vorher

4 Nachher

5 Nachher

6 Vorher

7 Nachher

8 Ziel Machbare moderne Gestaltung für den Java-Desktop kennenlernen

9 Gliederung Einleitung Suche Read-only-Sichten Detailtypographie Objektdarstellung (UI5) Universal Windows Platform (UWP) Kacheln Tabbed Browsing

10 JAVA-DESKTOP QUO VADIS?

11 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)

12 Was sollen wir tun?

13 Renovieren, umziehen, neu bauen?

14 Möglichkeiten Toolkit wechseln Gestaltung verbessern Implementierung vereinfachen Absprung in neue Welt vorbereiten Investitionen schützen Handfertigung -> Industrielle Fertigung

15 Universal Desktop API return new ListViewBuilder().padding(Paddings.TOP_LEVEL).labelText("_Contacts:").listView(contactsTable)).listBar(newButton, editbutton, deletebutton).build();

16 Prinzip Swing JavaFX Standardisiert Standardisiert Abstrahiert Roher Code

17 Prinzip Swing Standardisiert,JavaFX,GWT, Angular, React Standardisiert Abstrahiert Roher Code

18 Visuelle Verbote Pfusche nicht mit Farben! Pfusche nicht mit Schriften! [Sei vorsichtig mit Icons!]

19

20 Visuelle Gebote (Kurz) Reduziere auf das Wesentliche! Rahmen weg

21

22 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)

23 Modernisierung II Kluge Suchvorschläge (Google Suggest) Tabbed Browsing (Chrome) Gute asynchrone Meldungen (Action Center) Einheitliches Bedienkonzept Desktop/Web Flache, reduzierte Oberfläche

24 Gliederung Einleitung Suche Read-only-Sichten Detailtypographie Objektdarstellung Universal Windows Platform (UWP) Kacheln Tabbed Browsing

25

26

27

28

29

30

31

32

33

34

35 Gliederung Einleitung Suche Read-only-Sichten Detailtypographie Objektdarstellung Universal Windows Platform (UWP) Kacheln Tabbed Browsing

36 EDITOR-ARTEN

37

38

39

40

41

42

43

44

45

46 AKTIONS-ORIENTIERT

47

48 READ-ONLY-ANSICHT I

49

50 READ-ONLY-ANSICHT II

51 READ-ONLY-ANSICHT II

52 Gliederung Einleitung Suche Read-only-Sichten Detailtypographie Objektdarstellung Universal Windows Platform (UWP) Kacheln Tabbed Browsing

53

54

55

56

57

58

59

60

61 FACT SHEETS

62

63

64

65

66

67

68 NOCHMAL FACT SHEETS

69

70

71 Gliederung Einleitung Suche Read-only-Sichten Detailtypographie Objektdarstellung Universal Windows Platform (UWP) Kacheln Tabbed Browsing

72

73

74

75

76

77

78

79 Objektkopf-Code return new ObjectHeader.Builder().title(" ").subtitle(" ").number(" ").numberunit(" ").addattribute().label("arbeit").text(" ").done().addStatus().text("Offen").state(ERROR).done().build();

80 TESTS

81

82

83 CRM

84

85

86 UI5 INTEGRIEREN

87

88

89 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

90 FALKE

91

92

93

94 Gliederung Einleitung Suche Read-only-Sichten Detailtypographie Objektdarstellung Universal Windows Platform (UWP) Kacheln Tabbed Browsing

95

96

97

98

99 Microsofts UWP Unterscheidet Apps nach Typ Größe Struktur Unterteilt Apps in Navigation Inhalte Kommandos

100 Seitenaufbau

101 TODO

102

103

104

105 Peer-to-Peer-Navigation

106 CONTRACT

107

108

109

110 CASHING

111

112

113 Seiten-Orientierung Anwendungen werden flacher Reduziert Dialog-Kaskaden Bringt Lebenszyklus für Views

114

115

116 Page-Interface JComponent gettopappbar(); JComponent getcontent(); JComponent getbottomappbar(); void onnavigatedto(object); boolean onnavigatingfrom(); void onnavigatedfrom();

117 VABNET

118

119

120

121 Hierarchische Navigation

122

123

124 Primär-/Sekundärnavigation

125 POWER

126

127

128

129

130 TAXI

131

132

133 DESKTOP VS. WEB

134

135

136 UWP-Doku Anwendungsaufbau Navigationskonzepte Seitenfluss Beantwortet viele konkrete Gestaltungsfragen

137 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

138 Die UWP lohnt für Java-Gestaltung!

139 Alternativen zur UWP Googles Material Design ios Die UWP ist näher dran an Windows-Desktop

140 Gliederung Einleitung Suche Read-only-Sichten Detailtypographie Objektdarstellung Universal Windows Platform (UWP) Kacheln Tabbed Browsing

141 NOCHMAL TAXI

142

143

144 Hub, HubSection, Tile

145 HUB ALS ABKÜRZUNG

146

147 Hub-Code I return new Hub.Builder().addSection("Aktuelles").addTile().name("Aufgaben").number(3).numberUnit("Überfällig").error().medium().done().done().build();

148 Hub-Code II.addTile(new IconicTile.Builder().name("Nachrichten").logo("Windows:Mail").badge(3).wide().build())

149

150

151 HUB ALS BAUMERSATZ

152

153

154

155

156 Gliederung Einleitung Suche Read-only-Sichten Detailtypographie Objektdarstellung Universal Windows Platform (UWP) Kacheln Tabbed Browsing

157

158 HÄUFIGE AUFGABE: MEHRERE DOKUMENTE GLEICHZEITIG

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173 DIALOGE

174

175 UX Guide-Dialogarten Dialog Eigenschaft Assistent Aufgabe

176

177 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();

178 Dialoge - Style Guide-API boolean proceed = new MessagePaneBuilder().owner(evt).title( Confirm Delete ).maininstructiontext( Do you want to delete %s?, objname).showconfirmation();

179 Dialoge - Standard boolean proceed = new StandardPaneBuilder().owner(evt).showDeleteConfirmation(objName);

180 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

181 SONSTIGES

182 Java 8 Methodenrefs fördern Code-Organisation Event-Handling GUI-Konfiguration

183 ActionListener FX private void initeventhandling() { view.newbutton.setonaction( this::onnewperformed ); view.editbutton.setonaction( this::oneditperformed ); } view.deletebutton.setonaction( this::ondeleteperformed )

184 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

185 Ablösung von Java Web Start? Java-Laufzeitparameter Kontrolle über die JRE-Version Ersatz: z. B. GetDown

186 Java 10 Ende des Java 9- Kill -Schalters

187 Windows 10 Neuer Look (Metro) Komponenten, Komponenten-Styling, Icons Bildschirmaufbau Neue Bedienmetaphern

188 Geräte Tablet Telefon Wand-Anzeige Neue Gerätegrößen

189 High DPI Geräte mit Hardware-Auflösung > 200 dpi Erweiterte Anforderung an die GUI-Skalierung Geräteabstand Systemweite Skalierung

190 Sonstiges Mac IconBar Touch-Fähigkeit der GUI Touch-Gesten (Zwei- und Drei-Finger)

191 Demos: Showcase JGoodies.com -> Downloads -> Demos UI5 in Java Komponenten Standarddialoge Muster Referenzimplementierungen für Presentation Model und MVP

192 Referenzen UWP dev.windows.com/de-de/design Navigationsdesigngrundlagen UWP UI5 Fiori Apps Library

193 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

194 Mehr zur menschlichen Seite JAX-Video: Warum so viele kluge Leute so schlechte Oberflächen entwickeln

195 FRAGEN UND ANTWORTEN

196 Karsten Lentzsch JGoodies MODERNE GESTALTUNG FÜR DEN JAVA-DESKTOP