Graphische Oberflächen Teil 1

Transkript

1 Graphische Oberflächen Teil 1 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 Inhalt AWT und Swing Unterschied Einbettung von Swing in AWT Grundlegender Aufbau von Swing GUIs Frames, Windows, Dialogs Panels Graphikausgabe Positionierung paintcomponent und AWT-Thread Graphics und Ausgabeoperationen Aufbau und Positionierung Component-Hierarchy LayoutManagement Spezielle Anordnungen: JTabbedPane, JSplitPane, JScrollPane, JInternalFrame, Ereignismodell Grundlegendes semantische und systemnahe Ereignisse Patterns für die Ereignisbehandlung Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 2

3 Inhalt (Fortsetzung) Menus und Actions GUI Elemente MVC-Paradigma - Abstrakte Modelle - Ereignisse Überblick über GUI Elemente - JLabel - JButton - JSpinner - JTextField - JFormattedTextField - Dialoge (Teil 2) Modale und Nicht-modale Dialoge Spezielle Dialoge: JFileDialog, JOptionsPane, Spezielle GUI-Elemente (Teil 2) JList JTable JTree Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 3

4 Graphische Oberflächen 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 4

5 AWT und Swing Abstract Window Toolkit Paket und Unterpakete Abstrahiert GUI-Komponenten von konkreter Plattform Plattformspezifische Implementierung in "Peer"-Klasse Kleinster gemeinsamer Nenner aller Plattformen Component ComponentPeer Windows ComponentPeer Motif ComponentPeer MacOS ComponentPeer Swing Paket und Unterpakete Lightweight-Komponenten Native Container, Rest vollständig in Java implementiert Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 5

6 Applets Abgeleitet von Browser lädt Klasse und ruft Methoden auf init start paint stop destroy repaint Ausführung in "Sandbox" Zugriff auf Dateien und Starten von Programmen nicht erlaubt Kommunikation nur mit Server, von dem Applet geladen wurde!! " $!!%!! %&'(% %)(* $!!!+,-!* $.* Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 6

7 Grundlegende Eigenschaften von Swing Leichtgewichtige Komponenten nur Top-Level-Fenstern, Dialoge und grafische Primitivoperationen auf Systemoperationen abgebildet alles weitere in Java Pluggable Look-and-Feel Look-and-Feel nicht abhängig vom Betriebssystem unterschiedliche Look-and-Feel verfügbar: Metal, Motif und Windows Umschaltung des Look-and-Feel (auch zur Laufzeit) Model-View-Controller-Prinzip neue Architektur der GUI-Komponenten nach dem Model-View-Controller- Prinzip Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 7

8 Pluggable Look and Feel Bestimmt Aussehen der Swing-Komponenten Auswahl im Programm /01"23 /014 5" /017"2346..! 51"23!..! 5, "23!..! "23! Austausch nach dem Start /01"2356 / 48/05 52 Spezifikation auf der Kommandozeile "23 17 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 8

9 Applets, AWT und Swing im Vergleich !,8! "7 : "7;<& "!+,-!, ", 4, = 7 ( >&'(<?( "7 : "!+,-! 17A3 A3 17A3!! 4 "7 : "7;<& 4 A"!+,-! 54B =C08DB6D4"B= Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 9

10 Graphische Oberflächen 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 10

11 Komponenten von AWT Component Button Canvas CheckBox Choice Container Label List Scrollbar TextComponent ScrollPane Panel Window TextField TextArea Frame Dialog Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 11

12 Grundlegende Architektur von AWT-GUIs!" """ $%&!' ""' Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 12

13 Die Basisklasse java.awt.component,! '4 *5 %' $64!' 7, &,8' E <7<<% " < 7 > < % 345 E ()*+!)!'' +!, -()*.$!$%/ 0$ 1!1$"$%/& $"+! ' $!% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 13

14 Container Frame Hauptfenster eigenständiger Anwendungen Rahmen und Titelleiste Dialog Fenster, das zu einem übergeordneten Frame gehört Parameter in Konstruktor bestimmt Modalität Panel Container für andere Komponenten Verschachtelbar zur Kombination von Layout-Managern ScrollPane für Bildlauf Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 14

15 Allgemeines zu Container )"!!'! ) &'7;.!'! ' <+!8$" $' : Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 15

16 Oberklasse 4 F 4 &4 ' ()*".!&!' " )= '71 &(?<= )' "7"71 8!$% $ $!!&5 => 7 " &' Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 16

17 Einbettung und Swing in AWT Swing-Komponenten sind in die Hierarchie der AWT-Komponenten eingebettet F A4 als Basisklasse aller leichtgewichtigen Komponenten ist von 4 abgeleitet Component Container F A3, A, A, als Top-Level-Windows erweitern 3,,, Damit werden grundlegende Mechanismen von AWT geerbt JComponent ScrollPane Panel Window Komponentenhierarchie Ereignismechanismus JPanel JWindow Frame Dialog JFrame JDialog Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 17

18 Top-Level-Windows in Swing A, rahmenloses Fenster hat eine ContentPane, um Komponenten aufzunehmen A3 Typisch für Applikationsfenster mit Rahmen, Systemmenü und Standardschaltfläche A für modale und nicht-modale Dialoge werden mit Parent-Frame erzeugt hat wie JWindow eine ContentPane, um Komponenten aufzunehmen Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 18

19 JFrame JFrame ist aus mehreren Panes aufgebaut FG : Wurzel, beinhaltet Border, Titel, LayeredPane F"7 : beinhaltet Menüleiset und ContentPane F4 : eigentliche Inhaltsbereich F: : vorgelagerte, durchsichtige Pane für Effekte, die die ganze Frame betreffen AG G 4 4 A"7 "7 4: Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 19

