4. Softwareentwicklung 4.0 Grafische Benutzeroberflächen Der Einsatz von grafischen Benutzeroberflächen (Graphicel User Intefaces GUI) gestaltet die Ausführung von Programmen komfortabel, macht allerdings auch die Programme selbst wesentlich komplexer. In Kapitel 4 wird gemeinsam an Softwareprojekten gearbeitet, bei denen unsere Kenntnisse über Rekursion, Listen, Bäume, Graphen und Entwurfsmuster zum Einsatz kommen. Der Inhalt des Kapitels 4.0, also das Programmieren von GUIs, ist kein Pflichtinhalt für das Abitur. Das Durcharbeiten vertieft und ergänzt aber das Wissen über Java-Programmierung, Datenstrukuren und Entwurfsmuster und fördert das Verständnis dieser Konzepte.   Beispiel für eine grafische Benutzeroberfläche aus einem ehemaligen Softwareprojekt: Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen

Das offizielle Java Tutorial: Anleitungen Bei der Entwicklung und Programmierung von Grafikanwendungen benötigt man häufiger das Nachschlagen in Handbüchern. Die Auswahl ist riesig und man sollte sich für höchstens zwei bis drei Werke entscheiden, mit denen man bevorzugt arbeitet. Selten sinnvoll ist das Durchforschen unzähliger Internetforen, in denen sich nicht alle Autoren durch Kompetenz auszeichnen. Das offizielle Java Tutorial: http://docs.oracle.com/javase/tutorial/index.html Die Java API (Application Programming Interface): http://docs.oracle.com/javase/8/docs/api/ Java ist auch eine Insel: http://openbook.rheinwerk-verlag.de/javainsel9/ Java Handbuch Krüger: http://www.javabuch.de/  Download der 7. Auflage (2011) als html-Version: http://www.javabuch.de/download.html (Neuere Auflagen gibt es nicht mehr als kostenfreie html-Version; die 7. Auflage ist aber meistens völlig ausreichend) Ein sehr übersichtliches privates Java-Tutorial: http://www.java-tutorial.org/index.html Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen

4.0.1 Entwicklungsumgebungen Grafische Benutzeroberflächen ausschließlich mit Quelltext zu erstellen ist ineffizient und sehr mühsam. Entwicklungsumgebungen bieten deshalb GUI-Designer an, die das Gerüst für die Strukturen erstellen. In diesem Gerüst erstellt man an den passenden Stellen den Quelltext. BlueJ Für BlueJ muss man eine Extension installieren: Homepage von BlueJ: http://www.bluej.org/ Auf der Seite gibt es einen Link zu den Extensions: http://www.bluej.org/extensions/extensions.html Dort wählt man den Simple GUI-Designer:  http://gbluej.slunecnisoustava.eu Die heruntergeladene jar-Datei wird in das Verzeichnis lib/extensions/ kopiert und muss noch auf der BlueJ-Oberfläche unter Preferences aktiviert werden. Unter Tools erscheint dann das Menü Simple GUI Extension, welches den Designer aufruft. BlueJ ist grundsätzlich sehr übersichtlich, aber zum effizienten Arbeiten ist dieser Designer leider nicht zu empfehlen. Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.1 Entwicklungsumgebungen

4.0.1 Entwicklungsumgebungen JavaEditor Homepage: http://javaeditor.org Die Entwicklungsumgebung lässt sich intuitiv bedienen und bringt alles mit, was man als fortgeschrittener Anfänger braucht und ist sehr empfehlenswert. Außerdem gibt es eine portable Version, die direkt von einem USB-Stick läuft. Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.1 Entwicklungsumgebungen

4.0.1 Entwicklungsumgebungen JavaEditor Besonders nützlich und gut umgesetzt ist die für Projektbeschreibungen wichtige Funktion, UML-Diagramme zu erstellen. Klickt man mit der rechten Maustaste auf die Klassenkarten, lassen sich ähnlich wie in BlueJ Objekte erzeugen und Methoden ausführen. Zur automatischen Code-Vervollständigung (Strg+Leertaste) sollte man noch die Java-Dokumentation installieren: http://www.oracle.com/technetwork/java/javase/documentation/jdk8-doc-downloads-2133158.html Nach dem Herunterladen gibt man in der Konfiguration den entsprechenden Pfad an: Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.1 Entwicklungsumgebungen

4.0.1 Entwicklungsumgebungen Eclipse Eclipse ist eine freie, professionelle Entwicklungsumgebungen, deren Funktionen besonders in größeren Softwareprojekten sinnvoll zum Einsatz kommen. Eclipse herunterladen: http://www.eclipse.org/downloads/  Eclipse installieren: https://wiki.eclipse.org/Eclipse/Installation Eventuell ist es nötig, die Datei eclipse.ini anzupassen: https://wiki.eclipse.org/Eclipse.ini Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.1 Entwicklungsumgebungen

4.0.1 Entwicklungsumgebungen Eclipse Einen GUI-Designer muss man manuell nachinstallieren, z.B. http://www.eclipse.org/windowbuilder/ Öffne in File-New-Other-WindowBuilder eine Swing-Komponente: Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.1 Entwicklungsumgebungen

