Formulare. Form Builder. In diesem Kapitel: Form Builder Anlage eines Formulars Event-Handling Modifikation von generiertem Code

Transkript

1 Kapitel 2 KAPITEL 2 Formulare Im Rahmen der kommenden Kapitel werden wir eine Beispielapplikation zur Verwaltung von Aufgaben entwickeln. Wie jede Rich-Client-Applikation benötigt natürlich auch unser TaskManager eine grafische Oberfläche mit diversen Views, die wir im Folgenden auch Formular nennen werden. In diesem Kapitel werden wir uns ansehen, was der Form Builder ist und wie man mit seiner Hilfe effizient Formulare erzeugt. Zudem werden wir einen Exkurs vornehmen und das Modell für unsere Beispielapplikation erstellen. Form Builder NetBeans hat mit dem Release 5.0 die Entwicklung grafischer Oberflächen für Java-Applikationen revolutioniert. Der neue Form Builder, also die Komponente der IDE zum grafischen Entwickeln von Formularen, mit dem Projektnamen Matisse führte sowohl einen neuen LayoutManager als auch einen darauf optimierten GUI-Builder ein. Im Gegensatz zu vorherigen Layouts, die auf Koordinaten und der Schachtelung von Komponenten basierten, verteilt das neu eingeführte GroupLayout Komponenten gemäß ihrer Ausrichtung und der relativen Nähe zu anderen Komponenten und Ankern. Dies erlaubt einen sehr viel natürlicheren Entwurf von Formularen und ein Verhalten bei Größenänderungen, das eher dem Erwarteten entspricht als vorherige Ansätze. Der Form Builder besteht aus diversen Views, die wir im Folgenden besprechen wollen. Einen Eindruck von diesen Views erhalten Sie in Abbildung 2-1. In diesem Kapitel: Form Builder Anlage eines Formulars Event-Handling Modifikation von generiertem Code Matisse gilt seit langem als der beste Java GUI Builder und basiert auf dem GroupLayout. 19

2 Abbildung 2-1: Übersicht Der Form Editor ist ein Multiview-Editor, er bietet also mehrere Ansichten auf die selbe Komponente. Über die Schalter SOURCE und DESIGN kann zwischen diesen Ansichten gewechselt werden. Die eine Ansicht zeigt die grafische Ansicht des gerade bearbeiteten Formulars, die andere den Quellcode. In der Design-Ansicht können grafische Komponenten per Drag-and-Drop zum fertigen Formular arrangiert werden. In der Source- Ansicht ist der Quellcode des Formulars zu finden, der über geschützte Bereiche verfügt, die nicht direkt editierbar sind. Der Quellcode ist alles, was später zur Ausführung des Formulars erforderlich ist. NetBeans legt zwar xml-dateien mit Meta-Informationen an, diese werden jedoch lediglich für das visuelle Design und nicht für die Ausführung benötigt. Das INSPECTOR-Fenster stellt die Komponentenstruktur des Formulars hierarchisch dar und erlaubt häufig eine schnellere Auswahl einer Komponente als der Form Editor. Die PALETTE stellt grafische Komponenten zur Verfügung, die per Dragand-Drop in das Formular übernommen werden können. Die Standardpalette umfasst hauptsächlich sämtliche Swing- und AWT-Komponenten. Das PROPERTIES-Fenster zeigt die Eigenschaften der selektierten Komponente und erlaubt deren Modifikation. Spezielle Property-Editoren für die wichtigsten Datentypen erleichtern das Modifizieren. 20 Kapitel 2: Formulare

3 Der Connection-Wizard erleichtert das Schreiben und Registrieren von Event-Listenern, wird in unserem Beispiel jedoch nicht verwendet. Der Form-Tester zeigt, wie das Formular zur Laufzeit aussehen wird. Der Palette-Manager erlaubt uns, den Inhalt der Palette um eigene Komponenten zu erweitern. Zunächst fügen wir der Module Suite TaskManager wie zuvor beschrieben ein neues Modul namens TaskEditor hinzu. Anlage eines Formulars Um ein neues Formular anzulegen, rufen Sie bitte das Kontextmenü des Source-Paketes des neu angelegten Moduls TASKEDITOR auf und wählen NEW OTHER. In der Kategorie SWING GUI FORMS wählen Sie bitte JPANEL FORM und bestätigen die Auswahl mit NEXT (siehe Abbildung 2-2). Auf der zweiten Seite des Dialogs geben Sie»TaskEditorPanel«als Namen der Klasse an und beenden den Dialog, siehe Abbildung 2-3. Abbildung 2-2: Ein neues Formular anlegen Anlage eines Formulars 21