20 Aufbau einer JFrame-Applikation " H?(& A3 " H?(&!= 5%A3!.., " % >5I, ", 4.."7>E% >5I 4 4 "7 : "7H<; AE!E;! AE!E&! AE!EH! JK " H?(& " H?(& " ;((<;(( 4, 4, 5, ( Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 20

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

22 Grafik in Java Zeichenoperationen werden in überschriebenen paint-methoden implementiert bei AWT-Komponenten :% bei Swing-Komponenten 4:% Aufruf der Methoden erfolgt durch eigenen AWT-Thread Anwenderprogramm kann durch Aufruf von < 7< %< % % das Neuzeichnen der Komponente (eines Bereichs der Komponente) erzwingen Zwei wesentliche Konzepte zur Grafikdarstellung Koordinatensystem: immer relativ zur Komponente Grafikkontext: stellt virtuelle Zeichenfläche dar Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 22

23 AWT-Thread Anwenderprogramm und AWT-Loop laufen in unterschiedlichen Threads Anwenderprogramm führt Änderungen in den Daten durch, die Änderungen in der GUI bewirken sollen ruft repaint der betroffenen Komponenten auf AWT ruft bei nächster Gelegenheit 4 auf Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 23

24 Graphik :% Graphikkontext in der Methode Zeichnen von Linien, Figuren, Text und Bildern Ursprung links oben :% & Erweitert :% um zusätzliche Zeichenoperationen Verwendung bei Swing-Komponenten 4," 4 :% 44 5 GH(<;(<&'<H( B;(<;(<L(<H( 44%!,!<;'<H( Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 24

25 Grafik in Java Koordinatensystem F (<( ' F, %9;"+ %9;' 7$%8(?<=+.50' 7"7 (?<=+!$ %'!&'.@8 %" A:' Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 25

26 Grafikkontext <(=,8 &/8&''( %' 7,8 46&!&($!'' $$ ($ =,8 $4!"7 ' 7($ &4 4'1?" $7 "=7$!' (=,8!' Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 26

27 Beispiel Grafikausgabe 84; 4 :% 5 ($, %9;M; 4 4(< &''(., %< &''(., % " <(<, %9<+ %9; 7 8%8% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 27

28 Die Klasse Graphics +,8 &? %&B/=1 4 4!&% /&(!' 46&@$"$@ 5 4@$ 41$$%/ '@ 4C,6 7+"$!' 14!''," ;<7;<&<7&&C,6= " ' Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 28

29 Zeichenoperationen der Klasse Graphics G < 7< < % 7<7<<%<<7 HG<7<<%< <7<<%< < " ;<7;<&<7& B<7<<% 7JK<7JK< 7" JK<7JK< G<7<<% GG<7<<%<, %< + % <<7 5 HG<7<<%< 5 5 B GG 00 <<7<0B.. 0..N5 % Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 29

30 Weitere Methoden der Klasse Graphics! " "$% & ''()*%"% ''+,+%-!% '' %++ ) ''.!- '',!)- ''-%"%))! '' /!+-% ''-$&0)'1&)21 ''/%.! ''/"$34% 56)%% )-& Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 30

31 Font und Fontmetrics Die Klasse Font Repräsentiert eine Schriftart: Konstruktion mit: 353!1!<3EB"<;L 3 Standard Namen: "MonoSpaced", "Serif", "SansSerif", Einige Methoden: 3 < 7< > >..% 5OP E "06..Q5I% 5 5 EB" 5 08"04 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 31

32 Font und Fontmetrics Die Klasse Fontmetrics 1$!.$%' %($ %, %%%, %..BN../N + %..+O% "..R Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 32

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

34 Layoutmanager Anordnung von Komponenten Fenstergröße und Schrift können sich ändern Layout wird logisch beschrieben und nicht mit absoluten Koordinaten Constraints beeinflussen Positionierung FlowLayout Yes No Cancel GridLayout BorderLayout North West Center East South GridBagLayout Button1 Button2 Button3 Button4 Button5 Button6 Button7 Button9 Button8 Button10 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 34

35 Grundprinzip F "71 setzen Größe der Komponenten bestimmen Komponenten anfügen F "71 bestimmt damit automatisch Positionierung und tatsächliche Größe 4 "7CCC"7 ; 5 > ;((<H( ;1 >?(<&( ;1 > ;?(<L( 4 ; 4 & 4 %4.."7 4 4 Swing-Komponenten haben 3 Größeneigenschaften, die von Layoutmanagern verwendet werden F 5 >: bevorzugte Größe für Komponente F >: minimale Größe für Komponente F >: maximale Größe für Komponente Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 35

36 Layout Management Klassen 3"7 Ordnet die Komponenten wie Wörter auf einer Seite an. (Zentriert, rechts- oder linksbündig) E"7 Unterstützt genau 5 Komponenten. Eine an jeder Seite und eine im Zentrum : "7 Teilt den Container in Zeilen und Spalten. Alle Zellen sind gleich groß. : E"7 Sehr flexibel und kompliziert. Für jede Komponente können Einschränkungen definiert werden. 4"7 Zeigt jeweils nur eine Komponente, die den Container ausfüllt. Die anderen liegen quasi unsichtbar dahinter und man blättert bei Bedarf weiter (zb. Tabs) Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 36

37 FlowLayout 5 3"7 5 3"74=68=G<&(<&(..R % >.. 2&( "75 ; & C Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 37

38 BorderLayout "7E"7 ;<E"76BG8+ &<E"74=68=G C<E"7,=8 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 38

39 GridLayout : "7< "7 ; & C..R..55I 2>..%% Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 39

40 Weitere GridbagLayout CardLayout Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 40

41 null-layout * $% +' ()*4$ ".&= '74$ &' Beispiel "7.. > O <597>% ;E;(<;(<;((<;((..<7<E <+O% &E;(<;'(<;((<;((..<7<E <+O% ; & Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 41

42 Zusammenfassung Applets Kleine Programme innerhalb von Webseiten Eingeschränkte Berechtigungen Anwendungen Hauptfenster und Dialogfenster Pluggable Look and Feel unter Swing Layout-Manager Kontrollieren Position und Größe der Komponenten Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 42