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

Einen Listener implementieren II: GUI-Builder

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ein GUI-Builder erleichtert die Ereignisbehandlung in grafischen Oberflächen und generiert den dafür notwendigen Java-Code. In diesem Video erfahren Sie, wie das im Einzelnen abläuft.
10:04

Transkript

Um bei einer grafischen Oberfläche Ereignisse zu behandeln, müssen wir uns Listener Objekte bauen, die die gewünschte Funktionalität enthalten, die ausgeführt werden soll und diese Listener dann beim Oberflächenelement anmelden, das das entsprechende Ereignis erzeugt. In diesem Code Beispiel hier wird beispielsweise ein Button erzeugt, als Instanz der Klasse "J-Button". Auf dem Button steht drauf "Beenden", das heißt, wenn der Button gedrückt wird, dann soll die Anwendung beendet werden. Dafür wird hier ein "Action Listener" deklariert, samt Implementierung in Form einer anonymen inneren Klasse wird gleich instanziiert und gleich auch noch beim Beenden-Button als "Action Listener" angemeldet. Wenn der Button dann später gedrückt wird, dann geht er zu seinem "Action Listener", informiert ihn, indem er diese Methode aufruft, und das wiederum führt dazu, dass die Anwendung planmäßig beendet wird. Ich führe das mal vor. So sieht die Anwendung aus, und drücke ich diesen "Beenden Button", dann ist die Anwendung zu Ende. Bei umfangreicheren grafischen Oberflächen ist diese Art der Implementierung natürlich auf die Dauer etwas mühselig. Die Verwendung eines GUI Builders kann hier die Arbeit wesentlich produktiver und auch weniger fehleranfällig machen. Im zweiten Beispiel, in diesem Projekt, verwende ich deshalb den NetBeans eigenen GUI Builder. Mit diesem wurde hier bereits eine grafische Oberfläche zusammen geklickt, die aber bis jetzt noch nichts tut. NetBeans hat den entsprechenden Code generiert und wir können hier oben mit "Source und Design" zwischen Source- und Designview umschalten. Diese Anwendung stellt eine kleine Aufgabenliste dar. Die Funktionalität soll ungefähr so aussehen, dass wir hier in dieser Eingabezeile eine Aufgabe eintragen können, wenn wir auf den "Hinzufügen"-Button klicken, dann wird die Aufgabe dem System hinzugefügt. Der "Beenden"-Button beendet die Anwendung. Diese grafische Oberfläche wurde mit Komponenten aus dieser Palette hier zusammengestellt, und es wurde nur eine Liste, eine Änderung vorgenommen, und zwar das darunterliegende Datenmodell betreffend. Bei Swing-Komponenten, die Daten enthalten wie eben z.B. eine Liste, gibt es nämlich eigentlich eine Arbeitsteilung. Ein Objekt kümmert sich um die Darstellung der Liste, das ist hier eine Instanz der Klasse "jList" und dann gibt es ein zweites Objekt, das kümmert sich um die eigentliche Datenhaltung. Auch diese Datenhaltungsklasse gibt es natürlich bereits in der Standardbibliothek, und sie heißt "DefaultListModel". Genau das haben wir hier verwendet, ich gehe nochmal in den "Source View". Im "Constructor" wird die Variable "ListModel" initialisiert mit "New DefaultListModel", das heißt wir erzeugen hier eine Instanz dieser Bibliotheksklasse, und, in spitzen Klammern, müssen wir noch den Elementtyp angeben. Da wir in unserer Aufgabenliste einfach nur Strings vorhalten, schreiben wir hier natürlich als Typ "String" rein. Deklariert ist diese Variable "ListModel" als Instanzvariable, als Attribut der Klasse "Hauptfenster" und zwar hier ganz am Ende direkt vor den automatisch generierten Attributen. Der Rest der Klasse wurde, so wie er automatisch generiert wurde, belassen und jetzt führen wir die Anwendung einfach mal aus. Grünes Knöpfchen, das ist unsere Aufgabenliste, hier ist die Eingabezeile, da kann ich auch schon was eingeben. Diese Eingabezeile ist eine Instanz der Klasse "jTextfield", und das ist eben halt eine voll funktionsfähige Eingabezeile einschließlich Maus- und Tastaturunterstützung. Die Liste ist noch leer, und die Buttons machen noch nichts. Das wollen wir jetzt ändern. Beginnen wir mit dem einfacheren von den beiden, mit dem "Beenden"-Button. Ich schließe mal die Anwendung hier wieder, geh in den Design View. Um jetzt hier die Funktionalität des Buttons festlegen zu können, machen wir einfach einen Doppelklick auf den Button. Jetzt springt das kurz wild hin und her und jetzt haben wir hier eine Methode generiert bekommen, in die wir reinschreiben sollen was passieren soll, wenn der Button gedrückt wird. Dann machen wir das mal. Nehmen wir den Kommentar raus und schreiben stattdessen rein "system.exit". Rückgabecode "0", denn es gab ja keine Probleme. In grauen Bereichen können Sie übrigens nichts ändern, das brauchen Sie also gar nicht erst zu versuchen. Was genau wurde hier jetzt generiert? Wir haben eine Methode und die heißt "jButton 2 actionPerformed". Da unser Button noch "jButton 2" heißt, ist es offensichtlich also eine Methode, die diesem Button zugeordnet ist. Aber wo findet diese Zuordnung statt? Da müssen wir ein Stückchen weiter nach oben gehen und zwar hier. Ich befinde mich hier in der Methode "initComponents". Wenn die bei Ihnen nicht da sein sollte, dann sieht das wahrscheinlich so aus. Sie haben hier einen Bereich, der heißt "Generated Code" und den klappen Sie auf, in dem sie vorne auf das Pluszeichen klicken. Und dann findet sich dort drin diese Zeile. Das sieht jetzt verdächtig so aus wie der Code den ich Ihnen zu Anfang gezeigt hab. Hier wird vom Button "Add actionListener" aufgerufen, und dann wird hier ein neuer actionListener erzeugt, dessen Implementierung sich hier befindet, die Methode "actionPerformed" ist die Methode, die dann später vom Button aufgerufen wird, wenn er gedrückt wird. Diese Methode "actionPerformed" leitet nun einfach weiter an "jButton 2 actionPerformed" und das ist die Methode, die wir unten gerade gesehen haben. Das heißt, das Prinzip, das hier verwendet wird und der Code, der hier verwendet wird, ist der selbe, den wir auch selbst schreiben müssten. Nur mit dem kleinen, aber feinen, Unterschied, dass wir es eben halt nicht selber schreiben müssen. Eine Sache ist hier allerdings etwas unschön: "jButton 2 actionPerformed" ist etwas wenig aussagekräftig. Anders ausgedrückt, unsere Komponenten haben recht wenig entsprechende Bezeichner. Um das zu ändern, gehe ich mal in den "Design View" zurück und dann sehe ich ja hier die Komponenten. Ich kann jetzt auf den Button z.B. mit der rechten Maustaste klicken und hier "Change Variable Name" auswählen. Darüber kann ich den Variablennamen ändern. Den "Beenden"-Button würde ich jetzt hier einfach mal "Beenden Button" nennen, drücke OK, und wenn wir jetzt nochmal in den "Source View" zurückgehen, dann sehen wir, Hurra, auch die Methode wurde umbenannt. Die heißt jetzt nämlich "Beenden-Button actionPerformed". Jemand der nur diese Methode sieht, weiß eigentlich trotzdem sofort, auf wen sie sich bezieht. Machen wir das mit anderen Komponenten auch noch. "Hinzufügen" -Button, rechte Maustaste, Variablennamen ändern, ich wäre für "Hinzufügen Button". "OK", die Eingabezeile heißt momentan "jTextfield 1". Es ist eben eine Instanz der Klasse "jTextfield". Da hier aber eigentlich die Aufgabe in Textform vorliegt, nenne ich es stattdessen mal lieber "Aufgabe Text" und drücke "Enter". Bleibt noch die Liste. Rechte Maustaste, "Change Variable Name", "jList 1", auch hier nicht besonders aussagekräftig. Was ist es? Es ist eine Aufgabenliste. Also schreiben wir hin "Aufgabenliste", "OK". Nachdem wir diese kleinen, aber notwendigen Änderungen vorgenommen haben, können wir uns jetzt noch dem "Hinzufügen Button" widmen. Was soll der tun? Der soll aus der Eingabezeile den Text rausholen und soll ihn der Liste hinzufügen. Um den Text aus einem Objekt rauszuholen heißt die Methode dazu wahrscheinlich "Get Text". Und genauso ist es auch. Bei der Liste ist es allerdings ein bisschen aufwendiger. Ich hatte ja vorhin gesagt, es gibt hier eine Arbeitsteilung zwischen visueller Komponente und Datenhaltungskomponente. Die visuelle Komponente ist unsere "dayList"-Instanz, also das, was wir gerade "Aufgabenliste" genannt haben und die Datenhaltungskomponente, das ist unser "listModel". Ich zeig Ihnen das nochmal kurz im Quelltext. Deklariert wurde die Variable hier ganz unten, dort als Typ "Default list Model" mit dem Namen "listModel". Und die Initialisierung erfolgte, muss ich nochmal ganz nach oben gehen, im "Constructor", hier steht "listModel" ergibt sich als "New Default listModel" mit dem Elementtyp "String". Die Verknüpfung zwischen "Model" und "View"-Komponente schließlich, findet sich hier in "initComponents" und zwar an dieser Stelle. Hier steht "Aufgabenliste Punkt setModel listModel". Ab da sind die beiden miteinander verbunden. Jedesmal wenn sich das listModel ändert, also wenn wir dort was hinzufügen oder es entfernen, dann wird auch die "View"-Komponente - die sichtbare Komponente entsprechend aktualisiert. Alles was wir also tun müssen, ist dem listModel den Text hinzufügen, den wir vorher aus der Eingabezeile rausgeholt haben. Dann machen wir das mal. Hier im "Design View", hier mein "Hinzufügen Button", Doppelklick. Jetzt haben wir hier eine Methode generiert bekommen, die heißt "Hinzufügen Button actionPerformed" und hier können wir jetzt das reinschreiben, was wir gerade besprochen haben, nämlich "listModel.". Jetzt fehlt noch der Methodenname. Wenn es um das Hinzufügen geht, wird die Methode wahrscheinlich irgendwas mit "Add" heißen und da haben wir im Wesentlichen zwei zur Auswahl: Eine heißt einfach nur "Add", nimmt ein Index und ein String, damit kann ich also offensichtlich angeben, an welcher Stelle in der Liste ich ein Element miteinfügen möchte. Das ist uns aber zu kompliziert, wir möchten eigentlich das Element nur hinten dran hängen. Schauen wir uns die zweite Methode an "Add Element", steht hier "Fügt das Element ans Ende der Liste an". Hervorragend, genau das, was wir brauchen. Also nehmen wir "Add Element" und als Parameter, wie gesagt den Text, der in der Eingabezeile steht, also die Eingabezeile hieß "Aufgabe Text", ".getText", "Enter". Und durch dieses "Hinzufügen" im Model mit der "View" automatisch aktualisiert, das heißt mehr müssen wir nicht tun. Auch hier wurde wieder der restliche Code automatisch generiert, wir sehen das hier, hier haben wir den "Hinzufügen Button" und da ist der Code wieder genau der gleiche, wie der hier unten beim "Beenden Button". Eine "Action" ist über dies hinzugefügt, hier wird er instanziiert, Methode "actionPerformed" und darin wird weitergeleitet an die Methode, die wir unten gerade implementiert haben. Damit ist unsere kleine Aufgabenliste fertig, Sie können sie jetzt ausführen und ausprobieren. Geben wir mal etwas ein. "Einkaufen Hinzufügen". Klappt. Noch etwas. Nochmal "Hinzufügen". Klappt hervorragend. Damit wissen Sie nun, wie Sie mit Hilfe des GUI Builders die Ereignisbehandlung umsetzen können.

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...
 
Hersteller:
Software:
Exklusiv für Abo-Kunden
Ihr(e) Trainer:
ISBN-Nummer:978-3-8273-6149-3
Erscheinungsdatum:28.11.2011
Laufzeit:8 Std. 32 min (66 Videos)

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!