Einführung in Swing. Graphical User Interface

Transkript

1 Einführung in Swing Ho Ngoc Duc IFIS - Universität zu Lübeck Graphical User Interface Ein GUI-Programm beinhaltet: Graphische Darstellung der Anwendungsdaten und Interaktionsmöglichkeiten in Fenstern Steuerung der Anwendung durch Maus- und Tastaturaktionen auf GUI-Elementen in den Fenstern: Buttons, Menüs, Eingabefelder, Dialogboxen, Slider, (EventHandling) 1

2 Was ist SWING? SWING ist die Java Klassenbibliothek zur Entwicklung grafischer Oberflächen. Im Gegensatz zum AWT (Abstract Windowing Toolkit) nutzt SWING leichtgewichtete Komponenten (leightweight components): Abgesehen von Top-Level-Fenstern, Dialogen und grafischen Primitivoperationen werden alle GUI- Elemente von Swing selbst gezeichnet. Dynamische Umschaltung des Aussehen (Swing, Motif, Windows) => Pluggable Look-and-Feel HelloWorld mit Swing 1 import javax.swing.*; 2 public class HelloWorldSwing { 3 public static void main(string[] args) { 4 JFrame frame = new JFrame("HelloWorldSwing"); 5 final JLabel label = new JLabel("Hello World"); 6 frame.getcontentpane().add(label); 7 frame.setdefaultcloseoperation(jframe.exit_on_close); 8 frame.pack(); 9 frame.setvisible(true); 10 } 11 } Zeile 1: importiere das Swing-Paket javax.swing. Zeile 4: ein Frame ist ein Top-Level Window Zeile 5: ein JLabel ist eine primitive Komponente (component). Zeile 6: getcontentpane() gibt den Behälter (container) des Frame zurück. Zeile 7: Aktion definiert, die beim Schließen des Fensters ausgeführt wird Zeile 8: Layoutmanager des Behälters wird aktiviert, um die Komponenten im Behälter zu packen Zeile 9: die graphische Darstellung wird angestoßen. 2

3 Architektur einer Swing-Applikation Model-Viewer-Controller Modell : enthält die Daten des Dialogelements und speichert seinen Zustand. View : ist für die grafische Darstellung der Komponente verantwortlich. Controller : wirkt als Verbindungsglied zwischen beiden. Er empfängt Tastatur- und Mausereignisse und stößt die erforderlichen Maßnahmen zur Änderung von Model und View an. Graphische Oberfläche Top-Level-Container (JFrame, JDialog, JApplet) erzeugen. Dieser: vom Windowsystem verwaltetes Fenster, enthält Zeichenfläche Oberflächenelemente direkt in Top-Level- Container oder in andere Container (wichtig: Box, JPanel) Anordnung der Oberflächenelemente in einem Container: LayoutManaget 3

4 Swing Komponenten sind in einem Container enthalten sind manchmal selbst Container haben ein bestimmtes graphisches Aussehen können Text oder Graphiken zur Darstellung der Daten der Anwendung enthalten ("Model") können mit Aktionsobjekten verknüpft sein. Behandlung dieser Aktionen: Controller Swing Komponenten I JLabel JButton... JTextField JTextArea JList JToolBar JComboBox JScrollPane JSlider JToolTip JProgressBar JTree JTabbedPane JTable JSplitPane JMenu... 4

5 Swing Komponenten II.showMessageDialog JFrame JDialog JInternalFrame.showWarningDialog.showInputDialog JColorChooser JFileChooser.showConfirmDialog Layoutmanager I Layoutmanager organisieren die Positionierung der grafischen Elemente innerhalb der sie enthaltenden Container. Die Layoutmanger arbeiten jeweils mit einer unterschiedlichen Verteilungs-Logik. In der Regel bestimmt die Reihenfolge der Einfügung der Swingelemente auch die Anordnungsreihenfolge im Container. Es ist möglich Layoutmanager zu schachteln. Hierdurch können komplexe Anordnungen realisiert werden. Das spezielle Null-Layout erlaubt die Positionierung der Elemente durch Angabe ihre absoluten Koordinaten. 5