4.0.1 Entwicklungsumgebungen NetBeans NetBeans ist eine freie, professionelle Entwicklungsumgebungen, deren Funktionen besonders in größeren Softwareprojekten sinnvoll zum Einsatz kommen. NetBeans herunterladen: https://netbeans.org/ Der GUI-Designer ist bereits integriert. Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.1 Entwicklungsumgebungen

4.0.2 Struktur von Grafikanwendungen Für die Gestaltung grafischer Oberflächen (sog. GUI-Anwendungen; GUI steht für Graphical User Interface) stellt Java u.a. die Grafikbibliotheken AWT (Abstract Windowing Toolkit) und Swing zur Verfügung. Die Fähigkeiten dieser Bibliotheken lassen sich im wesentlichen in vier Gruppen unterteilen:  Grafische Operationen zum Zeichnen von Linien oder Füllen von Flächen und zur Ausgabe von Text  Methoden zur Steuerung des Programmablaufs auf der Basis von Nachrichten für Tastatur-, Maus- und Fensterereignisse  Dialogelemente zur Kommunikation mit dem Anwender und Funktionen zum portablen Design von Dialogboxen  Fortgeschrittenere Grafikfunktionen zur Darstellung und Manipulation von Bitmaps und zur Ausgabe von Sound  Die Möglichkeiten von Swing überschreiten die des AWT bei weitem, zudem ist AWT mittlerweile veraltet. Das AWT ist jedoch wesentlich einfacher zu erlernen und die Konzepte kann man gut auf das umfangreichere Swing übertragen. Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.2 Struktur von Grafikanwendungen

4.0.2 Struktur von Grafikanwendungen Einer der wesentlichen Vorteile von Swing ist die Verwendung des Entwurfsmusters MVC (Model View Controller) .  Man unterscheidet in Swing drei unterschiedliche Bestandteile eines grafischen Elements :  Das Model enthält die Daten des Dialogelements (in der Grafik als JComponent bezeichnet) und speichert seinen Zustand.  Die View realisiert die grafische Darstellung der Komponente am Bildschirm.  Der Controler ist für die Interaktion mit dem Anwender verantwortlich und delegiert die erforderlichen Maßnahmen beim Model und der View.  Ändert sich das Model, wird die View informiert und die geänderten Daten werden angezeigt.  Aufgrund der komplexen Wechselwirkung zwischen View und Controler sind diese in Swing zum sog. Delegate zusammengefasst.  Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.2 Struktur von Grafikanwendungen

4.0.2 Struktur von Grafikanwendungen Das MVC-Entwurfsmuster in einem Anwendungsbeispiel: Der Anwender arbeitet mit den Daten (Model), Java Swing kümmert sich um die Anzeige und um die Interaktion mit dem Anwender. Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.2 Struktur von Grafikanwendungen