4 Abbildung 2-3: Neues JPanel Der Form Builder öffnet sich und zeigt das leere Formular (siehe Abbildung 2-4). Abbildung 2-4: Leeres Formular 22 Kapitel 2: Formulare

5 Platzierung von Komponenten Komponenten werden am einfachsten in der Design-Ansicht per Dragand-Drop aus der Palette in das Formular eingefügt. Alternativ können Sie in der Palette die gewünschte Komponente anklicken, den Cursor über das Formular bewegen und erneut klicken, um die Komponente an der Position des Cursors zu platzieren. Halten Sie hierbei die Schift-Taste gedrückt, können Sie sehr bequem mehrere Komponenten des gleichen Typs einfügen. Klicken Sie nun in der PALETTE auf LABEL, bewegen Sie den Cursor über das Formular, und drücken Sie erneut die Maustaste. Ein neues JLabel mit dem Namen»jLabel1«erscheint nun im Formular mitsamt zwei Ankern, die seine Verankerung an den Rändern anzeigen, wie in Abbildung 2-5 zu sehen. Abbildung 2-5: Label mit Ankern Ausrichtung von Komponenten Das vom Form Builder verwendete Standardlayout ist das neu eingeführte GroupLayout. Wie bereits geschildert, berücksichtigt das Group- Layout die Ausrichtung der Komponenten zueinander und zu den Rändern des Formulars. GroupLayout ordnet Komponenten aufgrund ihrer Ausrichtung zueinander und zu den Rändern an. Anlage eines Formulars 23

6 Die Kriterien für die Anordnung werden schon beim Positionieren dynamisch angezeigt. Daher unterstützt der Form Builder die Ausrichtung bereits vor dem eigentlichen Einfügen neuer Komponenten. Sobald Sie eine Komponente in die Nähe einer anderen Komponente oder eines Formularrandes ziehen, versucht der Form Builder unter anderem festzustellen, welchen Abstand die neue Komponente haben soll und wie gegebenenfalls die Seiten der Komponenten zueinander ausgerichtet werden sollen. Die gerade gewählte Ausrichtung wird Ihnen über gestrichelte Linien zwischen und an den Komponenten sowie eine Textmeldung oberhalb des Formulars angezeigt (Abbildung 2-6). Sobald die Komponente eingefügt wurde, ändert sich die Darstellung. Die gestrichelten Linien werden durch durchgezogene Linien mit gefüllten Halbkreisen am von der Komponente wegweisenden Ende ersetzt. Sie zeigen die Verankerung der Komponente relativ zu einer anderen an. Ziehen Sie nun ein weiteres Label in das Formular, und versuchen Sie es so in der Nähe des ersten Labels zu positionieren, dass der Form Builder Ihren Wunsch nach einem großen Abstand der beiden Komponenten zueinander erkennt und sie nach ihren rechten Seiten ausrichtet. Abbildung 2-6: Ausrichtungshilfe Sobald Sie das zweite Label platziert haben, wird Ihnen die Verankerung des Labels zum ersten Label und dem linken sowie oberen Rand angezeigt (Abbildung 2-7). 24 Kapitel 2: Formulare

7 Abbildung 2-7: Verankerung Mit einem Doppelklick auf ein Label können Sie seine Bezeichnung verändern. Fügen Sie nun bitte vier Textfelder, zwei Slider und eine Text-Area sowie insgesamt sieben Label ein. Benennen Sie die Label per Doppelklick um, und geben Sie ihnen die Beschriftungen ID, Vater-ID, Name, Fälligkeit, Datum, Priorität, Fortschritt und Beschreibung. Platzieren Sie das zweite Textfeld unter dem ersten Textfeld, und ziehen Sie es so weit an das erste heran, dass der bevorzugte Abstand auf klein gesetzt wird. Anschließend ziehen Sie das dritte Texteld so nah an das zweite heran, dass der bevorzugte Abstand als groß erkannt wird. Mit jeweils kleinem Abstand platzieren Sie bitte das vierte Textfeld sowie die beiden Slider darunter. Wiederum mit großem Abstand platzieren Sie nun bitte die Text-Area unter dem zweiten Slider. Markieren Sie nun diese Komponenten, und wählen Sie im Kontextmenü ALIGN LEFT TO COLUMN sowie ANCHOR LEFT und TOP. Wenn Sie eine Komponente selektieren, erscheint ein Rahmen mit acht weißen Kästchen. Das Ziehen an diesen Kästchen bewirkt eine Änderung der Größe der Komponente. Anlage eines Formulars 25

8 Ziehen Sie die Textfelder und die Text-Area bitte auf die gleiche Breite. Die Slider sollten auf etwa zwei Drittel dieser Breite gezogen werden. Nun ziehen Sie bitte die Label in der obigen Reihenfolge links neben die Komponenten, bis jeweils ein kleiner bevorzugter Abstand erreicht ist. Durch vertikales Verschieben richten Sie die Label bitte jeweils an der Basislinie der Textfelder bzw. an den oberen Rändern der Slider und der Text-Area aus. Das Formular sollte nun in etwas so aussehen wie in Abbildung 2-8. Abbildung 2-8: Zwischenstand Die Verteilung überschüssigen vertikalen und horizontalen Platzes kann separat konfiguriert werden. Platzverteilung Nun müssen wir noch steuern, was geschehen soll, wenn der verfügbare Platz wächst oder schrumpft. Im Kontextmenü der Komponenten finden wir dazu den Punkt AUTO-RESI- ZING und können wählen, ob die Komponente horizontal oder vertikal mit dem verfügbaren Platz mitwachsen soll. Selektieren Sie alle Textfelder sowie die Text-Area, und wählen Sie im Kontextmenü AUTO RESIZING HORIZONTAL. Anschließend markieren Sie bitte die Text-Area und wählen, im Kontextmenü AUTO RESIZING VER- TICAL. 26 Kapitel 2: Formulare

9 Klicken Sie nun auf das Symbol rechts vom Umschalter zwischen Sourceund Design-Ansicht mit dem Auge. Es erscheint eine Vorschau des Formulars, mit der Sie das Verhalten des Layouts bei Größenveränderungen überprüfen können. Komponenteneigenschaften Sobald Sie eine Komponente selektieren, werden ihre Eigenschaften im PROPERTY-Fenster dargestellt. Die Properties können dort direkt modifiziert werden, häufig hilft dabei ein komfortabler Property-Editor. Wir wollen nun für die eingefügten Komponenten einige wichtige Eigenschaften setzen. Die JTextFields für die ID und Vater-ID dienen der reinen Anzeige von Informationen und sollen daher weder editierbar noch aktiv dargestellt werden. Wir setzen daher die Properties editable und enabled auf false. Der JSlider für die Priorität soll einen Maximalwert von zwei bekommen, mit null starten und in Schritten von eins seinen Wert ändern. Wir setzen daher die Properties maximum auf zwei, value auf null und majortickspacing auf eins. Zudem sollen die Positionen einzelner Werte auf dem Strahl gekennzeichnet werden, und der Gleiter soll beim Verschieben automatisch zum nächsten angezeigten Wert rücken. Wir setzen daher sowohl paintticks als auch snaptoticks auf true. Zuletzt soll auch der JSlider für den Fortschritt die Positionen der Werte anzeigen und beim Verschieben zum nächsten angezeigten Wert rücken. Wir setzen also auch hier sowohl paintticks als auch snaptoticks auf true. Zusätzlich sollen die Zahlenwerte angezeigt werden, so dass wir paintlabels auf true setzen. Hinsichtlich der Werte soll der JSlider bei null beginnen und bis maximal 100 erhöht werden können. Wir setzen daher den value auf null und das maximum auf 100. Das Verschieben soll in 5-Prozent-Schritten verlaufen, wobei alle 25 Prozent eine besondere Marke gesetzt werden soll. Wir setzen daher zum Abschluss die Properties minortickspacing auf fünf und majortickspacing auf 25. Zudem setzen wir für alle Textfelder die Property text auf einen leeren Wert. Das Formular sollte nun wie in Abbildung 2-9 aussehen. Der Property- Editor ermöglicht ein bequemes Bearbeiten der Komponenteneigenschaften. Anlage eines Formulars 27

10 Abbildung 2-9: Neuer Zwischenstand EventHandler können über den Form Builder bequem generiert und registriert werden. Event-Handling Auch beim Event-Handling unterstützt uns der Form Builder. Im Kontextmenü jeder Komponente werden unter EVENTS sämtliche in Frage kommenden Ereignistypen aufgeführt, deren Unterpunkte wiederum den jeweiligen Methoden der entsprechenden Listener entsprechen. Wählt man eine solche Methode, wird standardmäßig ein Listener als anonyme innere Klasse im geschützten Bereich der Source generiert und eine Instanz bei der selektierten Komponente registriert. Der generierte Listener überschreibt die zuvor gewählte Methode und delegiert zu einer weiteren Methode im Benutzer-editierbaren Bereich. Dieses Verhalten können Sie ändern, indem Sie im Inspector das Formular selektieren und im PROPERTIES-Fenster die Eigenschaft LISTENER GENERATION STYLE ändern. Im Folgenden wollen wir nun unserem Formular eine Task-Instanz geben und ihre Eigenschaften mit den Formularwerten synchron halten. Dazu müssen wir auf unser TaskModel zugreifen können, so dass Sie nun bitte die Abhängigkeit unseres Moduls zum TaskModel-Modul konfigurieren. 28 Kapitel 2: Formulare

