Graphische Oberflächen Teil 3

Transkript

1 Graphische Oberflächen Teil 3 AWT und Swing Grundlegender Aufbau von GUIs Graphikausgabe Layoutmanagement Ereignismodell Menus und Actions GUI-Elemente Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 1

2 GUI-Komponenten Überblick über weitere Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 2

3 Observer 1 : n Beziehung Ein Zustand wird auf beliebig viele Beobachter verteilt Lose Kopplung der Komponenten Hinzufügen/Entfernen von Beobachtern zur Laufzeit java.util.observable java.util.observer Subjekt (Observable) Beobachter (Observer) benachrichtigt liest Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 3

4 Strategy Austauschen von Verhalten zur Laufzeit Kapseln von Algorithmen!"# $!"#% has-a $!"# $%!"# $&!"#$% #!"#!"# $& $!"# &$% # & $!"#$% (!"#!"# $& & $& && Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 4

5 MVC Entkoppelung von Model, View und Controller Kombiniertes Muster Stammt aus Smalltalk Controller verändert View Flexibilität Wiederverwendbarkeit verändert Model liest benachrichtigt Model Daten, die das Programm verwaltet View Sorgt dafür, dass alle Views nachgeführt werden Darstellung der Daten Zu jeder View gehört ein Controller Controller Interpretation von Tastatureingaben und Mausklicks Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 5

6 MVC in Swing Keine Trennung von View und Controller Model bietet Eine abstrakte Schnittstelle für Datenzugriffe Verwendet Ereignismechanismus View Controller verändert liest benachrichtigt über Events Model Daten Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 6

8 Für vordefinierte, sortierte Menge von Werten Eingabe Textuell Auf- oder absteigendes Durchlaufen der Werte implementiert View und Controller ) stellt eine abstrakte Definition für das Modell bereit Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 8

9 Klassendiagramm Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 9

10 Interface ) Lesen und Schreiben des aktuellen Werts Zugriff auf Nachfolger und Vorgänger Quelle von /",0# $ ) *+&,-% # -*+ #% *+&,. -% *+&,(#-% # /",/", % # #/",/", % $ /", 0# # /",/",0# % & /",0# 0#*+ &/",0#*+ & % Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 10

11 Beispiel Verwendung # $,12&3456&& 7),78&&74,78&7)9"78&74,78 7,78&7,78&&7,7 % 8&:8&;8&<%& & ==4$>& &&9 9 % ==&$? -$" #&A&, <B&& :C8& B& :&& )B8&<B8&:C8&A% ==&$? 4=D" ;&& )% ==&$? 3", <&& )3456% ==5$ 5$?, /", &< <,)/",9 9 /",& # /",/",0# & 7 7& <,),-%& % Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 11

13 ist eine Komponente für die einfache Eingabe von kurzem Text Hat Model vom Typ 4 Folgende Methoden stehen zur Verfügung Konstruktoren mit Angabe der Breite und eines initialen Texts &, &, 8& & Zugriff auf String-Wert,&, & #, &,&, $$8& & Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 13

14 (Fortsetzung) Zugriff und Kontrolle der aktuellen Selektion,&, &,&,0& # & # 0 0& Zugriff auf und Kontrolle des Caret,/(& # /( & # #/( & Regristrieren von 5- und / # 55 & # #55 & # // # #// & Hinweis: Bei Enter wird 5-Ereignis gefeuert!! Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 14

15 Klassendiagramm Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 15

16 Interface +# 9, 4 $ 4,,"% # 44 % # #44 % # D0D0 % # #D0D0 % *+,(*+ E% # (*+ E8&*+ #% # # $$8& &"9!0 % #, $$8&,&8&5 & "9!0 %,&, $$8&,"&"9 "9!0 % #, $$8&,"8&,& &"9 "9!0 % (&,(% (&,0(% (&( $$&"9!0 % 012&,F0% 0&,4$F0% # F % $,&4( &77% $,&( &77% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 16

17 Beispiel H& H&Ausgabe der Editieroperationen % $% & 7 7% /&&&,/(% 9 9% $&&9 :G% $% $59 9 5& # ($50# & 7. 0,H&7&&$, % % $, & # D40# & 70,$,H&7& $,4,,*$$8&,,"% &"!0 & & E%&& # #D40# & 7@" #&7&&,*$$&&78&7&&,,"&&7&I"7% # ",D40# & & % E% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 17

19 erlaubt die formatierte Eingabe von beliebigen Werten Formatter wird verwendet, um zwischen String-Repräsentation und Objektwert zu konvertieren Verifikation, dass korrekte Zeichenkette eingegeben wurde Unterschiedliche Reaktionen bei ungültigen Eingaben Filtern von ungültigen Eingaben Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 19

20 Erzeugen von Beim Anlegen eines muss Formatter definiert werden Erzeugen mit Format-Objekten: Formatter wird auf Basis des Format-Objekts erstellt &9.,J,J% &9.,/J% &9 4,4J% &9 4,4J4K*F% (siehe dazu. und 4) Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 20

21 Erzeugen von (Forts.) Mit 4$ L,- arbeitet mit Objekt-Konstruktor mit String-Parameter L #, ruft, auf 4$ $&&9 4$% &9 $% -9 DF7"H==+#7% Mit )E und Definition einer EingabeMaske )E $ &9 )E7MMM>MM>MMMM7% $("/"NGN% &9 $% -7GAO>GP>:G7% Wobei in der Maske die folgenden Zeichen verwendet werden # eine Ziffer? ein Buchstabe U ein Buchstabe, konvertiert in einen Großbuchstaben L ein Buchstabe, konvertiert in einen Kleinbuchstaben A ein Buchstabe oder eine Ziffer H eine Hexadezimalziffer [0-9A-Fa-f] * beliebiges Zeichen Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 21

22 Schreiben eines eigenen Formatters Ableiten von 4$ Überschreiben der Methoden #, und,- Beispiel: Formatter für IP-Adressen J(5 4$,&#,*+ # "9 (0 $ Q# $ 12 "9 9 (0 7R 1278&G% 12&&& 12#% $," Q&< "9 9 (0 7S, Q&<78&G%,!$$ $$ &9,!$$% $ &&G%&&T&<%& &&12% $ &T&G&&&:PC% $$,#*$% $ &T&;&$$NN% $$,% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 22

23 Schreiben eines eigenen Formatters (Forts.) *+,-, &"9 "9 (0,E E &9,E 8&77% 12&&&9 1<2% $ &&G%&&T&<%& &&G% &&J,JE E% ".0 "9 9 (0 $ &T&G&UU&&V&:PC "9 9 (0 7! W"&&!"78&G% 12&& % % Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 23

24 Verifikation Bei Abgabe des Fokus wird geprüft, ob die aktuelle Zeichenkette gültig ist kann der Formatter die Zeichenkette in ein Objekt umwandeln dann gültig, sonst ungültig Mit Methode 0- kann man das auch explizit prüfen Bei ungültiger Eingabe gibt sich ein entsprechendes Verhalten, das man mit void setfocuslostbehavior(int behavior) einstellen kann Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 24

25 Verhalten bei Abgabe des Focus COMMIT_OR_REVERT (Standardverhalten) Wenn gültig, den Wert übernehmen (Methode 0), Wenn ungültig, den letzten Wert ins Ausgabefeld zurückschreiben COMMIT Wenn gültig wie oben Wenn ungültig, den letzten Wert und den Inhalt des Ausgabefeldes behalten PERSIST Obwohl gültig, den Wert nicht übernehmen, sondern erst bei expliziten Aufruf von 0, - oder übernehmen REVERT Den Wert nicht übernehmen und auch das Ausgabefeld mit dem alten Wert überschreiben Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 25

26 Weiteres Neben Formatter kann für folgendes definiert werden L 4: - Erlauben die Filterung von Eingabezeichen L J-$: - Explizite Kodierung der Gültigkeitsprüfung in eigenen Klasse Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 26

28 erlaubt die bequeme Ausgabe von Listen von beliebigen Objekten unterstützt Listen von beliebigen Objekten Lange Listen Listen die sich dynamisch aufbauen (nicht explizit vorhanden sein müssen) Selektion von einzelnen und mehreren Elementen Ausgabe der Elemente in unterschiedlicher Art arbeitet mit ) arbeitet mit Renderern für die Ausgabe Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 28

29 JList Klassendiagramm Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 29

30 Interface ) Zugriff auf die Elemente Bestimmung der aktuellen Anzahl Registrieren von 4/",n $ ),% *+,05 % # 44 % # #44 % $ 4 0# # #540# % # #F#40# % # /",40# % 40# 0#*+,& & %&,J G& & G%&,J & & %& Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 30

31 Konstruktion von -Komponenten Konstruktion von möglich mit Object-Array # $,12&3456&& 7),78&&74,78 7)9"78&74,78&7,78&7,78&7,7% & /& &,/(% &&9 3456% ( ( &9 (% % Vector # -&#&&9 -%& & #X,X%&#X"X%&#X,X%& :&&9 #% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 31

32 Konstruktion von -Komponenten (Forts.) ListModel (Beispiel Generieren von Integers) & &&9 9 J)GG% J) 5) J) & " &%&,& % *+,05 & 9 J,%& # %& Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 32

33 Klasse 4$) Arbeitet wie - Plus ) Interface Siehe Beispiel (3" (4ownload von LVA-Homepage) Statt (-Datenmodell4$) Statt (/",0#s 40#s Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 33

34 Selektion Elemente in kann man selektieren und Selektion abfragen wirft 0# $ 0# # #/",0# % 0# 0#*+ 0#*+ 8& $J 8& J 8& 5+,& &Z,J & &Z,J & &Z,-J5+,& &Z Es gibt unterschiedliche Selektionsmodi, die man über die JList-Methode # ) setzen kann; mögliche Modi sind (Konstante des Interfaces )) L J.@0Y00/J*. L J.@0YJ.0F-5Y00/J*. L )DJ(0YJ.0F-5Y00/J*. Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 34

35 Renderer für Listenelemente Man hat die Möglichkeit die Ausgabe der Elemente zu bestimmen Interface /F definiert Methode /,/F welche für eine Liste und einen Wert an einer Position und Information, ob Zelle selektiert und Komponente den Fokus hat, eine / zum Rendern liefert $ /F /,/F/ 8 *+ #8 8 8 K% Methode # /F/F Achtung: /F rendert selbst nicht, sondern liefert eine /!! erlaubt die Installation eines besonderen /Fs. Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 35

36 Beispiel /F Dieser Renderer rendert-objekte, indem der Name des Fonts im entsprechenden Font ausgegeben wird /F /F /F& * %&&&&==&&&"&$&E,&&"9& /,/F/ 8&*+ #8& 8& 8 K& $ &,,,%!E,,!E,% &,,,%!E,,!E,% &$ &&#% $% $,% "% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 36

38 erlaubt die Ausgabe und die Barbeitung von Tabellen Modell und Art der Bearbeitung ist analog zu L ) L, 0# und ) L /F zusätzlich können Zellen in Tabellen editierbar sein; dazu wird ein L /0 herangezogen Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 38

39 Aufbau Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 39

40 Klassendiagramm JTable Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 40

41 Interface ) Anzahl der Zeilen und Spalten Name und Typ für die Spalte Prüfen, ob Zelle editierbar Lesen und Schreiben der Zellen Registrieren von ) $ ),F9/%,//%,&,/. J % /,// J % /0 9J 8& J % *+,-5 9J 8& J % # -5*+ -8& 9J 8& J % # )) % # #)) % $ ) )0# +#0# +#0#*+ # /",,F9& &Z % )0# %,F9& &Z %,/& &Z %&,& &Z Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 41

42 Erzeugen von -Komponenten Konstruktion von möglich mit 2-dimensionalen Object-Array + Spaltennamen (& &9 8&.% Z # *+1212& & &7)E78&9 4:<<G8&9 J,G8&!508&/9 8& 7-78&9 9 4CGP:8&9 J,G8&!508&/9 8& 7078&9 4C;AO8&9 J,8&!508&/ 8& 7)78&9 4;;BA8&9 J,:8&!508&/ 8& 778&9 4A<B:8&9 J,C8&!FD08&/, 8& 778&9 9 4CG:CO8&9 J,O8&!FD08&/, 8& 7D78&9 9 4:PPPB8&9 J,A8&!FD08&/ 8& 7.78&9 9 4:<ACC8&9 J,O8&!FD08&/ 8& 7(78&9 4;A8&9 J,8&!508&/E % #,12&. & &7(78&7F78&7)78&7@$[,78&77&% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 42

43 Erzeugen mit ): Bsp. J# Implementierung von ) stellt Datenzugriff bereit und liefert die Informationen ) &9 J#);G8&P8&G% &9 %,/(9 9 (8&7/7% J#) 5) J#) 8& 8& :& &Z,F9/& %,//& &Z *+,-5 8& & &&&&F&=&GGG% &% $! &J.JJ5Y!55./0&\&)"9&&8&%.,/J$$!%,&,/. & &&&&F&=&GGG%.,(J$%!",&&R& $?&+&"&& ""&I!! # % # F% # F% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 43

44 ) als Datenkapsel Oft soll ein ) als eine Zugriffschicht auf das eigentliche Datenmodell verwendet werden Z.B. Zugriff auf Datenbank ) hält daher keine Daten ) 4!) 4) 4!/&5&&4! siehe dazu Beispiel #:"CF+# Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 44

45 /F /F werden für die Darstellung der Zellen verwendet $ /F /,/F/ 8&*+ #8 8& "8& 98& % Beispiel //F: /-Werte werden mit ( mit entsprechenden Hintergrund dargestellt //F /F /,/F/ 8 *+ #8& 8& "8 98& &!E,/#% % # ( &9 (% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 45

46 Installation eines /F Man kann /F auf 2 Arten installieren Variante 1: /F für alle Werte einer bestimten Klasse Festlegen einer Klasse für eine Spalte im ) () 5) /,// & 1G212,/% und Bestimmen eines Renderers für die Klasse im 4$F/ 8&9 //F% Variante 2: /F für eine / Zugriff auf das /-Objekt mittels,/ von Setzen des Renderers bei dem /-Objekt / &,/.%& /F9 9 //F% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 46

47 /0 Damit eine Zelle editierbar ist, muss im TableModel die Methode 0 true sein () 5) /0 8& & &&.5)0Y/*D).&UU&&&)**.Y/*D). UU&&&@50*DY/*D).&UU&&&/**FY/*D).% Mittels /0 kann man die Zellen editieren Liefert Komponente zum Editieren Stellt Interface für Interaktion bereit (/0) $ /0 /0 /,/0/ 8&*+ #8 8& 98& % $ /0 *+,/0-% /00#*+ 0#% "/0#*+ 0#% /0,% # /0,% # /0/0 % # #/0/0 % Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 47

48 4$/0 Mit 4$/0 kann man aus, /"E! und /! ein /0 konstruieren Beispiel: Im folgenden Beispiel wird ein Editor für Anzahl der Monde eines Planeten realisiert (siehe Beispiel Planetentabelle) Erzeugen einer /! mit Items 0 bis 20 Erzeugen eines 4$/0 mit /! Installation als /0 für die Spalte /! / &9 /! % $ &&G%&&T&:G%& /J9 9 J,% /) ) &,/)% / / &),/())**.Y/*D).% //09 9 4$/0/% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 48

49 Eigener / /0 /08&5 # /!! % 4490&! &9 /! %! 5" "% # ($50# #& $0,%&&&&==&E *+,/0-& 9 J,!,J % /,/0/ 8&*+ #8& 8 98& &! J J,&#-%! % Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 49

50 Beispiel Planetentabelle Siehe Programmcode #:"C/F+# aus CoreJava 2 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 50

52 Treeview mit expandierbarem Baum (wie Windows Explorer) Im Aufbau und Funktionsweise analog zu verwendet Ereignisse: L 0# L 0 0# Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 52

53 Interface ) ) definiert Zugriff auf Knoten im Baum Änderung bei Pfaden Registerierung von ) $ ) *+,F% *+,/"*+ 8& %,/"/*+ % $*+ % # #("/",(" "8&*+ 9-%,J *$/"*+ 8&*+ "% # )) % # #)) % Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 53

54 GUI-Komponenten ]E& E&?&9 &9 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 54

55 Container Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 55

56 Special-Purpose Containers Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 56

57 Basic Controls Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 57

58 Uneditable Information Displays Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 58

59 Interactive Displays of Highly Formatted Information Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 59

60 Vorgefertigte Dialogfenster Meldungsfenster *("9),4, 8&&&&==&$&&9""&,&&,8&&&&&&&&==&"&,&& % Eingabefenster,&&&*("9J4, 8&,8&8&,% ==&&"&& &&&$&"&&"&&" Bestätigungsdialog &&*("9/$4, 8&,8&8&8&,% ==&&60Y*(J*.8&.*Y*(J*.8&/5./0Y*(J*.8&*RY*(J*.&&/*04Y*(J*. Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 60

61 Accessibility Unterstützung von Benutzerhilfen z.b. Bildschirmlupe, Vorlesen des Bildschirminhalts Paket +# Komponenten implementieren 5 Zugriff auf 5/ 5/ Repräsentiert Mindestinformation über Komponente z.b. Name, Beschreibung, Rolle, Zustand, unterstützte Aktionen, graphische Repräsentation, Text, Wert, Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 61

62 Zusammenfassung Anwendungen Hauptfenster und Dialogfenster Pluggable Look and Feel unter Swing Applets Kleine Programme innerhalb von Webseiten Eingeschränkte Berechtigungen Layout-Manager Kontrollieren Position und Größe der Komponenten Ereignisse Klick auf Schaltfläche, Texteingabe, Auswahl eines Listenelements, Ereignisbehandler werden bei Komponente registriert Menus und Actions GUI-Elemente MVC Muster Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 62

63 Literatur The JavaTM Tutor, Creating a GUI with JFC/Swing (The Swing Tutorial), Horstmann, Cornell, Core Java 2, Band 1 - Grundlagen, Markt und Technik, 2002: Kapitel 9, 11 Horstmann, Cornell, Core Java 2, Band 2 - Expertenwissen, Markt und Technik, 2002: Kapitel 6 Krüger, Handbuch der Java-Programmierung, 3. Auflage, Addison-Wesley, 2003, Kapitel 37, 38 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 63

64 Programmbeispiele Beispiel zu mit unterschiedlichen SelectionModes und eigenen Renderer Download von Homepage Beispiel J#: Erzeugung eines ): Core Java 2, Band2: #:"CJ#+# Beispiel F: ) mit Datenbankanschluss: Core Java 2, Band2: #:"CF+# Beispiel (: mit Editor und Renderer: Core Java 2, Band2: #:"C/F+# Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 64