Grafische Benutzeroberflächen in JAVA

Transkript

1 Grafische Benutzeroberflächen in JAVA Jan-Philipp Kappmeier Technische Universität Berlin

2 Inhalt 1 Swing-Einführung Einleitung Ein Fenster erstellen 2 Swing-Komponenten Einfache Komponenten Ereignisse und Listener Container-Komponenten Standarddialoge 3 Threads Umgang mit rechenintensiven Arbeiten in Swing 4 Java2D Manuelles Zeichnen 2 / 44

3 Einleitung Grafische Oberflächen in JAVA Java Foundation Classes (JFC) APIs für die Programmierung von grafischen Oberflächen in JAVA Abstract Window Toolkit (AWT) Swing Java2D Veraltet nicht Systemunabhängig Seit Java 1.2 (1998) Einheitliches Aussehen Accessibility Internationalization Drag & Drop 3 / 44

4 Einleitung Swing Was Swing kann Modular, Objektorientiert, nutzt MVC für Komponenten Plattformunabhängig Aussehen konfigurierbar mit Look-and-Feels einheitliche Designs, standard: Motif Standardsystem-Design möglich. (Unterstützt auf Windows, Linux, MacOS) Standardmäßig werden sehr viele (auch komplexe) Komponenten bereitgestellt Mittlerweile (spätestens ab Java 1.5) schnell 4 / 44

5 Einleitung Threads und Swing Swing ist nicht Threadsicher JAVA stellt immer den Event Dispatch Thread (EDT) bereit Swing-Komponenten dürfen nur im EDT erstellt werden Auch Zugriff auf Komponenten nur aus dem EDT Rechenintensive Arbeiten dürfen nicht im EDT stattfinden JAVA bietet verschiedene Hilfsklassen für diese Zwecke an 5 / 44

6 Einleitung Obligatorische Informationsquellen Java ist auch eine Insel (8. Auflage) http: //openbook.galileocomputing.de/javainsel8/ Swing Tutorials und Beispiele von Sun/Oracle http: //java.sun.com/docs/books/tutorial/uiswing/ Wie immer: die JAVA-API CoMa-Forum Google ist dein Freund 6 / 44

7 Ein Fenster erstellen Fenster in Swing Fenster Alle Komponenten in Swing beginnen mit einem J. Fenster sind vom Typ JFrame Als Prameter wird dem Konstruktor der Titel übergeben: JFrame fenster = new JFrame( "Mein Fenstertitel"); Die Methode setvisible kann es anzeigen und auch wieder ausblenden 7 / 44

8 Ein Fenster erstellen Beispiel: Erstellen eines einfachen Fensters // Create a window for the application JFrame frame = new JFrame( "HelloWorld Swing example" ); // Define what happens if the window closes frame.setdefaultcloseoperation( JFrame.EXIT_ON_CLOSE ); // Add a label with a message JLabel label = new JLabel( "Hello World!" ); // Add the label to the window frame.getcontentpane().add( label ); // Automatically set positions and sizes frame.pack(); // Finally, display the window frame.setvisible( true ); 8 / 44

9 Ein Fenster erstellen Erzeugen des Fensters im Event Dispatch Thread Bisher: Swing-Objekte müssen im EDT erzeugt werden. Aufgaben Auslagern Aufgaben, die Ausgelagert werden sollen, können vom Typ Runnable sein. Dies ist ein Interface. Die Methode run() muss implementiert werden. Sie kann dann von einem Thread aufgerufen werden 9 / 44

10 Ein Fenster erstellen Erzeugen des Fensters im Event Dispatch Thread forts. Zugriff auf den Event Dispatch Thread JAVA bietet dazu die Hilfsklasse SwingUtilities an invokeandwait führt ein Objekt vom Typ Runnable aus und wartet, bis die Aufgabe erledigt ist. Niemals im Event Dispatch Thread aufrufen! invokelater führt ein Objekt vom Typ Runnable aus und arbeitet direkt weiter. Mit iseventdispatchthread kann festgestellt werden, ob der Code gerade im Event Dispatch Thread ist 10 / 44