4.0.3 Programmieren einfacher GUIs Beispiel 1: Wurzelrechner Die GUI entält zwei JLabels (mit dem Einträgen "Eingabe:" und "Ergebnis:"), zwei JTextFields und zwei JButtons. Die Berechnung der Wurzel soll dabei in die Klasse WurzelModel.java ausgelagert werden. Die Erläuterungen in den folgenden Aufgaben beziehen sich auf die Entwicklungsumgebung JavaEditor. public class WurzelModel{ double wurzel; public WurzelModel(){ wurzel = 0;} public void berechnen(double radikand){ if (radikand>=0) { wurzel = Math.sqrt(radikand); } public double getWurzel(){ return wurzel; Aufgabe 1:  Wähle Datei – Neu – Java und erstelle die Klasse WurzelModel. Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs

Beispiel 1: Wurzelrechner Aufgabe 2:  Erstelle ein JFrame und speichere es in dem Projekt unter dem Namen WurzelView ab. Wirf einen Blick in den Ordner, in dem die Dateien gespeichert werden: Das Projekt enthält neben der Java-Datei WurzelView.java auch die Datei WurzelView.jfm, die als GUI-Designer arbeitet.  Füge die benötigten Swing-Komponenten dazu, platziere und benenne sie sinnvoll (z.B. jButton_Berechnen statt dem vorgeschlagenen jButton1, jLabel_Eingabe statt jLabel1, usw.).  Dies kann man im Quelltext oder einfacher mit dem Objektinspektor (Menü-Fenster) erledigen. Beobachte, wie sich der Quelltext automatisch verändert!  Anschließend beschriftest du die Komponenten passend. Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs

Beispiel 1: Wurzelrechner Aufgabe 2 (Fortsetzung) Füge die benötigten Swing-Komponenten dazu, platziere und benenne sie sinnvoll (z.B. jButton_Berechnen statt dem vorgeschlagenen jButton1, jLabel_Eingabe statt jLabel1, usw.).  Dies kann man im Quelltext oder einfacher mit dem Objektinspektor (Menü-Fenster) erledigen. Beobachte, wie sich der Quelltext automatisch verändert!  Anschließend beschriftest du die Komponenten passend. Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs

Beispiel 1: Wurzelrechner Aufgabe 3 Das Anklicken der Buttons bewirkt noch nichts. Die Funktionalität muss noch programmiert werden. Das Gerüst dazu ist im Quelltext bereits vorhanden: jButton_Berechnen.addActionListener(new ActionListener() {  public void actionPerformed(ActionEvent evt) {  jButton_Berechnen_ActionPerformed(evt); } }); public void jButton_Berechnen_ActionPerformed(ActionEvent evt) { // TODO hier Quelltext einfügen } // end of jButton_Berechnen_ActionPerformed Was konkret zu tun ist, steht klar im Quelltext - vorher lohnt sich ein Blick auf die Struktur: Die Quelle (JButton) erzeugt ein Ereignis (Event), das der auszuführenden Methode übergeben wird. Ein Beobachter (Listener) registriert sich bei der Quelle, um über Ereignisse informiert zu werden.  Dies ist eine konkrete Umsetzung des Observable - Observer - Entwurfmusters (vgl. Kap. 4.3). Der Quelltext enthält noch eine bemerkenswerte Konstruktion: Das erforderliche Objekt der Klasse ActionListener wird direkt in der Methodenklammer von addActionListener(...) erzeugt. Man nennt dies eine anonyme Klasse.  Eine andere Lösung ist der Einbau einer lokalen Klasse (Vergleiche dazu: GUI_Wurzel_Aufgabe_2_lokale_Klasse) Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs

Beispiel 1: Wurzelrechner Aufgabe 3 (Fortsetzung) Implementiere nun die Methoden jButton_Berechnen_ActionPerformed und jButton_Reset_ActionPerformed: public void jButton_Berechnen_ActionPerformed(ActionEvent evt) { // TODO hier Quelltext einfügen //Text aus Eingabefeld holen und in double umwandeln //Wurzel berechnen //Ergebnis in String umwandeln und in Ergebnisfeld einfügen } // end of jButton_Berechnen_ActionPerformed Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs

Beispiel 1: Wurzelrechner Aufgabe 3 (Fortsetzung) Immer wieder hat man die Aufgabe, Objekte einer bestimmten Klasse in eine andere Klasse umzuwandeln. Oft gelingt dies mit dem Typumwandlungsoperator:  (String) zahl, wobei zahl vom Typ int ist. Besser ist es, passende Methoden von Javaklassen zu verwenden, z.B. valueOf von String oder Double. Die automatische Quelltextvervollständigung ist hier sehr hilfreich, da die möglichen Methoden direkt angegeben werden: Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs

Beispiel 2: JButton, JRadioButton, JButtonGroup Aufgabe 1 Erstelle ein JFrame mit einem Button, dessen Hintergrund beim Klicken zwischen zwei Farben wechselt. Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs

Beispiel 2: JButton, JRadioButton, JButtonGroup Aufgabe 2 Ergänze das Projekt um drei JRadioButtons, die jeweils die Hintergrundfarbe des Fensters ändern. Beachte dabei: Erstelle zunächst die drei einzelnen JRadioButtons und füge dann eine JButtonGroup hinzu. Mit der Methode add(AbstractButton b) kann man die einzelnen JRadioButtons der Gruppe zuordnen und es ist gewährleistet, dass höchstens ein RadioButton aktiv ist. Den RadioButtons muss noch jeweils ein ActionListener und eine ActionPerformed Methode zugeordnet werden. JavaEditor macht dies im Gegensatz zu einem Button nicht automatisch, mit dem Objektinspektor geht dies aber sehr einfach. Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs

Beispiel 3: Multiplizieren Erstelle eine GUI, mit der man das Produkt zweier Zahlen berechnen kann. Achte wie beim Wurzelrechner auf die Trennung von Model und View. Beachte dabei: Die Auswahl der Zahlen geschieht jeweils in einer JComboBox. JavaEditor wählt hier folgenden Konstruktor: //Bei den Attributen  private JComboBox jComboBox1 = new JComboBox(); private DefaultComboBoxModel jComboBox1Model = new DefaultComboBoxModel(); //Beim Erstellen der Komponenten: jComboBox1.setModel(jComboBox1Model); Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs

Beispiel 3: Multiplizieren Ändere den Quelltext folgendermaßen: //Bei den Attributen  private JComboBox<Integer> jComboBox_Faktor1 = new JComboBox<Integer>(); //private DefaultComboBoxModel jComboBox1Model = new DefaultComboBoxModel(); //Beim Erstellen der Komponenten: //jComboBox1.setModel(jComboBox1Model); //Hinzufügen der Elemente mit addItem(E Item)  Die ActionPerformed-Methode für den Button hat folgende Struktur: public void jButton_Multiplizieren_ActionPerformed(ActionEvent evt) { //Gewählte Faktoren ermitteln und in int umwandeln //in der Klasse MultiplizierenModel multiplizieren //in das Ergebnisfeld als String einfügen } // end of jButton_Multiplizieren_ActionPerformed Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs