Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Java 7 Grundkurs

Die Oberfläche erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Der GUI-Builder hilft Ihnen bei der Erstellung, macht Sie produktiver, bietet Ihnen mehr Möglichkeiten und ist einfacher zu bedienen, als wenn Sie den Quelltext selber per Hand schreiben müssten.
13:50

Transkript

In diesem Video zeige ich Ihnen, wie Sie für Ihre Java-Anwendung eine grafische Oberfläche bauen können. Die Standardbibliothek bietet Ihnen dafür gleich zwei Toolkits an: AWT, das Abstract Window Toolkit, ist seit Java 1.0 dabei, Swing ist mit Java 1.2 dazugekommen. Da Swing das modernere und komfortablere von den beiden ist, werden wir das auch in unserem Beispiel verwenden. Swing besteht aus ganz normalen Java-Klassen, die sich sowohl um die Darstellung der Anwendung, als auch um die interne Verwaltung kümmern. Diese Klassen befinden sich im Package javax.swing, sowie in diversen Unterpaketen davon. Eine grafische Oberfläche für eine Java-Anwendung schreiben heißt also, Java-Quelltext zu erstellen, der diese Swing-Klassen verwendet. Das kann allerdings eine recht mühselige und auch zeitraubende Angelegenheit sein. Deshalb gibt es noch eine zweite Möglichkeit, nämlich die Verwendung eines GUI Builders. Das ist ein visuelles Tool, mit dem ich mir quasi meine Oberfläche zusammenklicken kann und das dann daraus den entsprechenden Java-Code generiert. An diesem Code kann ich dann, wenn ich das möchte, Änderungen und Erweiterungen vornehmen. So werden wir auch in diesem Beispiel vorgehen. Wir beginnen also mit einem GUI Builder, dann schauen wir uns den generierten Quelltext genau an und werden ihn entsprechend anpassen und erweitern. Wir beginnen mit einem neuen, leeren Java-Projekt. Ich klicke also auf "File" "New Project", ich wähle "Java-Application" aus und gebe der Anwendung einen Namen, ich nenne sie "Swing Demo". "Main Class" lassen wir uns nicht kreieren und drücken auf "Finish". Jede Anwendung mit einer grafischen Oberfläche hat ein Hauptfenster und dafür ist hier in Swing die Klasse JFrame zuständig. Als erstes spendieren wir unserer Anwendung also ein solches Hauptfenster. Dazu klicke ich auf das Projekt mit der rechten Maustaste, sage "New" und dann habe ich hier ein "JFrame Form", da klicke ich drauf. Die Klasse JFrame enthält alles, was ein Hauptfenster so ausmacht, also eine Titelzeile, ich kann das Fenster vergrößern und verkleinern, ich kann es minimieren, maximieren und auch schließen. Für unsere Anwendung erzeugen wir von dieser Klasse nun eine Unterklasse, wir erben also alles, was JFrame bereits bietet, und passen es dann in der Unterklasse entsprechend an. Diese Unterklasse nenne ich jetzt mal "Hauptfenster" und packe sie in das Package "com.video2brain.java7.swingdemo", "Finish". Nun wird der NetBeans-eigene GUI Builder geöffnet, der übrigens Matisse heißt, also wie der Maler. Hier in der Mitte haben wir die Darstellung unseres Hauptfensters, das ist momentan noch leer. Auf der rechten Seite gibt es dann diverse Paletten mit einzelnen Komponenten, die wir für unsere Oberfläche verwenden können. Diese Komponenten werden von Java-Klassen aus der Swing-Bibliothek zur Verfügung gestellt. Über der Darstellung unseres Hauptfensters finden wir hier zwei Buttons. Mit denen können wir umschalten zwischen der "Designvorschau" und dem "Quelltext". Und den gehen wir jetzt einmal durch. Es geht los mit der Package-Deklaration, das ist nichts Neues. Hier wird nun unsere Klasse "Hauptfenster" deklariert als Unterklasse von "javax.swing.jframe". Würden wir einfach nur JFrame instanziieren, das würde auch funktionieren, aber dann hätten wir ein Fenster mit der Breite Null und der Höhe Null und ohne Titel, und das wäre alles nicht besonders hübsch. In der Unterklasse können wir das hingegen an unsere Bedürfnisse anpassen. Im Konstruktor von "Hauptfenster" wird hier eine generierte Methode "initComponents" aufgerufen. Diese Methode ist hier versteckt, ich klappe sie einmal auf, hier, initComponents. Hier werden nun diverse Methoden aus JFrame verwendet, um unser Fenster zu konfigurieren. Es wird mit "setDefaultCloseOperation" die "default Close Operation" gesetzt. Das heißt also, ich lege hier fest, wie sich das Fenster verhalten soll, wenn ich oben rechts auf den "Schließen"-Knopf drücke. Wir verwenden die Konstante "exit on close", damit die Anwendung beendet wird, wenn ich das Hauptfenster schließe. Für die Anordnung der Komponenten innerhalb des Hauptfensters ist ein separates Objekt zuständig, das ist der sogenannte Layout-Manager. Davon gibt es in der Standardbibliothek verschiedene, die verschiedene Möglichkeiten bieten, Komponenten anzuordnen. Hier wird standardmäßig ein Grouplayout verwendet. Dieses Grouplayout wurde speziell mit Unterstützung für GUI Builder entwickelt und ist eigentlich eher nicht dazu gedacht, dass man es programmatisch verwendet, indem man alle diese Codezeilen hier selber schreibt. Mit "setLayout" wird dieser Layout-Manager unserem JFrame zugewiesen. Mehr passiert hier eigentlich noch nicht. Es folgt nur noch die Main-Methode, in der das Fenster erzeugt wird, hier "new Hauptfenster()" und dann mit "setVisible(true)" auf sichtbar gesetzt wird. Bis jetzt ist unser Hauptfenster allerdings noch ziemlich leer und deswegen fügen wir jetzt ein paar Komponenten hinzu. Sie können die einfach hier aus der Palette auswählen und dann hier in dem Rechteck fallen lassen. Nehme mir mal ein Label, das ist einfach ein Stück Text. Wenn ich das jetzt hier reinziehe, dann sehen Sie, ich bekomme auch Hilfslinien. Die helfen mir bei der Anordnung der Komponenten. Also, ich sorge dafür, dass oben die Hilfslinie einrastet und links, dann lasse ich mein Label fallen und jetzt steht da "JLabel 1". Das ist natürlich nicht der Text, den ich in meinem Fenster anzeigen möchte. Deshalb klicke ich hier mit der rechten Maustaste drauf und sage "EditText", dann kann ich den Text ändern. Wir schreiben hier einmal rein: "Aufgabe". Und "Enter". Darunter kommt nun eine Eingabezeile. Die Eingabezeile finden wir hier als "TextField". Darunter befindet sich die Java-Klasse JTextField, die für die Darstellung dieses Textfeldes, diese Eingabezeile, zuständig ist. Nehmen wir also das TextField und packen es unter das Label. Können es ruhig ein bisschen breiter machen. Rechts daneben ein Button. Button haben wir hier oben, da wo "OK" draufsteht, ein ganz normaler Button. Für den Button ist die Klasse JButton zuständig. Sie haben sicher schon gesehen, die Klassen fangen alle mit "J" an. Ursprünglich wurde Swing auch einmal als "Java Foundation Classes" bezeichnet, daher dieses "J" am Anfang. Den Button packen wir rechts neben die Eingabezeile, und zwar nicht in der großen und nicht in der mittleren, sondern in der kleinen Entfernung. Und fallen lassen. Um den Text zu ändern, der auf dem Button draufsteht, können wir einfach rechts draufklicken, wieder "EditText", und jetzt schreiben wir hier rein: "Hinzufügen". Und "Enter". Sie sehen, der Button wächst mit, je nachdem, wie viel Text er darstellen muss. Darum kümmert sich die Klasse JButton darunter, in Zusammenarbeit mit dem Layout-Manager. Unser TextField soll zu Beginn möglichst leer sein. Das heißt, auch diesen Text müssen wir hier irgendwie ändern, und zwar auf einen leeren Text. Auch hier wieder: Rechte Maustaste drauf, "EditText", "Löschen", "Enter", fertig. Vielleicht haben Sie es schon erkannt, das wird eine kleine Aufgabenliste. Ich kann in das Textfeld eine Aufgabe eingeben, dann drücke ich auf "Hinzufügen" und dann wird zu einer Liste diese Aufgabe hinzugefügt. Jetzt fehlt natürlich noch die passende Liste. Auch die gibt es bereits als fertige Komponente, und die heißt hier "List". Darunter befindet sich die Java-Klasse JList, die für die Darstellung dieser Liste zuständig ist. Also: "List", hier drunter unter die Eingabezeile. Bisschen schmal ist sie noch, ich ziehe die mal ein bisschen breiter, und gleich werden Sie sehen, die schnappt jetzt ein, bei der Eingabezeile in der Breite. Da lassen wir sie los. Das Ganze noch ein bisschen länger. Da bin ich wohl abgerutscht. So, jetzt machen wir das ganze Fenster noch ein bisschen schmaler, und zwar so lange, bis es einrastet, genau, jetzt, und ein bisschen niedriger. Nun füge ich noch einen weiteren Button hinzu, zum Beenden der Anwendung. Der kommt hier unten rechts rein, auch wieder ein bisschen breiter, und umbenennen, bzw. den Text umbenennen, "Beenden", fertig. Hier unten links können Sie die Struktur unserer grafischen Oberfläche sehen. Wir haben hier ein JFrame als Wurzel, darin befinden sich unser Label und unser Textfeld, und Sie sehen, wenn ich draufklicke, dann wird die entsprechende Komponente ausgewählt. Hier haben wir den ersten Button, dann kommt hier der zweite Button und dazwischen haben wir nicht direkt die Liste, sondern die Liste befindet sich innerhalb eines JScrollPanes. Ein solches JScrollPane kann eine weitere Komponente enthalten. Und wenn diese enthaltene Komponente, also unsere Liste in diesem Fall, größer wird, als der zur Verfügung stehende Platz, dann kümmert sich das JScrollPane darum, Scrollbars, also vertikale oder horizontale Bildlaufleisten, hinzuzufügen. So, unsere grafische Oberfläche ist jetzt im Prinzip fertig. Sie tut zwar noch nichts, aber sie sieht schon gut aus. Jetzt schauen wir uns mal den Quelltext an, der da generiert wurde. Ich klicke wieder auf "Source", und es ist alles ein bisschen mehr geworden. Ich mache das Fenster einmal ein bisschen größer, Doppelklick. OK, fangen wir wieder oben an. Hier oben hat sich erstmal noch nichts geändert, Konstruktor ruft weiterhin initComponents auf. Das ist die Methode, in der jetzt der eigentlich generierte Quelltext drin liegt. Sie sehen, hier werden zuerst einmal die Objekte erzeugt, die für unsere Oberfläche benötigt werden. Ein JLabel, ein JTextField, zwei Buttons, ein JScrollPane und eine JList. Die Variablendeklarationen dafür befinden sich übrigens am Ende der generierten Klasse, hier ganz unten, als Instanzvariablen unseres Hauptfensters. Attributdeklarationen können sich prinzipiell an einer beliebigen Stelle in der Klasse befinden. Man kann sie an den Anfang setzen, hier werden sie halt ans Ende gesetzt. Nach der Erzeugung der Objekte kommt das, was wir schon kennen: Die Close Operation wird gesetzt, und jetzt werden die einzelnen Komponenten konfiguriert. Das erste Label bekommt den Text "Aufgabe", der Button bekommt den Text "Hinzufügen". Die Konfiguration der Liste ist ein bisschen komplizierter. Swing-Komponenten, die Daten enthalten, bestehen nämlich eigentlich aus zwei Teilen. Ein Teil kümmert sich um die Darstellung, das ist in unserem Fall die Klasse JList. Und ein Teil kümmert sich um die Datenhaltung selbst, also um das Datenmodell. Diese beiden werden dann miteinander verdrahtet, und jedes Mal, wenn sich im Datenmodell irgendetwas ändert, dann wird auch automatisch die Darstellung vorne, das, was wir sehen können, entsprechend angepasst. Hier im generierten Code wird ein Datenmodell zusammengebaut, indem die Klasse AbstractListModel verwendet wird. Und dann wird es befüllt mit den Strings "Item 1" bis "Item 5", wie wir hier sehen können. Das ist nicht ganz so das, was wir haben wollen, aber hier, in diesem generierten Bereich, können wir nichts ändern, der ist schreibgeschützt. Allerdings gibt es trotzdem eine Möglichkeit, hier Anpassungen vorzunehmen, und die führt über den DesignView. Ich klicke hier mit der rechten Maustaste in meine Komponente, deren generierten Code ich anpassen möchte, in unserem Fall also die Liste. Rechte Maustaste, jetzt habe ich hier unten, der vorletzte Punkt, "Customize Code". Jetzt klicke ich da drauf, und dann kann ich hier Änderungen am zu generierenden Code vornehmen. Die Erzeugung von JList, habe ich kein Problem mit. Das ist es, was wir ändern wollen. Also, klicken wir vorne auf "DefaultCode" und wählen "Custom Property" aus. Zur Verdrahtung der visuellen Komponente, also JList, mit ihrem Model, wird von JList die Methode SetModel aufgerufen, und hier drinnen wird dann das Model übergeben. Wir möchten hier gerne ein eigenes Model übergeben, und dieses eigene Model nenne ich einfach mal "ListModel". Keine Sorge, Sie haben nichts verpasst, das gibt es noch nicht, das bauen wir gleich. Erstmal müssen wir aber die Änderungen dieses zu generierenden Codes bestätigen, indem wir hier unten auf "OK" klicken. Jetzt gehen wir wieder in unsere "Source", an die entsprechende Stelle. Sie sehen hier: "Compilerfehler. ListModel kann nicht gefunden werden." Das müssen wir jetzt noch hinzufügen. Dazu gehen wir da hin, wo die anderen Attribute deklariert werden, also ganz runter, hier. Und davor, außerhalb der Main-Methode achten Sie darauf, dass Sie es nicht aus Versehen in eine Methode reinschreiben, hier deklarieren wir jetzt unser Model. In der Swing-Bibliothek gibt es eigentlich für jeden Zweck immer schon die passende Klasse, so auch für ein ListModel. Es gibt eine Klasse, die heißt DefaultListModel, und die können wir direkt instanziieren. Also, ein DefaultListModel, "DefaultListModel", hier. Wir müssen lediglich in den spitzen Klammern als Typ angeben, was unsere Liste enthalten soll. Bei uns sind das ganz normale Strings. Jetzt kommt noch der Variablenname, nämlich "ListModel", so wie wir es ja oben genannt haben. Attribut ist deklariert, jetzt muss es noch initialisiert werden. Das machen wir typischerweise im Konstruktor einer Klasse, also hier oben, Konstruktor "Hauptfenster", "ListModel=" — einfach "Standardkonstruktor" aufrufen — "NewDefaultListModel()", fertig. Jetzt wollen wir natürlich ausprobieren, ob unsere Anwendung auch tatsächlich so aussieht, wie das der DesignView hier vorgibt. Klicken wir auf den grünen Pfeil, bestätigen, dass das unsere Hauptklasse ist: "OK". Und wir sehen, hier wird tatsächlich ein Fenster geöffnet, das ziemlich genau so aussieht, wie wir das hier designed haben. Es ist eigentlich sehr einfach, eine grafische Oberfläche zusammenzubauen. Der GUI Builder macht Sie produktiver, er bietet Ihnen mehr Möglichkeiten und ist schlicht einfacher zu benutzen, als wenn man den Quelltext zu Fuß schreiben müsste. Es lassen sich auf diese Weise auch sehr schnell Prototypen von grafischen Oberflächen erstellen und sogar gemeinsam mit dem Kunden, mit dem Auftraggeber bearbeiten und anpassen. Damit schließe ich dieses Fenster wieder, denn wir sind am Ende des Films.

Java 7 Grundkurs

Machen Sie sich mit den Grundlagen der Java-Programmierung vertraut und lernen Sie die Syntax der Sprache sowie das Konzept der objektorientierten Softwareentwicklung kennen.

8 Std. 32 min (66 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!