Praktikum Systementwicklung Java Swing CNAM Praktikum Systementwicklung Prof. Dr. Bernhard Humm Hochschule Darmstadt – University of Applied Sciences Wintersemester 2006/2007

Agenda Agenda GUIs Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07. 13.12.2006

Grafische Benutzeroberflächen (GUIs) Beispiel aus dem Fachkonzept GB-HÄKO inhaltlich wir HÄKO im Vortrag dynamische Dialogspezifikation erläutert im Fachkonzept: Layout der Formular Dialog stammt aus ARRIBA 8.0 der RIB Software AG (www.rib.de) Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

Bausteine für das Dialoglayout (Bibliothek) GUIs Bausteine für das Dialoglayout (Bibliothek) Kopfzeile Spalte U 051111 000 051112 A 051115 001 V 051117 Datei Bearbeiten Ansicht Hilfe Teildialog Reiter Wert Feld Button Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

Agenda Java Swing Agenda Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07. 13.12.2006

Java Swing Java Swing Java Swing: Bibliothek von Bausteinen zur Erstellung von GUIs in Java Teil der JFC (Java Foundation Classes Basierend auf AWT (Abstract Windowing Toolkit, dem ersten, einfachen GUI-Framework in Java Portable, das heißt betriebssystemunabhängige GUIs Unser Beispiel: Calculator Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

Agenda GUI-Statik Agenda Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07. 13.12.2006

JFrame: Ein leeres Fenster anlegen GUI-Statik JFrame: Ein leeres Fenster anlegen javax.swing.*: Java Extensions mit allen Swing-Klassen JFrame: Fenster mit Rahmen und Inhaltsbereich (anfangs leer) JFrame wird initialisiert (damit erst einmal noch nicht sichtbar) Mit frame.setTitle(“Calculator“) kann der Fenstertitel gesetzt werden (alternativ mit Konstruktor) Anzeigen: frame.setVisible(true); package gui; import javax.swing.JFrame; public class CalculatorFrame extends JFrame { public static void main(String[] args) { CalculatorFrame calculatorFrame = null; calculatorFrame = new CalculatorFrame (); calculatorFrame.setVisible(true); } public CalculatorFrame() { super("Calculator"); Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

Das Fenster füllen: statisches GUI-Layout GUI-Statik Das Fenster füllen: statisches GUI-Layout Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

GUI-Statik Component Hierarchie Component: Objekt mit graphischer Repräsentation (AWT und Swing); kann Events verschicken und empfangen, Container: Behälter für andere Components (Composite Pattern); kann LayoutManager benutzen JComponent: Basisklasse für alle Swing-Komponenten; kann Look and Feel setzen JFrame, JDialog, JApplet: top-level Swing-Container JPanel: eingebetteter Swing-Container JLabel, JTextField, JButton, …: Swing-Komponenten Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

GUI-Statik LayoutManager Der LayoutManager ist für die Anordnung der Dialogelemente im Fenster verantwortlich Jeder LayoutManager verfolgt dabei eine eigene Strategie, Elemente zu platzieren und in der Größe so anzupassen, dass sie aus seiner Sicht optimal präsentiert werden Standard-LayoutManager: FlowLayout GridLayout BorderLayout CardLayout GridBagLayout Null-Layout: Handarbeit Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

GUI-Statik FlowLayout Das FlowLayout ordnet Dialogelemente nebeneinander in einer Zeile an Wenn keine weiteren Elemente in die Zeile passen, wird mit der nächsten Zeile fortgefahren. Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

GUI-Statik GridLayout Das GridLayout ordnet die Dialogelemente in einem rechteckigen Gitter an, dessen Zeilen- und Spaltenzahl beim Erstellen des Layoutmanagers angegeben wird (Das GridBagLayout ist ein komplexer Layoutmanager, der die Fähigkeiten von GridLayout erweitert und es ermöglicht, mit Hilfe von Bedingungsobjekten sehr komplexe Layouts zu erzeugen) Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

calculatorPanel: CENTER GUI-Statik BorderLayout Das BorderLayout verteilt die Dialogelemente nach Vorgabe des Programms auf die vier Randbereiche und den Mittelbereich des Fensters: NORTH SOUTH WEST EAST CENTER calculatorPanel: CENTER commandPanel: SOUTH Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

Das statische GUI-Layout programmieren GUI-Statik Das statische GUI-Layout programmieren private void layoutFrame() { Container contentPane; aLabel = new JLabel("a:"); aTextField = new JTextField(); calculatorPanel = new JPanel(new GridLayout(4, 2)); calculatorPanel.add(aLabel); calculatorPanel.add(aTextField); … computeButton = new JButton("Compute"); commandPanel = new JPanel(new FlowLayout()); commandPanel.add(computeButton); contentPane = this.getContentPane(); contentPane.setLayout(new BorderLayout()); contentPane.add(calculatorPanel, BorderLayout.CENTER); contentPane.add(commandPanel, BorderLayout.SOUTH); this.pack(); } Swing-Komponenten erzeugen durch Instanziierung, zum Beispiel new JLabel JPanels erzeugen durch Instanziierung Komponenten zu Containern hinzufügen durch add Beispiele für 3 LayoutManager frame.pack() (aus java.awt.Window): führt das Layout durch und passt die Fenstergröße an Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

Agenda GUI-Dynamik Agenda Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07. 13.12.2006

Das Model View Controller (MVC) Muster GUI-Dynamik Das Model View Controller (MVC) Muster Muster zur Gestaltung grafischer Benutzeroberflächen (aus Smalltalk 80) View: grafische Repräsentation, kennt Controller und Model Controller: Ablaufsteuerung, kennt View und Model Model: Anwendungsdaten und –funktionen; kennt im Idealfall weder Controller noch View; meldet nur Änderungen (Observer Pattern) JFrame implementiert View View: grafische Repräsen-tation Controller: Ablauf-steuerung Model: Anwendungs-daten und funktionen Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

Delegation-based Event Handling GUI-Dynamik Delegation-based Event Handling Kommunikation zwischen Betriebssystem und Anwendungsprogramm erfolgt durch das Versenden von Nachrichten Ereignisquellen (Event Sources) sind die Auslöser der Nachrichten Ereignisempfängern (EventListeners) sind Objekte, die das zum Ereignis passende Empfänger-Interface implementieren Damit ein Ereignisempfänger die Nachrichten einer bestimmten Ereignisquelle erhält, muss er sich bei dieser registrieren Delegation Based Event Handling: Mechanismus in Swing (mächtiger, aber auch komplexer als entsprechender Mechanismus in AWT) Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

GUI-Dynamik Events (Ereignisse) Klassenhierarchie für alle Ereignistypen; Wurzel: java.util.EventObject, Events für GUI-Programmierung in java.awt.AWTEvent Low-Level-Ereignisse ComponentEvent: für den Transfer von elementaren Nachrichten zuständig, die von Fenstern oder Dialogelementen stammen Semantische Ereignisse ActionEvent, AdjustmentEvent, ItemEvent und TextEvent: nicht an ein bestimmtes GUI-Element gebunden, sondern übermitteln höherwertige Ereignisse wie das Ausführen eines Kommandos oder die Änderung eines Zustands Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

Listener (Ereignisempfänger) GUI-Dynamik Listener (Ereignisempfänger) Damit ein Objekt Nachrichten empfangen kann, muss es eine Reihe von Methoden implementieren, die von der Nachrichtenquelle, bei der es sich registriert hat, aufgerufen werden können  Interfaces implementieren, die aus java.util.EventListener abgeleitet sind Je Ereignisklasse gibt es ein EventListener-Interface Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

Listener registrieren GUI-Dynamik Listener registrieren Listener muss ein EventListener Interface implementieren Im Beispiel: Controller-Klasse CalculatorController – ActionListener Variante anonyme innere Klassen auch gebräuchlich Ereignis-Auslöser: hier JButton (ActionEvent) Registrierung von calculatorController bei computeButton durch addActionListener import java.awt.event.*; public class CalculatorController implements ActionListener { CalculatorFrame calculatorFrame; … } private void layoutFrame() { ... computeButton = new JButton("Compute"); computeButton.addActionListener( getCalculatorController()); } Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

GUI-Dynamik Auf Events reagieren ActionListener muss die Methode actionPerformed(ActionEvent e) implementieren Aufruf des Models, hier: Calculator Klasse mit Klassenmethode compute(a, operator, b) Parameter auslesen aus View, hier: calculatorFrame. getATextField().getText(); Ergebnis rückschreiben in View, hier: calculatorFrame. getResultTextField(). setText(result); import java.awt.event.*; public class CalculatorController implements ActionListener { CalculatorFrame calculatorFrame; public void actionPerformed(ActionEvent e) { if(e.getActionCommand().equals("Compute")){ String a, operator, b, result; a = calculatorFrame.getATextField().getText(); operator = calculatorFrame.getOperatorTextField(). getText(); b = calculatorFrame.getBTextField().getText(); result = Calculator.compute(a, operator, b); calculatorFrame.getResultTextField().setText(result); } … } Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

GUI-Dynamik Fenster schließen frame.setVisible(false): schließt die Anzeige eines Fensters; das Fenster kann durch setVisible(true) jederzeit wieder geöffnet werden frame.dispose(): schließt die Anzeige des Fensters und räumt alle Ressoucen auf. Das Fenster kann nicht mehr geöffnet werden System.exit(0): beendet das Programm import java.awt.event.*; public class CalculatorController implements ActionListener { CalculatorFrame calculatorFrame; public void actionPerformed(ActionEvent e) { … if (e.getActionCommand().equals("Quit")){ calculatorFrame.setVisible(false); calculatorFrame.dispose(); System.exit(0); } … } Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,

Agenda Referenzen Agenda Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07. 13.12.2006

Referenzen Zum Weiterlesen Guido Krüger, Handbuch der Java-Programmierung, Kapitel 23 - 40 Hochschule Darmstadt – University of Applied Sciences. Fachbereich Informatik. Prof. Dr. Bernhard Humm. WS 06/07., 13.12.2006,