4. Softwareentwicklung 4.0 Grafische Benutzeroberflächen · Ändert sich das Model, wird die View...
21
4. Softwareentwicklung 4.0 Grafische Benutzeroberflächen Informatik 11 - 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:
Transcript of 4. Softwareentwicklung 4.0 Grafische Benutzeroberflächen · Ändert sich das Model, wird die View...
4. Softwareentwicklung4.0 Grafische Benutzeroberflächen
Informatik 11 - 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
AnleitungenBei 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
4.0.1 EntwicklungsumgebungenGrafische 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.
BlueJFü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
JavaEditorHomepage: http://javaeditor.orgDie 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
JavaEditorBesonders 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.htmlNach 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
EclipseEclipse 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/InstallationEventuell 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
EclipseEinen 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
NetBeansNetBeans 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.2 Struktur von Grafikanwendungen
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.
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.
Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.2 Struktur von Grafikanwendungen
Ä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.
4.0.2 Struktur von Grafikanwendungen
Das MVC-Entwurfsmuster in einem Anwendungsbeispiel:
Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.2 Struktur von Grafikanwendungen
Der Anwender arbeitet mit den Daten (Model), Java Swing kümmert sich um die Anzeige und um die Interaktion mit dem Anwender.
4.0.3 Programmieren einfacher GUIs
Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs
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.
Aufgabe 1:
Wähle Datei – Neu – Java und erstelle die Klasse WurzelModel.
Beispiel 1: Wurzelrechner
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;
} }
Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs
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.
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.
Beispiel 1: Wurzelrechner
Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs
Aufgabe 2 (Fortsetzung)Füge die benötigten Swing-Komponenten dazu, platziere und benenne sie sinnvoll (z.B. jButton_Berechnen statt dem vorgeschlagenenjButton1, 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.
Beispiel 1: Wurzelrechner
Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs
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:
Beispiel 1: Wurzelrechner
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. Mannennt 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
Aufgabe 3 (Fortsetzung)
Implementiere nun die Methoden jButton_Berechnen_ActionPerformed und jButton_Reset_ActionPerformed:
Beispiel 1: Wurzelrechner
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
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:
Beispiel 1: Wurzelrechner
Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs
Aufgabe 1Erstelle ein JFrame mit einem Button, dessen Hintergrund beim Klicken zwischen zwei Farben wechselt.
Beispiel 2: JButton, JRadioButton, JButtonGroup
Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs
Aufgabe 2Ergänze das Projekt um drei JRadioButtons, die jeweils die Hintergrundfarbe des Fensters ändern.
Beispiel 2: JButton, JRadioButton, JButtonGroup
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
Erstelle eine GUI, mit der man das Produkt zweier Zahlen berechnen kann.Achte wie beim Wurzelrechner auf die Trennung von Model und View.
Beispiel 3: Multiplizieren
//Bei den Attributenprivate JComboBox jComboBox1 = new JComboBox();private DefaultComboBoxModel jComboBox1Model = new DefaultComboBoxModel();//Beim Erstellen der Komponenten:jComboBox1.setModel(jComboBox1Model);
Beachte dabei:Die Auswahl der Zahlen geschieht jeweils in einer JComboBox. JavaEditor wählt hier folgenden Konstruktor:
Informatik 11 - 4. Softwareentwicklung – 4.0 Grafische Benutzeroberflächen – 4.0.3 Programmieren einfacher GUIs
Beispiel 3: Multiplizieren
//Bei den Attributenprivate 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)
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
Ändere den Quelltext folgendermaßen:
Die ActionPerformed-Methode für den Button hat folgende Struktur:
