Java: Programmierung grafischer Oberflächen Richard Göbel

Grafische Benutzeroberflächen: Konzepte Klassische Programmierung: Programme werden schrittweise abgearbeitet Das Programm gibt die Reihenfolge der Ein- und Ausgabe vor Das Programm wartet in der Regel auf eine Eingabe Graphische Benutzeroberflächen Der Anwender kann unterschiedliche Aktionen in beliebiger Reihenfolge durchführen Größere Aktionen werden parallel zu Aktionen des Benutzers durchgeführt Benutzeraktionen finden asynchron zu Aktionen des Programms statt.

Grafische Benutzeroberflächen: Ansatz Aufbau einer grafischen Oberfläche aus Windows (Fenstern) Komponenten für Ein- und Ausgabe (Button, Checkbox, Textfeld, etc) Zuordnung von Programmcode zu einzelnen Komponenten und Ereignissen Kommunikation mit parallel ablaufenden Prozessen zur Bearbeitung komplexer Aufgaben

Grafische Benutzeroberflächen: Klassen Windows in Swing: JFrame für ein Hauptfenster mit einer optionalen Menüleiste (JMenuBar) JDialog für ein Dialogfenster. JApplet für eine WWW-Browser-Anwendung. ContentPane zur Aufnahme von Komponenten wie JTextField, JList und JButton LayoutManager Ereignisse in der grafischen Benutzeroberfläche wie Mausklicks oder Tastatureingaben werden durch EventListener behandelt.

Grafische Benutzeroberflächen: Aufbau JList JTextField JLabel JButton Einfügen der Komponenten entsprechend des gewählten Layouts Unterklasse der Klasse JFrame als Hauptfenster einer Anwendung WEST CENTER SOUTH Anordnung der Komponenten mit Hilfe eines Layout Manager Komponenten werden in den ContentPane eingefügt ListSelection Listener Definition von Event Listener und Zuordnung zu Komponenten ActionHandler ActionHandler

Grafische Benutzeroberflächen: Bibliotheken Abstract Window Toolkit (AWT) ist die Basis für alle graphischen Anwendungen in Java. Swing erweitert das AWT und stellt zum Teil modernisierte Klassen für AWT-Klassen zur Verfügung (JXXX) Achtung: Im WWW steht Swing nur in wenigen Browsern (z.B. Netscape 6.0) zur Verfügung. Die Behandlung von Ereignissen in Java 1.0 ist nicht kompatibel zu den neueren Versionen von Java.

Grafische Benutzeroberflächen: Imports Typische Packages import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; . . . Weitere Packages nach Bedarf (siehe API-Dokumentation)

Grafische Benutzeroberflächen - Programmcode für ein Window class MainWindow extends JFrame { JPanel contentPane; // Hier Deklaration aller Komponenten . . . public MainWindow() { contentPane = (JPanel) getContentPane(); // Hier Window aufbauen } public static void main(String[] args) { // Hier Objekt der Klasse erzeugen // zum Beispiel: MainWindow frame = new MainWindow(); frame.setTitle("Test"); frame.setSize(new Dimension(250,300)); frame.setVisible(true);}}

Grafische Benutzeroberflächen - Definition der Komponenten als Attribute der Klasse class VorlesungEditor extends JFrame { JPanel contentPane, panBezeichnung = new JPanel(), panStunden = new JPanel(), panVorlesung = new JPanel(), panButton = new JPanel(); JTextField tfBezeichnung = new JTextField(10), tfStunden = new JTextField(2); JLabel labBezeichnung = new JLabel("Bezeichnung: "), labStunden = new JLabel("Stunden: "); JButton butSpeichern = new JButton("Speichern"), butAbbrechen = new JButton("Abbrechen"); DefaultListModel dlm = new DefaultListModel(); JList auswahl = new JList(dlm);

Grafische Oberflächen - Initialisierung der JList im Konstruktor auswahl.setSelectionMode( ListSelectionModel.SINGLE_SELECTION); dlm.addElement(new Vorlesung("Datenbanksysteme",4)); dlm.addElement(new Vorlesung("Betriebssysteme",4)); dlm.addElement(new Vorlesung("Mathematik",6)); dlm.addElement(new Vorlesung("Programmieren",8));

Grafische Benutzeroberflächen - Wahl eines geeigneten Layouts FlowLayout Anordnung von links nach rechts und von oben nach unten. BoxLayout Anordnung entweder horizontal oder vertikal. BorderLayout Anordnung in bis zu 5 Bereichen "North", "South", "East", "West" und "Center" GridLayout Anordnung in einer Matrix. CardLayout Anordnung auf alternativenDarstellungsbereichen. GridBagLayouts Anordnung von Komponenten in mehreren Zellen einer Matrix

Grafische Benutzeroberflächen - Kombination von Layouts mit JPanel  ContentPane mit BorderLayout (hier: West, Center, South)  JPanel mit vertikalem BoxLayout  JPanel mit horizontalem BoxLayout

Grafische Benutzeroberflächen - Beispiel: Bereiche mit horizontalem BoxLayout (Teil 1) panBezeichnung.setLayout(new BoxLayout(panBezeichnung,BoxLayout.X_AXIS)); panBezeichnung.add(Box.createRigidArea(new Dimension(5,0))); panBezeichnung.add(labBezeichnung); panBezeichnung.add(Box.createHorizontalGlue()); tfBezeichnung.setMaximumSize(new Dimension(80,15)); panBezeichnung.add(tfBezeichnung);

panStunden.setLayout(new BoxLayout(panStunden,BoxLayout.X_AXIS)); Grafische Benutzeroberflächen - Beispiel: Bereiche mit horizontalem BoxLayout (Teil 2) panStunden.setLayout(new BoxLayout(panStunden,BoxLayout.X_AXIS)); panStunden.add(Box.createRigidArea(new Dimension(5,0))); panStunden.add(labStunden); panStunden.add(Box.createHorizontalGlue()); tfStunden.setMaximumSize(new Dimension(25,15)); panStunden.add(tfStunden);

panVorlesung.setLayout(new BoxLayout(panVorlesung,BoxLayout.Y_AXIS)); Grafische Benutzeroberflächen - Beispiel: Bereiche mit verschiedenen BoxLayouts panVorlesung.setLayout(new BoxLayout(panVorlesung,BoxLayout.Y_AXIS)); panVorlesung.add(panBezeichnung); panVorlesung.add(panStunden); panButton.setLayout(new BoxLayout(panButton,BoxLayout.X_AXIS)); panButton.add(butSpeichern); panButton.add(Box.createHorizontalGlue()); panButton.add(butAbbrechen);

Grafische Benutzeroberflächen - Beispiel: Bereich mit BorderLayout contentPane = (JPanel) getContentPane(); contentPane.setLayout(new BorderLayout()); contentPane.add(auswahl, BorderLayout.WEST); contentPane.add(panVorlesung,BorderLayout.CENTER); contentPane.add(panButton,BorderLayout.SOUTH);

Grafische Benutzeroberflächen - Größe von Komponenten Beeinflussung der Größe von Komponenten mit den folgenden Methoden: setPreferredSize(Dimension d) setMinimumSize(Dimension d) setMaximumSize(Dimension d) Nicht alle Layouts berücksichtigen diese Angaben vollständig: vollständige Berücksichtigung durch das BoxLayout teilweise Berücksichtigung durch das BorderLayout keine Berücksichtigung durch das GridLayout

Grafische Benutzeroberflächen - EventListener Mit einem EventListener lassen sich Aktionen für verschiedene Ereignisse zuordnen, wie zum Beispiel: Mausklick oder Mausbewegung Auswahl eines Elements aus einem Menü Aktionen auf einem Window Ein EventListener ist ein Objekt einer durch den Anwender implementierten Klasse. Eine Klasse für einen EventListener: Stellt eine oder mehrere Methoden zur Verarbeitung von Ereignissen zur Verfügung (Interface) wird als innere Klasse einer Window-Klasse definiert

Grafische Benutzeroberflächen - Beispiel für einen ActionListener class SpeichernListener implements ActionListener { public void actionPerformed(ActionEvent e) . . . } }); // Klasse innerhalb des Windows! butSpeichern.addActionListener(new SpeichernListener());

Grafische Benutzeroberflächen - Elemente der Definition eines Listener Welches Interface wird implementiert? ActionListener WindowListener . . . Methoden für ein Interface? ActionListener: actionPerformed(ActionEvent) WindowListener: windowOpened(WindowEvent), windowClosing(WindowEvent), . . . . . . Adapter statt Listener mit vordefinierten Methoden

Grafische Benutzeroberflächen - Definition eines anonymen ActionListener I butSpeichern.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { Vorlesung v = (Vorlesung) auswahl.getSelectedValue(); v.setBezeichnung(tfBezeichnung.getText()); try { v.setStunden( Integer.parseInt(tfStunden.getText()));} catch (NumberFormatException ex) { tfStunden.setText(v.getStunden() + "");} } });

Grafische Benutzeroberflächen - Definition eines anonymen ActionListener II butAbbrechen.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { Vorlesung v = (Vorlesung) auswahl.getSelectedValue(); tfBezeichnung.setText(v.getBezeichnung()); tfStunden.setText(v.getStunden() + ""); } });

Grafische Benutzeroberflächen - Beispiel für einen ListSelectionListener auswahl.addListSelectionListener(new ListSelectionListener() { public void valueChanged(ListSelectionEvent e) { Vorlesung v = (Vorlesung) auswahl.getSelectedValue(); tfBezeichnung.setText(v.getBezeichnung()); tfStunden.setText(v.getStunden() + ""); } });

Grafische Benutzeroberflächen - Beispiel für einen WindowAdapter public static void main(String[] args) { VorlesungEditor frame = new VorlesungEditor(); frame.setTitle("Vorlesung Editor"); frame.addWindowListener(new WindowAdapter(){ public void windowClosing(WindowEvent e) { System.exit(0); } }); frame.pack(); frame.setVisible(true);