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

4

5

6

7 Nachher

8 SWING -> JAVAFX

9

10 JAVA DESKTOP QUO VADIS?

11 MODERNE GESTALTUNG

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

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

14 Investitionsschutz Technik-Muster Implementierung Bedienmuster Visuelle Muster

15

16 Typische Geschäftsanwendung Aktions- oder datenzentrierte Navigation Suchen und Filtern Ergebnistabellen/-listen Editoren und Read-Only-Ansichten Standarddialoge für Nachrichten, Fragen, Auswahl, Kleineingaben Multiple Document Interface

17 Wünschenswert Plattform-unabhängig [Zero Installation] Geräte-übergreifend Rollen-basiert Einheitlich Günstig produzierbar Kriegt jeder hin

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

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

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

21

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

23 Desktop-Muster MVC MVP Presentation Model Siehe JGoodies Showcase: Architectural Patterns

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

62 FACT SHEETS

63

64

65

66

67

68

69

70 NOCHMAL FACT SHEETS

71

72

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

74

75 Was ist die OpenUI5? Web-API Web-Implementierung Meta Design / Blueprints / Orientierung für Business-Inhalte für Business-Bildschirmfluss Beschreibung der SAP Fiori Apps

76 Investitionsschutz Technik-Muster Implementierung Bedienmuster Visuelle Muster Bretter Möbel Möbelgruppe Raumaufteilung Gebäudetypen

77

78

79 UI5-BEISPIELE IN JAVA

80

81

82

83

84

85

86

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

88 TESTS

89

90

91 CRM

92

93

94 UI5 INTEGRIEREN

95

96

97 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

98 FALKE

99

100

101

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

103

104

105

106

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

108 Seitenaufbau

109

110

111 Peer-to-Peer-Navigation

112 CONTRACT

113

114

115

116 CASHING

117

118

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

120

121

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

123 Hierarchische Navigation

124

125

126 Primär-/Sekundärnavigation

127 POWER

128

129

130

131

132 TAXI

133

134

135 TODO

136

137

138

139 DESKTOP VS. WEB

140

141

142 UWP-Doku Anwendungsaufbau Navigationskonzepte Seitenfluss Beantwortet viele konkrete Gestaltungsfragen

143 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

144 Die UWP lohnt für Java-Gestaltung!

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

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

147 NOCHMAL TAXI

148

149

150 Hub, HubSection, Tile

151 HUB ALS ABKÜRZUNG

152

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

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

155

156

157 HUB ALS BAUMERSATZ

158

159

160

161

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

163

164 HÄUFIGE AUFGABE: MEHRERE DOKUMENTE GLEICHZEITIG

165

166

167

168

169

170

171

172

173

174 DIALOGE

175

176 UX Guide-Dialogarten Dialog Eigenschaft Assistent Aufgabe

177

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

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

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

181 Auflösungsunabhängigkeit Keine Pixel im Screen-Design! Statt dessen etwa DLU oder logische Pixel Skalierbare Icons FontAwesome SAP OpenUI5 Icons Windows 10/UWP Icons

182 TOOLKIT-UNABHÄNGIGKEIT

183 LAGER SWING VS. JAVAFX

184

185

186

187

188

189

190

191 Tabellen Uni new TableBuilder(contactTable, Contact.class).addColumn().name("Name").formatter(Formats::formatTableCellName).done().addColumn().name("Phone").getString(contact -> contact.getphone()).formatter(str -> Formats.formatPhone(str)).done().addColumn().name(" ").getString(Contact::get ).formatter(Formats::format ).done()....build(); }

192 Objektkopf Uni new ObjectHeader.Builder().title(customer.getName()).intro(Formats.formatEnumeration(born, age)).number(formats.formatkvnr(customer.getkvnr())).numberunit("versicherter").addattributes(customer.getattributes()).addstatus().text("mitglied seit %s", since).done().addstatus().text("versicherungspflichtig").done().addstatus().text("datenschutz").state(valuestate.warning).done()....build();

193 Hintergrundprozess Uni new TaskBuilder<List<Contact>>().blocking(BlockingScope.APPLICATION).inBackgroundDo(service::loadAllContacts).onSucceeded(this::onLoadSucceeded).execute();

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

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

196 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

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

198 FRAGEN UND ANTWORTEN

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