GUI mit Netbeans

Diese Seite zeigt, wie man kochrezeptartig eine GUI in Netbeans mit realisiert. Dazu gehen wir davon aus, dass ein GUI-Projekt erstellt wurde, wie es in in diesem Wiki erläutert wurde.
Wir gehen davon aus, dass das Projekt guiProjekt heißt (müsste neben der Kaffeetasse links oben stehen, wird beim Anlegen als Name gewählt).
Ebenfalls gehen wir davon aus, dass schon eine GUI hinzugefügt wurde, die den Namen guiProjektGUI hat (steht unter Source Packages → <default package> und ist mit guiProjektGUI.java angegeben).

An der oberen Leiste des Projektes guiProjekt finden sich drei rechteckige Knöpfe namens Source¹⁾, Design und History.
Für unsere alltägliche Programmierarbeit sind nur die beiden ersten von Belang.
Klickt man auf Design, kann man interaktive Elemente in das Formularfeld ziehen oder daraus entfernen. Kurz: hier entwirft man das Design des Formulars. Allerdings initiiert man hier auch Interaktionsmöglichkeiten wie die Reaktion auf einen Klick mit der Maus auf einen Button.
Klickt man auf Source, so wird der Quelltext eingeblendet. Dort komplettiert man die im Design angelegten (Inter-)Aktionen.

Ganz rechts finden sich die typischen Bedienelemente unter Swing Controls. In der folgenden Tabelle sind Name und typische Anwendung aufgelistet:

Auch die anderen Bedienelemente haben ihre Einsatzfelder. Für den Anfang werden diese hier sicher ausreichen.

Eine GUI sollte auf jeden Fall einen Knopf zum Beenden haben. Um das zu erreichen, klickt man auf Design und „zieht“ einen Knopf (Button) am besten nach unten rechts in das Formular.
Der Knopf sollte seine Funktion selbst erläutern, weshalb man seine Beschriftung von jButton1 (o.ä.) zum Beispiel auf Beenden! ändert. Das geht bei den Eigenschaften (Properties) des Knopfes unter text. Alternativ kann man mit der rechten Maustaste auf den Knopf klicken, was ein Menü öffnet. Dort klickt man auf Edit Text. Wir gehen davon aus, dass nun auf dem Knopf Beenden! steht.
Fakultativ, aber nicht unwichtig ist die Umbenennung des Knopfes. Netbeans hat die Eigenart, die zugefügten Bedienelemente unkreativ gemäß ihrer Art zu benennen und anschließend eine Nummer hinzuzufügen. So lautet die Variable, die unseren Beenden!-Knopf repräsentiert sehr wahrscheinlich jButton1. Das ist zwar zu Beginn ok, bei späteren Projekten aber mnemotechnisch optimierungsbedürftig (soll heißen, ich kann es mir besser merken, ob ein Textfeld eingabeFeld heißt als jTextField3). Um das zu beheben, klickt man mit der rechten Maustaste auf den Knopf und wählt Change Variable Name ….
Buchstaben und Zahlen sind problemlos, Minuszeichen (und dergleichen) dagegen nicht. Ich nenne diesen Knopf gern beendenKnopf.

Nun der wichtigste Teil: Wir fügen dem Beenden!-Knopf Funktionalität hinzu, indem wir rechts auf Events klicken. Dort scrollt man nach unten, bis man mouseClicked findet. In der Zeile klickt man auf das nach unten zeigende schwarze Dreieck und wählt dort BeendenMouseClicked aus.
Darauf hin legt Netbeans eine neue Methode namens BeendenMouseClicked für das Formular an und springt in die entsprechende Zeile im Quelltext, sodass man dort die Funktionalität programmieren kann, die man beim Klicken des Beenden-Knopfes ausführen soll.
Wir fügen dort folgende Zeilen ein:

int antwort = JOptionPane.showConfirmDialog(null, "Wollen Sie wirklich beenden?",
					    "Bestätigen", JOptionPane.YES_NO_OPTION,
					    JOptionPane.QUESTION_MESSAGE);
if (antwort == JOptionPane.YES_OPTION)
	System.exit(0);

Erläuterung: Mit der ersten Zeile wird Speicherplatz für eine Ganzzahlvariable (int) namens antwort angefordert. Durch den Aufruf des Dialogs wird mittig auf dem Bildschirm ein kleines Fenster geöffnet, das abfragt, ob man das Programm wirklich beenden wolle. Das Fenster hat nur zwei Knöpfe: Ja und Nein. Je nachdem, was man klickt, liefert das eine Zahle zurück, die in der Variablen Antwort gespeichert wird.
In der nächsten Zeile wird abgefragt, ob letztlich die Antwort „Ja“ lautete und in diesem Falle das Programm „verlassen“, d.h. beendet.

Nachdem unsere GUI nun schon wenigstens einfach beendet werden kann, fügen wir zwei Standardbedienelemente hinzu: Ein Textfeld und einen weiteren Knopf, auf dessen Klick hin das Textfeld ausgelesen wird.

Wir ziehen ein Textfeld in das Formular und benennen es erst einmal um:

• Rechtsklick auf das Textfeld
• Wähle Change Variable Name …
• Tippe „eingabeFeld“
• Klicke OK

Damit haben wir eine Möglichkeit geschaffen, Eingaben vom Benutzer entgegenzunehmen. Der Benutzer unseres Programms tippt in das Textfeld.

Wir ziehen einen Knopf (vom Typ Button) in das Formular und benennen ihn erst einmal um:

• Rechtsklick auf den Knopf
• Wähle Change Variable Name …
• Tippe „aktionsKnopf“
• Klicke OK

Wir ändern gleich die Aufschrift des Knopfes:

• einfacher Klick auf den Knopf (zur Auswahl)
• Klicke auf Properties am rechten Rand
• Scrolle bis text
• Klicke auf den rechts daneben stehenden Text und ändere ihn in „Aktion!“²⁾

Zudem verknüpfen wir eine Methode/Prozedur/Funktion im Quelltext, die bei Mausklick auf den Knopf ausgeführt wird:

• Klicke einmal auf den Knopf (um ihn auszuwählen)
• Klicke rechts auf Events
• Scrolle bis mouseClicked
• Klicke auf das schwarze Dreieck
• Wähle aktionsKnopfMouseClicked

Nach den beiden vorangegangenen Aktionen enthält unsere GUI nun das Textfeld namens eingabeFeld und den Interaktionsknopf namens aktionsKnopf.³⁾ Schließlich sollten wir uns nun im Quelltext an der Stelle befinden, die die Interaktion definiert. Das ganze sieht ungefähr so aus:

  private void aktionsKnopfMouseClicked(java.awt.event.MouseEvent evt) {                                          
      // TODO add your handling code here:
  }

Dort deklarieren wir eine Variable vom Typ String, die den Inhalt unseres Textfeldes aufnimmt. Zudem besteht die einzige Interaktion vorerst darin, diesen Inhalt am unteren Rand unverändert auszugeben. Sehen wir dort unsere Eingabe, so wissen wir, dass die Interaktion korrekt gestartet und unsere Eingabe korrekt übernommen wurde. Die Verarbeitung unserer Eingabe kann dann - abhängig von der konkreten Aufgabe - beginnen:

String eingabe = jTextArea1.getText();
System.out.println(eingabe);