JGoodies Karsten Lentzsch EFFIZIENT GESTALTEN MIT SWING

Transkript

1 JGoodies Karsten Lentzsch EFFIZIENT GESTALTEN MIT SWING

2 JGoodies Swing-Bibliotheken Oberflächengestaltung Beratung zu Swing-Themen

3 Ziele Schnell, sicher und konsistent gestalten Kosten senken Besser gestalten

4 Gliederung Einleitung Fallbeispiele TuneQ IT21 Standarddialoge Sonstiges

5 Wie lange dauert s?

6 Inhalt Meta-Design Nicht-visuelle Builder Java-Layout-Techniken

7 Einordnung

8 Probleme Layouts ohne Planung Visuelle Architektur fehlt Gute Gestaltung schwer zu finden Inkonsistenz Hohe Kosten Schlechte Gestaltung

9

10 Wie machen s die Anderen? Meta-Designer plant alle Layouts Designer wählt fertiges Layout pro Seite pro Abschnitt pro Artikel Höhere Planungskosten Niedrigere Produktionskosten

11 Beispiele Schilder Verkehrsleitsystem Tageszeitung Konferenzheft Architektur Busfahrplan

12

13

14 Meta-Design-Elemente Schriften Farben Größen Anordnung Abstände Layout Kontraste Balance

15

16

17 Meta-Design-Prinzip So starr wie möglich, so flexibel wie nötig! Flexibilität bleibt voll erhalten Fokus auf Inhalte statt auf Äußeres

18

19 Naked Objects / JMatter Fertige Lösung Kostenlos Automatisch erstellte GUI Fokus auf Fachschicht Keine Hand-Gestaltung Konsistente GUI GUI konsistent mit Fachschicht

20

21

22 Gliederung Einleitung Fallbeispiele TuneQ IT21 Standarddialoge Sonstiges

23 TuneQ

24

25

26

27

28

29 Meta-Design-Spezifikation Aufbau: Frame, Ansichten, Editoren Schriften Farben Abstände Ausrichtung Bedienelemente Multi-Plattform

30 Schriften Standardschrift: für Bedienelemente, Anzeigetexte Überschrift: über Listen, für Hinweistexte Gliederungsschrift: für Kategorien im Suchergebniss

31 Farben Kopfbereich Hintergrund Überschriften Action-Links Icons Karten

32 Layout 3 Hauptspalten Text Text, Text Text, Text, Bild Text, Bild, Bild 3 Hauptzeilen Instanz, Produkt, Liste Instanz, Liste Liste

33

34

35

36

37 Spalten new FormLayout( "pref, 6px, pref, 60px, pref, 6px, pref, 60px, pref"); // Text // Text/Bild // Bild

38 Skalierbares Layout new FormLayout( "pref, 4dlu, pref, 21dlu, // Text pref, 4dlu, pref, 21dlu, // Text/Bild pref"); // Bild

39 Problem Layout wackelt Gleiches ist schwer zu erkennen

40

41

42

43 Mindestbreite new FormLayout( "[80dlu,pref], 4dlu, pref, 21dlu, [80dlu,pref], 4dlu, pref, 21dlu, pref");

44 Layout-Variablen (Forms 1.2) new FormLayout( "[80dlu,pref], $lcgap, pref, 21dlu, [80dlu,pref], $lcgap, pref, 21dlu, pref");

45 Layout-Variablen new FormLayout( "$label, $lcgap, pref, $mgap, $label, $lcgap, pref, $mgap, pref");

46 Variablendefinition LayoutMap map = LayoutMap.getRoot(); map.columnput("label", "[80dlu,pref]"); map.columnput("mgap", "21dlu"); map.rowput ("lcgap", "3dlu"); map.rowput ("table", "fill:50dlu:grow");

47 Standard-Builder PanelBuilder builder = new PanelBuilder(layout); CellConstraints cc = new CellConstraints(); builder.addlabel("label1:", cc.xy(1, 1)); builder.add(content1, cc.xy(3, 1)); builder.addlabel("label2:", cc.xy(5, 1)); builder.add(content2, cc.xy(7, 1));