11 Anschließend fügen Sie bitte in der Source-Ansicht der TaskEditorPanel eine Instanzvariable vom Typ Task hinzu. Damit der Zugriff sowohl auf Task als auch TaskImpl möglich ist, deklarieren wir zum einen beide Pakete des Moduls TaskModel als Teil der öffentlichen Schnittstelle und zum anderen eine Abhängigkeit von TaskEditor zu TaskModel. Wie dies geschieht, haben wir bereits im letzten Kapitel gelernt. private Task task = new TaskImpl(); Zudem benötigen wir eine Methode, die den Inhalt des Formulars in den Task schreibt, sowie eine weitere, die das Formular mit den Werten des Tasks aktualisiert. private void updatetask() { this.task.setname(this.jtextfield3.gettext()); TaskEditorPanel. java TaskEditorPanel. java Date due = null; try { due = DateFormat.getDateInstance().parse(this.jTextField4. gettext()); catch (ParseException exception) { due = new Date(); this.task.setdue(due); if (!this.jslider1.getvalueisadjusting()) { switch (this.jslider1.getvalue()) { case 0: this.task.setprio(task.priority.low); break; case 1: this.task.setprio(task.priority.medium); break; case 2: this.task.setprio(task.priority.high); this.task.setprogr(this.jslider2.getvalue()); this.task.setdescr(this.jtextarea1.gettext()); private void updateform() { this.jtextfield1.settext(this.task.getid()); this.jtextfield2.settext(this.task.getparentid()); this.jtextfield3.settext(this.task.getname()); this.jtextfield4.settext( DateFormat.getDateInstance().format(this.task.getDue())); Event-Handling 29

12 TaskEditorPanel. java TaskEditorPanel. java Generierter Code kann nicht im Editor modifiziert werden. Stattdessen bietet der Reiter Code der Properties die Möglichkeit, eigenen Code an vorgegebenen Stellen einzufügen. this.jtextarea1.settext(this.task.getdescr()); if (Task.Priority.LOW.equals(this.task.getPrio())) { this.jslider1.setvalue(0); else if (Task.Priority.MEDIUM.equals(this.task.getPrio())) { this.jslider1.setvalue(1); else { this.jslider1.setvalue(2); this.jslider2.setvalue(this.task.getprogr()); Vor der Anzeige des Formulars sollte die Methode zum Setzen der Taskwerte im Formular aufgerufen werden. Wir überschreiben daher den Konstruktor des Formulars wie folgt: public TaskEditorPanel() { initcomponents(); this.updateform(); Nun wollen wir zwei ChangeListener auf den Slidern registrieren, die die updatetask()-methode aufrufen. Rufen Sie dazu in der Design-Ansicht das Kontextmenü des ersten Sliders auf, gehen Sie auf EVENTS, und wählen Sie CHANGE STATECHANGED. Der Form Builder wechselt nun automatisch in die Source-Ansicht. Wechseln Sie wieder in die Design-Ansicht, und führen Sie bitte das Gleiche für den zweiten Slider aus. Anschließend implementieren Sie die Methoden zur Ereignisbehandlung wie folgt: private void jslider2statechanged(javax.swing.event.changeevent evt) { this.updatetask(); private void jslider1statechanged(javax.swing.event.changeevent evt) { this.updatetask(); Auf diese Weise könnten wir nun auch Änderungen an den Textfeldern behandeln. Anhand dieser Aufgabe wollen wir uns jedoch anschauen, wie generierter Code geändert werden kann. Modifikation von generiertem Code Sie haben sicherlich schon bemerkt, dass NetBeans Code in einen geschützten Bereich generiert und Ihnen die direkte Editierung verwehrt. Nur so kann sichergestellt werden, dass die Meta-Informationen der Formularbeschreibung mit dem eigentlichen Quellcode übereinstimmen. Wollen wir diesen Code ändern, können wir das zwar nicht über den Editor, jedoch über die Properties der entsprechenden Komponenten unter der Rubrik CODE tun. 30 Kapitel 2: Formulare

13 Die Properties entsprechen verschiedenen Stellen im Quellcode mit Bezug zu den Komponenten und können über den Property-Editor auch mehrzeilig editiert werden. Wir wollen das nutzen, um unmittelbar nach dem generierten Listener einen eigenen Listener auf den Text-Komponenten zu registrieren. Dazu schreiben wir uns zunächst einen DocumentListener und speichern ihn in einer Instanzvariablen: private DocumentListener doclistener = new DocumentListener() { public void insertupdate(documentevent evt) { TaskEditorPanel.this.updateTask(); TaskEditorPanel. java public void removeupdate(documentevent evt) { TaskEditorPanel.this.updateTask(); public void changedupdate(documentevent evt) { TaskEditorPanel.this.updateTask(); ; In der Design-Ansicht selektieren Sie nun das Textfeld NAME und starten im PROPERTIES-Fenster in der Rubrik CODE den Property-Editor für die Property POST LISTENER CODE. Dort geben Sie bitte den folgenden Code ein: this.jtextfield3.getdocument().adddocumentlistener(this.doclistener); Für die übrigen Text-Komponenten verfahren Sie bitte entsprechend. Nutzung der Palette Die Palette haben wir bereits mehrfach verwendet, um vorgegebene Komponenten bequem in unsere Formulare einzufügen. Die Palette kann jedoch auch genutzt werden, um eigene Komponenten wiederzuverwenden. Dazu rufen wir das Kontextmenü der PALETTE auf und starten den PALET- TEN MANAGER, der in Abbildung 2-10 zu sehen ist. Mit NEW CATEGORY erzeugen wir eine Kategorie namens»eigene«und selektieren sie anschließend. Über ADD FROM PROJECT starten wir einen Wizard, auf dessen erster Seite wir das TaskManager-Projekt aufklappen und das TASKEDITOR-Projekt auswählen. Mit NEXT gelangen wir zu einer Auswahl der JavaBeans in diesem Projekt, wählen unser TASKEDITORPANEL Die Komponenten-Palette kann um eigene Kategorien und Komponenten erweitert werden. Modifikation von generiertem Code 31

14 und gehen zur dritten Seite des Dialogs, auf der wir die Kategorie EIGENE wählen und den Dialog beenden. Abbildung 2-10: Paletten-Manager Die Palette enthält nun die Kategorie Eigene mitsamt unserem TaskEditor- Panel, das wir im nächsten Kapitel wiederverwenden werden. 32 Kapitel 2: Formulare