Netbeans 5.5 Gui Builder Tutorial Deutsch – von Andreas Weber (aktualisiert J. Lindner)

Inhalt:

Palette

Komponenten hinzufügen

Neues Projekt anlegen

Klick auf File > New Project.

Java ->Java Application wählen und auf “Next” klicken.

Nun müssen Sie dem Projekt einen Namen geben, hier „Ticketautomat“.
Entfernen Sie das Häkchen bei „Create Main Class“.

Danach auf „Finish“ klicken

Nun sehen Sie links im “Projects” –Fenster Ihr neues Projekt.

1. Doppelklicken Sie auf den Ordner “Source Packages“.

Nun sehen Sie das Java Package „Ticketautomat“.

Einen neuen Frame erstellen

Nun können Sie ihren ersten Container erstellen. Wir werden einen JFrame benutzen.

Klicken Sie mit der rechten Maustaste auf das „Default Package“.

Wählen Sie New -> JFrame Form:

Geben Sie dem Frame einen Namen:

Klicken Sie Finish.

Nun sehen Sie den GUI Builder mit einem leeren JFrame:

Palette

Rechts sehen Sie nun die Palette. Hier eine Ansicht mit allen verfügbaren Komponenten:

Unterhalb der Palette sehen Sie das Properties –Fenster: Hier können Sie die Eigenschaften der Komponenten festlegen.

Komponenten hinzufügen

Wählen Sie in der Palette das Panel und

Und ziehen Sie es in den leeren grauen Bereich (den Frame):

Nun können Sie rechts im Properties Fenster die Grösse bestimmen:
Ändern Sie „preferredSize“ und „minimumSize“ auf 400,400 ab. Damit setzen Sie die Grösse auf 400*400 Pixel fest.

Nun fügen Sie aus der Palette „Swing Controls“ ein Label in das Panel ein.
Anschließend doppelklicken Sie auf das Label und können nun den Text ändern

Nun fügen Sie zwei Checkboxen aus „Swing Controls“ ein und ändern auch deren Text:

Nun ziehen Sie eine ButtonGroup auf den Frame. Sie sehen erstmal keine Änderung.

Schauen Sie nun links im Inspector-Fenster unter „Other Components“:

Dort sehen Sie die Button Group.

Nun können Sie die beiden Checkboxen zu dieser buttonGroup hinzufügen, indem Sie im jeweiligen Properties-Fenster der Checkboxen den Parameter ButtonGroup über das Drop-Down Menü auf die erstellte ButtonGroup einstellen, und zwar bei beiden Checkboxen separat:

Erste Vorschau

Nun können Sie sich Ihr Werk schon mal anschauen, vorerst noch ohne jede Funktionalität:
Klicken Sie oben auf den Vorschaubutton:

Nun sehen Sie das:

Buttons

Ziehen Sie nun einen Button aus der Palette in das Panel:

Mit Rechte-Maustaste-> Edit Text können Sie den Text ändern:

Button-Aktion

Nun weisen wir dem Button etwas Funktionalität zu:

Klicken Sie mit der rechten Maustaste auf den Button, und wählen Sie Events -> Mouse -> mouseClicked:

Der GUI Builder erzeugt einen MouseEvent, und wechselt automatisch in den Code-Modus. Nun sehen Sie den Quellcode

und können selbst eine Aktion „bei Mausklick“ festlegen:

Fügen Sie folgenden Code in die Methode ein:

Damit wird auf Druck des Buttons unser Frame beendet und ein neues Fenster mit Hallo Welt! Erzeugt.

this.dispose();

javax.swing.JFrame x = new javax.swing.JFrame("Hallo Welt");

x.setMinimumSize(new java.awt.Dimension(200,200));

x.add(new javax.swing.JLabel("Hallo !!"));

x.setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);

x.setVisible(true);

Nun wechseln Sie wieder zum Design-Modus

und fügen noch eine TextArea, einen Swing Button und einen AWT Button ein. Mit der jTextArea wird automatisch ein Scrollpane unter der Textarea erzeugt.

Um den Text des AWT-Buttons zu ändern, klicken Sie ihn an und ändern dann rechts im Properties-Fenster den Parameter „Label“:

Connection Mode

Eine weitere Möglichkeit im Netbeans-GUI-Builder, Funktionalitäten zu den Komponenten hinzuzufügen, ist der „Connection Mode“. Um diesen zu aktivieren, klicken Sie auf das Symbol neben dem Vorschau-Button. Darauf hin erscheint folgender Hinweis:

Darauf hin müssen Sie die Komponente, die den Event auslöst, markieren. Klicken Sie den Button „Textfeld färben“ an.

Darauf hin ist der Button rot markiert. Nun müssen Sie auf die Komponente klicken, die den Event empfängt.

Klicken Sie auf die TextArea (das große leere Textfeld).

Der „Connection Wizard“ erscheint:

Wählen Sie mouse -> mouseClicked und klicken auf „Next“.

Nun müssen Sie die Ziel-Operation festlegen:

Wählen Sie „background“ und klicken auf „Next“.

Nun geben Sie bei „User Code“ folgenden Code ein: java.awt.Color.GREEN und klicken auf „Finish“.

Der Editor springt in den Code-Modus und erzeugt den Code:

Wechseln Sie nun wieder in den Design-Modus.

Mehrfache Aktionen

Sie können natürlich einer Komponente mehrere Aktionen zuweisen. Ändern Sie den Text des Buttons wie auf dem Bild.

Damit weisen Sie den Button an, die Checkbox zu selektieren, wenn Sie mit der Maus über den Button fahren.

Klicken Sie erneut auf den ConnectionWizard-Button und markieren Sie den soeben veränderten Button. Nun wählen Sie die Checkbox „fröhlich“ an und der Connection Wizard erscheint. Wählen Sie nun „mouse -> mouseEntered“ und klicken auf Next.

Nun wählen Sie „selected“, klicken auf Next und tragen bei „Value“ „true“ ein.

Der resultierende Code:

Wechseln Sie wieder in den Design Modus und geben Sie dem AWT Button „Text löschen“ eine Mausaktion, die den Text der TextArea löscht.

Dazu setzen Sie über den Connection Wizard das Property „text“ auf den Value „“, lassen Sie dazu einfach das Value-Feld leer.

Datei ausführen

Nun wird es Zeit, unsere Oberfläche in Aktion zu sehen. Zuerst muss die Datei kompiliert werden.
Klicken Sie auf den „Clean and build“-Button:

Nun klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie „Run File“:

Testen Sie nun Ihre Buttons.

Verschiedene Layouts

Natürlich können Sie mit dem GUI-Builder auch Layouts festlegen. Klicken Sie dazu mit der rechten Maustaste im Inspector-Fenster auf den entsprechenden Bereich (hier den JFrame) und wählen Sie „Set Layout -> BorderLayout“:

Damit verändern Sie das Layout des ganzen Frames.

Nun wollen wir aber die Komponenten unabhängig voneinander anordnen.

Dazu geben Sie dem vorhandenen jPanel ein BoxLayout

und fügen Sie dem jFrame noch ein jPanel hinzu :

Nun sehen Sie im Design-Fenster das hinzugefügte Panel orange markiert:

Ziehen Sie mit der Maus im Design Fenster die Buttons hoch in das neue Panel und geben dem neuen Panel ebenfalls ein BoxLayout:

Nun fügen Sie noch einen „TabbedPane“ in den Frame ein:

Diesen sehen Sie nun unten ganz klein:

Damit Sie den Tabbed Pane benutzen können, müssen Sie noch Panels in den TabbedPane einfügen (rechte Maustaste auf „jTabbedPane1“->Add From Palette -> Swing Containers -> Panel):

Nun sehen Sie 2 Tabs auf dem Tabbed Pane:

Ziehen Sie nun das Label auf Tab2 und die beiden Checkboxen auf Tab1:

Vergrößern Sie die TextArea noch ein wenig.

Nun sollten Sie folgendes Layout fertig gestellt haben:

Nun können Sie erneut kompilieren und die Datei ausführen.

Frame Properties

In den Parametern des JFrame können Sie noch zusätzliche Eigenschaften festlegen, z. B. die Cursor-Art und das Verhalten beim Klick auf das „Schließen“ –Kreuz.