48 Spezieller Builder AnsichtBuilder builder = new AnsichtBuilder(); // Standardlayout builder.add("label1:", content1, 1, 1); builder.add("label2:", content2, 5, 1); builder.add("label1:", content1, "Label2:", content2, 1, 1);

49 Bean-Builder AnsichtBeanBuilder builder = new AnsichtBeanBuilder(aBean); builder.add("label1:", "property1", 1, 1); builder.add("label2:", "property2", 5, 1);

50 Abwägung Standard-Builder Erscheint "dumm" Bläht Quelltexte? Spezieller Builder Spart Code Ist fertig,dokumentiert Wird gewartet Wird von visuellen Editoren unterstützt Entwurf, Doku Wartung Schulung In 5 Jahren?

51

52 ButtonBarBuilder ButtonBarBuilder2 builder = new ButtonBarBuilder2(); builder.addbutton(newbutton); builder.addrelatedgap(); builder.addbutton(editbutton); builder.addunrelatedgap(); builder.addbutton(upaction, downaction); return builder.getpanel();

53 Listentypen Nur Liste Knöpfe Knöpfe und Suche Knöpfe, Suche, Filter Hauptebene vs. eingebettet

54

55

56

57

58

59

60 ListBuilder (Komponenten) ListBuilder builder = new ListBuilder(); builder.setlistcomponent(elementstable); builder.setoperationsbar(neweditdeletebar); builder.setupdownbar(updownbar); builder.setrefreshcomponent(updatebtn); builder.setsearchcomponent(searchfield); builder.setadditionalcomponents(filterbox); builder.setembedded(false);

61 ListBuilder (Untermodelle) ListBuilder#setList( ListModel listmodel, ListSelectionModel selectionmodel); #setoperations( Action newaction, Action editaction, Action deleteaction); #setupdown( Action upaction, Action downaction);

62 ListBuilderModel-Interface ListModel getlistmodel(); ListSelectionModel getselectionmodel(); void performnew(eventobject e); String getnewtext(); boolean isnewvisible(); void performedit(eventobject e); String getedittext(); boolean iseditvisible();

