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 java.awt 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 javax.swing 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 java.applet.applet 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 import java.awt.*; public class Demo extends java.applet.applet { public void init() { String text = getparameter("text"); add(new Label(text)); <applet code="demo" archive="demo.jar" width=250 height=70> <param name="text" value="hello World!"> </applet> Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 6

7 Grundlegende Eigenschaften von Swing Leichtgewichtige Komponenten nur Top-Level-Fenster, 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 UIManager.setLookAndFeel( UIManager.getCrossPlatformLookAndFeelClassName() // oder UIManager.getSystemLookAndFeelClassName() // oder "javax.swing.plaf.metal.metallookandfeel" // oder "com.sun.java.swing.plaf.windows.windowslookandfeel" // oder "com.sun.java.swing.plaf.motif.motiflookandfeel" ); Austausch nach dem Start UIManager.setLookAndFeel(lnfName); SwingUtilities.updateComponentTreeUI(frame); frame.pack(); Spezifikation auf der Kommandozeile java -Dswing.defaultlaf=javax.swing.plaf.metal.MetalLookAndFeel MyApp Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 8

9 Applets, AWT und Swing im Vergleich public class MyFrame extends Frame { public MyFrame() { super("awt Application"); setlayout(new GridLayout(1, 2)); add(new Label("Hello World!")); addwindowlistener(new WindowAdapter() { public void windowclosing(windowevent e) { System.exit(0); ); setsize(250, 60); setvisible(true); public class MyApplet extends Applet { public MyApplet() { setlayout(new GridLayout(1, 2)); add(new Label("Hello World!")); public class MyJFrame extends JFrame { public MyJFrame() { super("swing Application"); getcontentpane().setlayout(new java.awt.gridlayout(1, 2)); getcontentpane().add(new JLabel("Hello World!")); setdefaultcloseoperation(exit_on_close); setsize(250, 60); setvisible(true); 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 Frame Panel (with layout manager) MenuBar Panel (with Layoutmanager) List Button hierarchische Anordnung es gibt Components und Container Components liegen in Containers Ein Container kann einen Layoutmanager zugeordnet haben, der die Anordnung (x,y,w,h) der Components bestimmt Bei Components und Containers kann man sich für verschiedene Ereignisse als Listener anmelden (zb: MouseListener, ActionListener) Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 12

13 Die Basisklasse java.awt.component Component ist die abstrakte Oberklasse aller Benutzerschnittstellenkomponenten inkl. der Behälter (Container) (Ausnahmen: Menu, TrayIcon, SplashScreen). Ein Component hat eine graphische Repräsentation und kann mit dem Benutzer interagieren. Die Oberklasse von Component ist Object. Wichtige Methoden setbounds(int x, y, w, h) setlocation(int x, y) setsize(int w, h) setforeground(color fg) setbackground(color bg) setfont(font f) setenabled(boolean enabled) setvisible(boolean) Container getparent() Position und Größe der Komponente setzen (Benötigt zb: LayoutManager) Komponente zu neuem Ort bewegen Neue Größe Vordergrundfarbe (zb: für Text) Hintergrundfarbe Setzt eine Schriftart Legt fest, ob die Komponente mit dem Benutzer interagieren soll. Soll die Komponente am Bildschirm sichtbar sein? Jede Komponente kann den Container in dem sie sich befindet zurückgeben (oder null) 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 Bildlauf für eine Komponente Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 14

15 Allgemeines zu Container Anordnen von Benutzerschnittstellenkomponenten. Container sind selbst Benutzerschnittstellenkomponenten, sie können daher in anderen Containern enthalten sein (vgl. Datei/Verzeichnis). Koordinaten beziehen sich auf den Container, in dem sie eine Komponente befindet. yc2 xc2 yb xb Container2 Container1 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 15

16 Oberklasse java.awt.container Container ist von Component abgeleitet. Ein Container hat daher Größe, Position und kann eine Vielzahl von Ereignissen erzeugen. Container enthalten Komponenten, die wiederum Container sein können (Composit-Pattern). Dadurch wird die hierarchische Architektur von GUI-Anwendungen ermöglicht. Wichtige Methoden add(component c) remove(component c) removeall() int getcomponentcount() setlayout(layoutmanager l) validate() validatetree() Komponente hinzufügen Komponente entfernen Alle Komponenten entfernen Anzahl der Komponenten Layoutmanager setzten (ev: null -> kein LM) Alle Komponenten neu layouten Alle Komponenten rekursiv layouten 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 Component JComponent als Basisklasse aller leichtgewichtigen Komponenten ist von Container abgeleitet Container JFrame, JDialog, JWindow als Top-Level-Windows erweitern Frame, Dialog, Window 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 JWindow rahmenloses Fenster hat eine ContentPane, um Komponenten aufzunehmen window.getcontentpane().add(component) JFrame Typisch für Applikationsfenster mit Rahmen, Systemmenü und Standardschaltfläche JDialog 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 RootPane: Wurzel, enthält Border, Titel, LayeredPane LayeredPane: enthält Menüleiste und ContentPane ContentPane: eigentlicher Inhaltsbereich GlassPane: vorgelagerte, durchsichtige Pane für Effekte, die die ganze Frame betreffen JRootPane getrootpane() Container getcontentpane() JLayeredPane getlayeredpane() Component getglasspane() Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 19

20 Aufbau einer JFrame-Applikation import javax.swing.*; import java.awt.*; public class Listing3602 extends JFrame { public Listing3602() { super("ein einfacher JFrame"); //WindowListener hinzufügen addwindowlistener(new WindowClosingAdapter(true)); //Layout setzen und Buttons hinzufügen Container contentpane = getcontentpane(); contentpane.setlayout(new GridLayout(3, 1)); contentpane.add(new JButton("Button 1")); contentpane.add(new JButton("Button 2")); contentpane.add(new JButton("Button 3")); public static void main(string[] args) { Listing3602 wnd = new Listing3602(); wnd.setlocation(100, 100); wnd.setsize(300, 200); wnd.setvisible(true); public class WindowClosingAdapter extends WindowAdapter {... public void windowclosing(windowevent event) { event.getwindow().setvisible(false); event.getwindow().dispose(); if (exitsystem) { System.exit(0); 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 public void paint(graphics g) bei Swing-Komponenten protected void paintcomponent(graphics g) Aufruf der Methoden erfolgt durch den AWT-Thread Anwenderprogramm kann durch Aufruf von public void repaint() public void repaint(int x, int y, int width, int height) 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 paintcomponent auf Anwenderprogramm Swing_Komponente AWT Event Loop Changes() repaint paintcomponent Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 23

24 Threads and Swing Single Thread Rule Erlaubt aus anderen Threads ist erstellen einer GUI, aufrufen von repaint(), revalidate(), invalidate() Hinzufügen/Entfernen von Listenern Updaten einer GUI nur im Event-Thread zb: neue Komponente hinzufügen Hilfsklasse SwingUtilities mit den Methoden: - invokelater(runnable dorun) - invokeandwait(runnable dorun) - iseventdispatchthread() Runnable doworkrunnable = new Runnable() { public void run() { dowork(); void dowork() { if (!SwingUtilities.isEventDispatchThread()) { SwingUtilities.invokeLater(doWorkRunnable); return; // Update GUI here Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 24

25 Graphik Graphics Graphikkontext in der Methode paint Zeichnen von Linien, Figuren, Text und Bildern Ursprung links oben Graphics2D Erweitert Graphics um zusätzliche Zeichenoperationen Verwendung bei Swing-Komponenten Canvas public class SSWLogo extends Canvas { public void paint(graphics g) { g.setcolor(color.blue); g.fillrect(30, 10, 25, 30); g.setcolor(color.black); g.filloval(10, 10, 40, 30); g.setcolor(color.white); g.drawstring("ssw", 15, 30); Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 25

26 Graphik in Java Koordinatensystem p(0,0) ist links oben. p(getwidth()-1, getheight()-1) ist rechts unten. Dies gilt für jede GUI-Komponente (Vorsicht: Hierarchie). Die Positionen x, y einer GUI-Komponente beziehen sich auf deren Position im übergeordneten Container. 0,0 getwidth()-1, getheight()-1 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 26

27 Beispiel Graphikausgabe import java.awt.color; import java.awt.frame; import java.awt.graphics; public class PaintTest extends Frame { public PaintTest() { setsize(400, public void paint(graphics g) { for (int x = 0; x <= getwidth() - 1; x = x + 1) { g.setcolor(new Color(0, (int) (255.0 / getwidth() * x), (int) (255.0 / getwidth() * x))); g.drawline(x, 0, getwidth() - x, getheight() - 1); System.out.println(Thread.currentThread()); public static void main(string[] args) { PaintTest ptc = new PaintTest(); ptc.setvisible(true); Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 27

28 Graphikkontext, die Klasse Graphics Graphics ist eine abstrakte Klasse. Wie kommt man dazu? void paint(java.awt.graphics g) Graphics-Objekte erzeugt man niemals selbst. Graphics-Objekte speichert man nicht. Methoden zur Ausgabe von Grafik, zb: drawline(). Zuständen, die die Grafikausgabe beeinflussen Zeichenfarbe Schriftart logische Pixeloperation (XOR oder Paint) Clip (Zeichenoperationen wirken sich nur innerhalb des Clip aus) Betroffene Komponente Abstraktion eines Ausgabegeräts, zb: Bildschirm, Drucker oder Bild. Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 28

29 Zeichenoperationen der Klasse Graphics clearrect(int x,int y,int w, int h) copyarea(x,y, w,h, dx, dy) draw3drect(x,y,w,h, boolean raised) drawarc(x,y,w,h, int startangle, int arcangle) drawline(x1,y1,x2,y2) drawoval(x,y,w,h) drawpolygon(x[], y[], int npoints) drawpolyline(x[], y[], int npoints) drawrect(x,y,w,h) drawroundrect(x,y,w,h, int arcwidth, int archeight) drawstring(string str, x,y) fill3drect(x,y,w,h, boolean raised) fillarc(...) filloval(...) fillpolygon(...) fillroundrect(...)... drawimage(image img, x,y, ImageObserver obs) drawimage(...) Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 29

30 Weitere Methoden der Klasse Graphics translate(int x, int y) setpaintmode() setxormode(color c1) setfont(font f) setcolor(color c) setclip(x,y,w,h) getfontmetrics():fontmetrics getfont():font getcolor():color getclipbounds():rectangle... // Verschieben des Koordinatenursprungs // normalen Zeichenmodus setzen (default) // XOR-Modus momentane Farbe xor c1 // Schriftart setzen // Zeichenfarbe setzten // setzt neues Clip (Pixel nur innerhalb // betroffen) // holt Metrik-Informationen zur Font // z.b. Wie viele Pixel breit/hoch ist "1. // Object" // aktuelle Schriftart // Rechteckigen Clip-Bereich holen; // Auch wenn eine Linie über diesen // hinausgeht, wird nur innerhalb gezeichnet. 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: Font f = new Font("Monospaced", Font.BOLD, 14) drei Standard-Namen: "MonoSpaced", "Serif", "SansSerif" Einige Methoden: Font (String name, int style, int size) int getsize() // Schriftgröße in Pixel boolean isbold() // fett boolean isitalic() // kursiv static final int PLAIN // Konstanten für Schriftstil static final int BOLD static final int ITALIC... Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 31

32 Font und Fontmetrics Die Klasse Fontmetrics Stellt typographische Informationen über einzelne Zeichen und Strings in konkreten Schriftarten zur Verfügung. Erreicht man am besten über Grafikkontext: FontMetrics fm = g.getfontmetrics(); FontMetrics fm = g.getfontmetrics(afont); nützliche Methoden: int charwidth(char ch) int stringwidth(string s) int getascent() // Oberlänge int getdescent() // Unterlänge int getheight() // Höhe int getleading() // Zeilenabstand 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 LayoutManager setzen Größe der Komponenten bestimmen Komponenten anfügen LayoutManager bestimmt damit automatisch Positionierung und tatsächliche Größe acontainer.setlayout(new XXXLayout()); component1.setpreferredsize(new Dimension(100, 30)); component1.setminimumsize(new Dimension(60, 20)); component1.setmaximumsize(new Dimension(160, 40));... acontainer.add(component1); acontainer.add(component2); acontainer.add(othercontainer); //Layoutmanager bestimmt Positionen der Components im Container Swing-Komponenten haben drei Größeneigenschaften, die von Layoutmanagern verwendet werden preferredsize: bevorzugte Größe für Komponente minimumsize: minimale Größe für Komponente maximumsize: maximale Größe für Komponente Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 35

36 Layout Management Klassen FlowLayout Ordnet die Komponenten wie Wörter auf einer Seite an. (Zentriert, rechts- oder linksbündig) BorderLayout Unterstützt genau 5 Komponenten. Eine an jeder Seite und eine im Zentrum GridLayout Teilt den Container in Zeilen und Spalten. Alle Zellen sind gleich groß. GridBagLayout Sehr flexibel und kompliziert. Für jede Komponente können Einschränkungen definiert werden CardLayout 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) BoxLayout Ordnet Komponenten von rechts nach links, oben nach unten oder in Schreibrichtung an GroupLayout und SpringLayout Mächtig, komplex und speziell für GUI-Builder entwickelt Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 36

37 FlowLayout f = new FlowLayout(); f.setalignment(flowlayout.center, 20, 20) // Zentriert; horizontaler // und vertikaler Abstand = 20 container.setlayout(f); container.add(component1); container.add(component2); container.add(containerx); Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 37

38 BorderLayout container.setlayout(new BorderLayout()); container.add(component1, BorderLayout.NORTH); container.add(component2, BorderLayout.CENTER); container.add(containerx, BorderLayout.WEST);... Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 38

39 GridLayout g = new GridLayout(rows, cols); // Zeilen und Spalten container.setlayout(g); container.add(component1); // Auffüllen von links oben zeilenweise // nach rechts unten container.add(component2); container.add(containerx); Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 39

40 BoxLayout public class BoxLayoutTest extends JFrame { public BoxLayoutTest() { setdefaultcloseoperation(exit_on_close); settitle("box Layout Test"); setlayout(new BoxLayout(getContentPane(), BoxLayout.Y_AXIS));... btn = new JButton("Left aligned (long button)"); btn.setalignmentx(component.left_alignment); add(btn); btn = new JButton("Right aligned"); btn.setalignmentx(component.right_alignment); add(btn);... Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 40

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

42 null-layout Beim Arbeiten ohne LayoutManager muss man selbst für die Anordnung der Komponenten sorgen. Bei Größenänderungen erfolgt keine automatische Anpassung, wie bei Verwendung von Layout-Managern. Beispiel container.setlayout(null); // explizit nötig, um default-layout zu umgehen component1.setbounds(10,10,100,100); // x, y, Breite, Höhe component2.setbounds(10,150,100,100); // x, y, Breite, Höhe container.add(component1); container.add(component2); Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 42

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