6 Layoutmanager II FlowLayout: ordnet Dialogelemente nebeneinander in einer Zeile an. Wenn keine weiteren Elemente in die Zeile passen, wird mit der nächsten Zeile fortgefahren. GridLayout: ordnet die Dialogelemente in einem rechteckigen Gitter an, dessen Zeilen- und Spaltenzahl beim Erstellen des Layoutmanagers angegeben wird. BorderLayout: verteilt die Dialogelemente nach Vorgabe des Programms auf die vier Randbereiche und den Mittelbereich des Fensters. NullLayout: erlaubt die Positionierung der Elemente durch Angabe ihrer absoluten Koordinaten Ferner: CardLayout, GridBagLayout, BoxLayout frame.setlayout( new BorderLayout( ) ); frame.add( new Button( "Norden" ), BorderLayout.NORTH ); frame.add( new Button( "Zentrum, BorderLayout.CENTER) );... FlowLayout GridLayout 6

7 Das Event-Modell von Swing Eine Komponente kann Ereignisse auslösen Beispiel: Button clicken, im TextField "Enter" drücken: Action-Event. Element einer Listen auswählen: Item-Event Jeder Ereignistyp durch eine Klasse repräsentiert: java.awt.event.xxxevent "Controller": Ereignisse abfangen und verarbeiten (Modell, View ändern) Event/Listener Ereignisse einer Komponente abfangen: Listener-Objekte für Ereignistyp mit Komponente registrieren: addxxxlistener Geschäftslogik: Listener-Klasse. Muß nur das geeignete Interface implementieren ActionEvent-ActionListener, KeyEvent- KeyListener, ItemEvent-ItemListener... 7

8 Listener-Beispiel int count = 0; JLabel l = new JLabel ("Number of clicks: "+count); JButton b = new JButton("Click me!"); b.addactionlistener(new AL()); class AL implements ActionListener() { public void actionperformed(actionevent e) { count++; l.settext("number of clicks: "+count); } } Schritte eines Swing-Programms Kreiere Komponenten Konfiguriere Komponenten Kreiere Container für Komponenten Assoziiere Layoutmanager mit Containern Füge Komponenten in Container ein Definiere Listener für zur verarbeitende GUI-Ereignisse Registriere Listener bei Komponenten Zeige die GUI 8

9 Dialog zur Datenbankverbindung Benötigte Komponenten Textanzeige: JLabel ("Type:", "Driver:",...) JLabel typelabel, driverlabel, urllabel, userlabel, passwordlabel; Texteingabe: JTextField, JPasswordField JTextField driverfield, urlfield, userfield; JPasswordField passwordfield; Dropdown-Liste: JComboBox JComboBox typelist; Buttons: JButton JButton ok, cancel; Evtl. Container zum Gruppieren 9

10 Komponenten kreieren typelabel = new JLabel("Type:"); typelist = new JComboBox(liste); typelist.seteditable(false); typelist.additemlistener(new IL()); driverlabel = new JLabel("Driver:"); urllabel = new JLabel("URL:"); userlabel = new JLabel("User:"); passwordlabel = new JLabel("Password:"); driverfield = new JTextField(30); urlfield = new JTextField(30); userfield = new JTextField(30); passwordfield = new JPasswordField(30); ok = new JButton("OK"); cancel = new JButton("Cancel"); Container für Komponenten 1. Wahl: JPanel 5 unterschiedlich lange Labels in gleich große Zellen verteilen: GridLayout JPanel labels = new JPanel(); labels.setlayout(new GridLayout(0, 1)); labels.add(typelabel); labels.add(driverlabel); labels.add(urllabel); labels.add(userlabel); labels.add(passwordlabel); 10

11 Layout Ähnlich: JPanel (Name: inputs) für Combo-Box und Eingabefelder; JPanel (Name: but) für beide Buttons labels und inputs horizontal verteilen, but am unteren Rand Box up = Box.createHorizontalBox(); up.add(labels); up.add(inputs); Box main = Box.createVerticalBox(); main.add(up); main.add(but); add(main); EventHandling class IL implements ItemListener { public void itemstatechanged(itemevent e) { int idx = typelist.getselectedindex(); driverfield.settext(drivers[idx]); urlfield.settext(urls[idx]); } } typelist.additemlistener(new IL()); 11

12 Happy coding! 12