63 Komponentenfabrik/-Builder privat void initcomponent() { plzfield = Factory.createPLZField(); einbaufield = Factory.createDateField(); g1field = Factory.createGewichtField(); hoehefield = Factory.createLaengeField(); plzfield = Factory.createPLZField(model); ComponentBuilder builder = new ComponentBuilder(aBean); plzfield = builder.createplzfield("plz");

64 Probleme Inkonsistente Tab-Reihenfolge Inkonsistente Beschriftungen Inkonsistente Übersetzungen

65 DEMO Infrastruktur-Verwaltung

66

67 Gliederung Einleitung Fallbeispiele TuneQ IT21 Standarddialoge Sonstiges

68 Oracle Forms

69 Neue Gestaltung

70 Anwendersicht Aufgaben schneller erledigen Weniger tippen Weniger Fehler Weniger Support-Bedarf Besserer Datenbestand Mehr Informationen Höhere Anwenderzufriedenheit Besserer Kundenservice

71 Entwicklersicht Viele Formulare (> 300) Programmierung einfach zu verstehen Einfach zu programmieren Kein Swing-Expertenwissen vorhanden Kein Expertenwissen nötig

72 Entscheidung Eclipse RCP vs. eigenes Swing-Rahmenwerk Fertige Lösung (JMatter) vs. Selbstbau

73

74

75

76

77

78

79

80

81

82

83

84

85 EditorBuilder #setheader(jcomponent); #addtab(string, JComponent); #setcontextactions(action );

86

87

88

89

90

91

92 HomeViewModel StringModel gettitlemodel(); DetailSearchModel getdetailsearchmodel(); QuickSearchModel getquicksearchmodel(); ListModel getlistmodel(); ListSelectionModel getselectionmodel();

93 HomeViewBuilder HomeViewBuilder(HomeViewModel) #setadditionalcomponents(jcomponent ); #setpreview(jcomponent);

94 DEMO Feldsuche, Schnellsuche

95

96

97 Gliederung Einleitung Fallbeispiele TuneQ IT21 Standarddialoge Sonstiges

98

99

100 Template-Pattern public abstract class AbstractDialog { abstract JComponent buildheader(); abstract JComponent buildcontent(); abstract JComponent buildbuttonbar(); public JComponent buildokcancelbar() { }; public JComponent buildclosebar() { };

101

102

103

104

105 Eigene Dialog-Bean public class TaskDialog { void seticon(icon icon) void setmaininstruction(string) void setcontenttext(string) void setcommitbuttons(jbutton ) void setverificationtext(string) void setverificationselected(boolean) void setfootnotetext(string)

106 Dialog erstellen TaskDialog dialog = new TaskDialog(); dialog.settitle("confirm Delete"); dialog.seticontype(taskdialog.warning); dialog.setmaininstruction("are you sure "); dialog.setcommitbuttons( TaskDialog.YES, TaskDialog.NO); dialog.setdefaultbutton(taskdialog.no); dialog.pack(); dialog.setvisible(true);

107 DEMO Dialog per Hand erstellen

108 DEMO Dialog-Editor

109 DEMO Dialog-Browser

110 Gliederung Einleitung Fallbeispiele TuneQ IT21 Standarddialoge Sonstiges

111

112

113

114

115 MetaDesign-Klasse public abstract class MetaDesign #setlayout(layoutmanager layout); #putconstraints(object key, Object constr); #putfont(object key, Font font); #putcolor(object key, Color color);

116 MetaDesign-Definition 1/2 public class Login extends MetaDesign { // Keys static final Object TITLE = "title"; static final Object CONTENT = "content"; static final Object FOOTER_L = "footerl"; static final Object FOOTER_R = "footerr";

117 MetaDesign-Definition 2/2 private void init() { setlayout(new FormLayout("14dlu, ", " ")); CellConstraints cc = new CellConstraints(); putconstraints(title, cc.xywh(2, 3, 1, 1, "center","bottom")); putconstraints(content, cc.xywh(3, 5, 1, 1, "center","top"));

118 MetaDesign-Panel-Bau MetaDesignBuilder builder = new MetaDesignBuilder(new Login()); builder.add(login.title, titlelabel); builder.add(login.content, content); builder.add(login.footer_l, exitbutton); builder.add(login.footer_r, changebar); builder.add(login.backgrnd, backgroundpnl); builder.getpanel();

119

120

121 Was fehlt? Wie soll ich die Frage formulieren? Wie soll ich die Knöpfe beschriften? Wann modal? Wann modeless? Property oder Task? Wortliste Design-Katalog Style Guide

122 Zusammenfassung Layout-Planung Meta-Design Gitter / Gittersystem Layout skaliert mit Schrift und Auflösung Mindestbreiten Variablen

123 Zusammenfassung ButtonBarBuilder2 ListBuilder ListBuilderModel Komponentenfabrik/-Builder HomePanelBuilder Eigene visuelle Beans MetaDesignBuilder

124 Referenzen I Microsoft User Experience Guide (UX Guide) Mac Aqua Human Interface Guidelines (HIG) "Designing Visual Interfaces" Kevin Mullet & Darrel Sano "GUI Bloopers" Jeff Johnson

125 Referenzen II First Aid for Swing UIs Desktop Patterns & Data Binding Layout und Panel-Bau in Swing JGoodies Forms Swing Data Validation

126 Referenzen III JGoodies FormLayout, Forms-Bibliothek, JMatter, Naked Objects for Swing,

127 Ausblick JSR 296 Swing Application Framework JSR 295 Beans Binding Eclipse RCP Spring RCP visuelle Editoren Java Desktop Blueprints / Style Guide

128 FRAGEN UND ANTWORTEN

129 JGoodies Karsten Lentzsch EFFIZIENT GESTALTEN MIT SWING