11 Ein Fenster erstellen Beispiel: Erstellen eines einfachen Fensters cont. public static void main( String[] args ) { // Create a new task for the event dispatch thread Runnable createwindowtask = new Runnable() { public void run() { createandshowwindow(); } }; } // Send the job to the event dispatch thread // and continue here SwingUtilities.invokeLater( createwindowtask ); // Will be executed in parallel dosomethingelse(); 11 / 44

12 Einfache Komponenten Normale Komponenten und Container Normale Komponenten Ermöglichen Interaktion mit dem Benutzer Benutzerinteraktion läuft über EventListener Viele zeigen Daten über ein Daten-Modell an (MVC) Zum Beispiel: JLabel, JButton, JTextField, JComboBox,... Container Meistens keine direkte Interaktion mit dem Benutzer Können andere Komponenten enthalten und ggf. anordnen Anordnung der Kind-Komponenten über LayoutManager Standardmäßig kann ein JFrame nur eine Komponente anzeigen Zum Beispiel: JPanel, JSplitPane, JTabbedPane, / 44

13 Einfache Komponenten Beispiel Komponenten // Create a label, button and checkbox JLabel label = new JLabel( "Ein Informationstext" ); JButton button = new JButton( "Eine Schaltfläche" ); JCheckBox checkbox = new JCheckBox( "Kontrollkästchen" ); // Add the components to the panel panel.add( label ); panel.add( button ); panel.add( checkbox ); // And add the panel to the frame frame.getcontentpane().add( panel ); 13 / 44

14 Einfache Komponenten Datenmodelle Komponenten mit Modellen Einige Komponenten speichern ihre Daten in einem Modell: JListBox, JComboBox, JTable Das Modell für die Listbox wird durch das Interface ListModel definiert Zu jedem Modell gibt es eine Standardvariante, für Listenfelder z. B. DefaultListModel Default-Modelle können meistens nur Text anzeigen Daten, die in der Komponente angezeigt werden sollen, müssen in das Modell eingefügt werden Dies ist eine Variante des MVC-Modells. Genauer: Observable/Observer 14 / 44

15 Einfache Komponenten Beispiel Kombinationslistenfeld mit Modell // Create a default model for the combo box DefaultComboBoxModel model = new DefaultComboBoxModel(); // Fill the model with some entries // For general objects tostring() is used for( int i = 1; i < 10; ++i ) model.addelement( "Zeile " + Integer.toString( i ) ); // Create a new combo box with the model JComboBox combobox = new JComboBox( model ); 15 / 44

16 Einfache Komponenten Einige Standardkomponenten und die zugehörigen Modelle Java-Komponente Modell-Interface Standardimplementation JList ListModel DefaultListModel JComboBox ComboBoxModel DefaultComboBoxModel JTable TableModel DefaultTableModel JTree TreeModel DefaultTreeModel 16 / 44

17 Ereignisse und Listener Reaktion auf Benutzereingaben Bislang: Erstellen von Steuerelementen (und Platzieren im Fenster). Nun: Reaktion auf Benutzereingaben Senden und Lauschen Alle Oberflächenkomponenten in Swing senden passende Ereignissnachrichten wenn ein Benutzer mit ihnen interagiert z. B. falls eine Schaltfläche gedrückt wird oder ein Listenelement ausgewählt wird Die Nachricht wird an alle Listener geschickt, die dem Sender bekannt sind (die das Interface EventListener implementieren) Wenn man an einer Nachricht interessiert ist, muss man sich beim Sender registrieren 17 / 44

18 Ereignisse und Listener Reaktion auf Benutzereingaben Beispiel Eine Schaltfläche sendet ein ActionEvent wenn sie gedrückt wird Registrierung eines listeners mit addactionlistener Der Listener ist abstrakt, es muss die Methode actionperformed( ActionEvent e ) implementiert werden die Methode wird aufgerufen wenn der Button gedrückt wird Einfachste Implementation: als anonyme Klasse Aber: wird schnell unübersichtlich. Dann Auslagern in eigene Klassen 18 / 44

19 Ereignisse und Listener Beispiel Schaltfläche und Listener als anonyme Klasse // Create a label, button and checkbox to the final JButton button = new JButton( "Hallo" ); // Add an action listener to the button button.addactionlistener( new ActionListener() { /** Change button text */ public void actionperformed( ActionEvent e ) { if( button.gettext().equals( "CoMa" ) ) button.settext( "Hallo" ); else button.settext( "CoMa" ); } } ); 19 / 44

20 Ereignisse und Listener Beispiel Schaltfläche und das Fenster als Listener Die Oberfläche selbst kann auch als Listener fungieren: // Create a class extending JFrame class MyFrame extends JFrame implements ActionListener { Dann kann die Instanz des Fensters an den Listener übergeben werden: // Add an action listener to the button button.addactionlistener( this ); Die Methoden des Listeners sind nun Methoden der Klasse: /** Change button text */ public void actionperformed( ActionEvent e ) { if( button.gettext().equals( "CoMa" ) ) button.settext( "Hallo" ); else button.settext( "CoMa" ); } 20 / 44

21 Ereignisse und Listener Beispiel Schaltfläche und separate Klasse als Listener Eine eigene Klasse für den Listener: // Create a class for the action listener public class MyListener extends ActionListener { /** Change button text */ public void actionperformed( ActionEvent e ) { System.out.println( "Schaltfläche gedrückt" ); } } Dann kann die Instanz des Fensters an den Listener übergeben werden: // Add an action listener to the button button.addactionlistener( new MyListener() ); Vorteile: Objektorientiert, Trennung von Oberfläche und Listener Gut für komplexen Programmcode geeignet 21 / 44

22 Ereignisse und Listener Einige Standardkomponenten in Swing Steuerelement Java-Komponente Interessanter Listener Fenster JFrame WindowListener Schaltfläche JButton ActionListener Textfeld JTextField KeyListener Textbereich JTextArea KeyListener Fortschrittsbalken JProgressBar ChangeListener Listenfeld JList ListSelectionListener Kombinationsliste JComboBox ItemListener Tabelle JTable Kontrollkästchen JCheckBox ActionListener Optionsfeld JRadioButton ActionListener Formatiertes Textfeld JEditPane KeyListener Hoch- Runter-Auswahl JSpinner ChangeListener Baum JTree spezielle TreeListener KeyListener, MouseListener, MouseWheelListener und MouseMotionListener für allgemeine Komponenten (JComponent). 22 / 44

23 Ereignisse und Listener Adapterklassen Listener im Detail Listener sind Interfaces alle Methoden müssen überschrieben werden Für MouseListener sind das 5 Stück! Wenn man am Mausklick interessiert ist, aber Mausbewegungen egal sind, bedeutet das 4 leere Methoden Als Lösung nutze Adapterklassen. Enthalten alle abstrakten Methoden leer vorimplementiert! Einige wichtige Adapterklassen: WindowAdapter, MouseAdapter, KeyAdapter 23 / 44

24 Container-Komponenten Anordnen von Komponenten in Containern Layouts von Containern Anordnung wird festgelegt von einem LayoutManager Wird mit setlayout( LayoutManager ) gesetzt Der zweite Parameter von.add() spezifiziert die Anordnung in Abhängigkeit vom gewählten LayoutManager Das Standardlayout ist FlowLayout und setzt alle Komponenten nebeneinander. Alle Container können ineinander verschachtelt werden! 24 / 44

25 Container-Komponenten Das BorderLayout Unterteilt das Fenster in 5 Bereiche Oben, Unten, Links, Rechts und Mitte Steuerelemente werden gestreckt, so dass der komplette Bereich ausgefüllt wird 25 / 44

26 Container-Komponenten Beispiel BorderLayout // Create a panel containing several components JPanel p = new JPanel(); // Set the layout manager for the panel p.setlayout( new BorderLayout() ); // Add some components to the panel // Each component can have one of 5 positions p.add( new JButton( "North" ), BorderLayout.NORTH ); p.add( new JButton( "South" ), BorderLayout.SOUTH ); p.add( new JButton( "East" ), BorderLayout.EAST ); p.add( new JButton( "West" ), BorderLayout.WEST ); p.add( new JButton( "Center" ), BorderLayout.CENTER ); 26 / 44

27 Container-Komponenten Das GridBagLayout Komplizierte Variante eines Gitters Teilt den Bereich in ein Gitter ein Elemente können über mehrere Spalten und Zeilen gehen Anordnung über Bedingungen und Gewichte Relativ kompliziert Einfaches Beispiel mit 5 Schaltflächen auf layout/gridbag.html benötigt etwa 40 Zeilen Code! Das einfachere GridLayout stellt ein Gitter zur Verfügung, in dem alle Komponenten gleiche Breite und Höhe haben und nur eine Zelle belegen können. 27 / 44

28 Container-Komponenten Das TableLayout Die bessere Gittervariante Beispiel Kann Komponenten ebenfalls auf einem Gitter platzieren Größe der einzelnen Zellen wird durch ein 2-dimensionales Array angegeben Absolute, relative und spezielle Größen möglich: Relativ: Zahlen von 0 bis 1 Absolut: Zahlen größer als 1 Speziell: TableLayout.PREFERRED, TableLayout.FILL Nicht offiziell im Umfang von Swing enthalten, nur als Bibliothek Angabe der Position von Schaltflächen über einen Koordinatenstring:.add( comp, "1,2,6,9") fügt eine Komponente comp hinzu, die den quadratischen Bereich von (1, 2) bis (6, 9) ausfüllt. 28 / 44

29 Container-Komponenten Beispiel TableLayout // Create the array for the layout double[][] size = { // Columns {10, TableLayout.PREFERRED, 10, TableLayout.FILL, 10}, // Rows {10, 0.12, 10, TableLayout.FILL, 10} }; // Set the layout manager for the panel panel.setlayout( new TableLayout( size ) ); // Add some components to the panel and the panel to the f panel.add( new JButton( "Links" ), "1,1" ); panel.add( new JButton( "Rechts" ), "3,1" ); panel.add( new JButton( "Unten" ), "1,3,3,3" ); frame.getcontentpane().add( panel ); 29 / 44

30 Container-Komponenten Weitere Layouts CardLayout Mehrere Komponenten aufeinander Nur eine wird angezeigt Wie Kartenstapel, wo nur die oberste Karte sichtbar ist BoxLayout Mehrere Komponenten nebeneinander oder übereinander Komponenten nebeneinander, auch wenn Fenstergröße verändert wird Nur für einfache Fälle geeignet, einfacher als TableLayout 30 / 44

31 Container-Komponenten Einige weitere Container in Swing JTabbedPane Ein Karteikartensystem mit Reitern JSplitPane Teilt das Fenster in zwei Bereiche mit verschiebbarem Trennelement JScrollPane Zeigt horizontale und vertikale Scrollbalken an Fungiert auch als Container für Elemente in den Ecken JToolBar Eine Symbolleiste Am oberen Rand angedockt oder auch als eigenes Fenster JMenuBar Spezieller Container der Menüelemente enthalten kann Eine Statusleiste (für den unteren Fensterrand) fehlt in Swing. Eine simple Variante kann von uns bereitgestellt werden, wenn ihr eine solche nutzen wollt. 31 / 44

32 Standarddialoge Schnelle Meldungen // Display an error message JOptionPane.showMessageDialog( // The parent window frame, // The error message "Schiefgelaufen!", // The Title "Fehler", // The symbol for the message JOptionPane.ERROR_MESSAGE ); 32 / 44

33 Standarddialoge Einen Text eingeben // Display a dialog to input a text String s = (String)JOptionPane.showInputDialog( // The parent frame frame, // The text "The answer to life, the universe and everything:", // The title "Question", // The symbol JOptionPane.PLAIN_MESSAGE ); 33 / 44

34 Standarddialoge Schnelle Entscheidungen // Custom text for the buttons Object[] options = {"Rote Pille", "Blaue Pille"}; // Get the index of the chosen button int n = JOptionPane.showOptionDialog( // The parent window frame, // Text in the dialog "Wähle eine Pille...", // Message title "Die wichtigste Entscheidung deines Lebens", // Style for the dialog: use buttons JOptionPane.YES_NO_CANCEL_OPTION, // Symbol and additional icon JOptionPane.QUESTION_MESSAGE, null, // The list of options and default option options, options[1] ); 34 / 44

35 Standarddialoge Weitere Dialoge: Spezialisierte Dialoge JColorChooser Zeigt ein Dialog zur Auswahl einer Farbe an JFileChooser Zeigt einen Dialog zum Öffnen/Speichern an 35 / 44

36 Umgang mit rechenintensiven Arbeiten in Swing Arbeitsweise von Swing Der Ereignis-Thread Jede Interaktion sendet ein Ereignis (Event) an den EDT Im EDT läuft eine Schleife die Nacheinander alle Ereignisse bearbeitet Wenn notwendig, werden passende EventListener aufgerufen Lange Berechnungen in Ereignisbehandlungsmethoden lassen die Oberfläche einfrieren Außerdem: deutlicher Geschwindigkeitszuwachs 36 / 44

37 Umgang mit rechenintensiven Arbeiten in Swing Arbeit auslagern in Threads Generelle Funktionsweise Java stellt die abstrakte Klasse SwingWorker<T,V> zur Verfügung Kann ein Ergebnis vom Typ T berechnen Kann zwischendurch Fortschritt vom Typ V ausgeben Aufgaben werden in der abstrakten Methode public T doinbackground() ausgeführt Ausführung in einem neuen Thread mit execute() done() wird (im EDT) aufgerufen, wenn die Ausführung beendet ist 37 / 44

38 Umgang mit rechenintensiven Arbeiten in Swing Arbeit auslagern in Threads forts. Anzeigen von Fortschritt Beispiel Fortschritt der Berechnung wird mit publish( V ) abgesendet dies passiert im neu gestarteten Thread process( List<V> chunks ) erhält eine Liste von evtl. mehreren Fortschrittsnachrichten (im EDT) es kann auf Swing-Komponenten zugegriffen werden Annahmen: Berechne ein Zwischenergbnis in 1 Millisekunde und sende Fortschritt mit publish Aktualisieren der Oberfläche dauert 0, 1 Sekunden Die Oberfläche kann nur jeden 100. Status anzeigen. Deshalb: Nachrichten werden gesammelt als Liste an process gegeben 38 / 44

39 Umgang mit rechenintensiven Arbeiten in Swing Beispiel SwingWorker /** A class computing a long with status text */ class Worker extends SwingWorker<Long, String> { /** Search for the next prime */ public Long doinbackground() { findnextmersenneprime( ); } /** Yipeeh, we are done. */ protected void done() { label.settext( "Gefunden: " + get() ); } } /** Give out some status text. */ protected void process( List<String> chunks ) { // Set the last process message as status text label.settext( chunks.get( chunks.size()-1 ) ); } 39 / 44

40 Manuelles Zeichnen Einleitung Grundlagen Oft gibt es kein spezielles Steuerelement für eine Aufgabe Erzeugen neuer Steuerelemente die von JComponent erben Zeichnen der Komponente mit paint( Graphics ) Java2D hat einen sehr großen Funktionsumfang! 40 / 44

41 Manuelles Zeichnen Beispiel Java2D Java2D initialisieren public void paint( Graphics g ) { super.paint( g ); // Set up the java2d graphics object Graphics2D g2d = (Graphics2D)g; // Set quality g2d.setrenderinghint( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON ); } 41 / 44

42 Manuelles Zeichnen Beispiel Java2D (2) Zeichenoptionen setzen // Set a drawing color. Here red g2d.setcolor( Color.red ); // Set a stroke type. Here: thick lines g2d.setstroke( new BasicStroke( 5 ) ); // Set a font by name g2d.setfont( new Font( "Comic Sans MS", Font.BOLD, 20 ) ); // or by type g2d.setfont( new Font( Font.SERIF, Font.PLAIN, 14 ); // or derive new font from the current font g2d.setfont( g2d.getfont().derivefont( 20f ) ); 42 / 44

43 Manuelles Zeichnen Beispiel Java2D (3) Formen Zeichnen // Draw a line, from start point to end point g2d.drawline( 0, 0, getwidth(), getheight() ); // Draw a rect between upper left and lower right g2d.drawrect( left, top, right, bottom ); // Draw a text starting in a point g2d.drawstring( "Text", startx, starty ); // Draw ellipse. Start us upper left of // the bounding rectangle g2d.drawarc( x, y, width, height, 0, 360 ); 43 / 44

44 Manuelles Zeichnen Beispiel Java2D (4) Ein Bild laden Viele Möglichkeiten. Komfortabel: die ImageIO-Klasse // Try to load an image. IOException may be thrown BufferedImage image; try { image = ImageIO.read( new File( "image.png" ) ); } catch( IOException ex ) { // Handle exception } // Draw an image from top left with width and height g2d.drawimage( image, topx, topy, width, height, this ); 44 / 44