Formulare designen

Anfang  Zurück  Vor

Letzte Änderung 28.07.2016

 

Formular-Container

 

Alle Formular-Komponenten, die zu einem Formular gehören sollen, müssen sich direkt im Formular-Container befinden. Formular-Komponenten, die direkt im Fenster liegen oder sich in einer ganz anderen GUI-Komponente befinden, können von den Formular-Methoden nicht berücksichtigt werden. Dabei ist nicht ausreichend, wenn eine Formular-Komponente nur über den Formular-Container geschoben wird, sodass es optisch so aussieht, als würde die Formular-Komponente zum Formular gehören. Ob sich alle Formular-Komponenten korrekt im Formular-Container befinden, können Sie mit Hilfe der Übersicht überprüfen. In der Übersicht werden alle GUI-Komponenten, die sich in einem Fenster befinden, hierarchisch in Form eines Trees dargestellt.

 

Der Formular-Button dagegen muss nicht zwingend im Formular-Container liegen, sondern kann beliebig positioniert werden. Denn Formular-Methoden wie das Speichern mit save() lassen sich auch von jeder anderen GUI-Komponente aufrufen, z.B. von einem ToolBarButton oder aus einem Menü, was in der Praxis auch häufig praktiziert wird.
 

Formular im GUI-Builder - TextField7 liegt optisch betrachtet wie alle anderen Formular-Komponenten im Formular-Container.

clip0064

 

Formular in der Übersicht - In der Übersicht wird deutlich, dass TextField7 nicht im Formular-Container liegt, sondern direkt im Fenster test und lediglich über das Formular geschoben wurde. Das TextField7 kann somit weder per Formular-Aktion gefüllt, noch abgespeichert werden.

clip0065

 

 

 

Formulare verteilen

 

Zu einem Formular gehören grundsätzlich alle Formular-Komponenten, die sich innerhalb eines Formular-Containers befinden. Dabei ist es egal, ob sich die Formular-Komponenten direkt im Formular-Container befinden, oder in einer anderen GUI-Komponente, sofern diese im Formular-Container liegt. D.h. ein TextField gehört auch dann zum Formular, wenn es sich z.B. in einem TabbedPane befindet, wenn dieser wiederum im Formular-Container liegt. Dies ist vor allem bei größeren Formularen sehr hilfreich, die Sie mit Hilfe anderer Komponenten zur besseren Übersicht aufteilen können, z.B. mit einem TabbedPane.

 

Ein Formular lässt sich sogar auf mehrere Internal Frames verteilen, die in einem DesktopPane liegen müssen. Voraussetzung ist, dass der DesktopPane in einem Formular liegt. Das Verteilen eines Formulars auf "echte" Java Fenster, Frames und Dialoge ist jedoch nicht möglich.

 

Standard-Formular - Alle Formular-Komponenten befinden sich direkt im Formular-Container.

clip0066

 

Formular mit Tabs - Formular aufgeteilt auf mehrere Tabs. Der TabbedPane muss im Formular liegen.

clip0067

 

Verteiltes Formular - Formular-Komponenten verteilt auf verschiedene Internal Frames. Die DesktopPane in dem die Internal Frames liegen, muss im Formular liegen.

clip0068

 

 

 

 

Formular mit Tabelle verknüpfen (mapping)

 

Im RAD-Konzept von XDEV 5 erfolgen Datenbankzugriffe immer über eine Virtuelle Tabelle. Demnach muss jedes Formular mit einer Virtuellen Tabelle verknüpft werden, indem jeder einzelnen Formular-Komponente ein Datenfeld der entsprechenden Virtuellen Tabelle zugewiesen wird. Dazu können Sie bei jeder Formular-Komponente in den Eigenschaften bei Datenfeld das entsprechende Datenfeld angeben, oder Sie ziehen die Datenfelder der Virtuellen Tabelle im Projektmanagement einfach per Drag&Drop auf die dazugehörigen Formular-Komponenten im Formular. Beim automatischen Generieren eines Formulars werden die Verknüpfungen automatisch durchgeführt.

 

Das Formular ist auch dann funktionsfähig, wenn Datenfelder nicht beschrieben werden, weil dafür keine Formular-Komponenten im Formular vorhanden sind. In diesen Fällen werden die in der Datenbank-Tabelle vorkonfigurierten Defaultwerte (Standardwerte) gespeichert.

 

clip0070

 

 

Hinweis: Formular-Komponenten die noch nicht mit einem Datenfeld verknüpft sind, sind die häufigste Ursache für Formular-Fehler.

 

 

 

Tutorial

 

Dieses Tutorial beschreibt das individuelle Designen eines Formulars mit Hilfe des XdevTableLayouts, mit dem sich Formulare skalieren und ohne großen Layout-Aufwand sehr leicht umgestalten lassen. Formulare lassen sich auch ohne Layout-Manager designen, indem alle Komponenten mit absoluten Koordinaten und Dimensionen positioniert werden. Die Vorgehensweise unterscheidet sich nur gering. Mit Layout-Manager lassen sich spätere Umgestaltungen und Erweiterungen jedoch deutlich bequemer durchführen.

 

 

1.Fügen Sie zuerst die Komponente XdevFormular in die Arbeitsfläche ein.

a.Weisen Sie dem Formular nun einen Layout-Manager zu. Klicken Sie dazu in den Eigenschaften des Formulars bei Layout auf moredetails, wählen Sie im folgenden Dialog die Option XdevTableLayout und klicken Sie auf OK.

clip0169

2.Fügen Sie ein XdevLabel in das Formular links oben ein, beschriften Sie dieses mit Bildpfad und fügen Sie daneben ein XdevTextField ein.

3.Fügen Sie darunter ein zweites XdevLabel in das Formular ein, beschriften Sie dieses mit Modell und fügen Sie daneben eine XdevComboBox ein. Ziehen Sie die Virtuelle Tabelle Modelle per Drag&Drop auf die ComboBox, um diese zu füllen.

4.Fügen Sie darunter ein drittes XdevLabel in das Formular ein, beschriften Sie dieses mit Leistung und fügen Sie daneben ein XdevTextField ein.

5.Fügen Sie darunter ein viertes XdevLabel in das Formular ein, beschriften Sie dieses mit Erstzulassung und fügen Sie daneben ein XdevDateTextField ein.

6.Fügen Sie darunter ein fünftes XdevLabel in das Formular ein, beschriften Sie dieses mit Kilometerstand und fügen Sie daneben ein XdevTextField ein.

7.Fügen Sie darunter ein sechstes XdevLabel in das Formular ein, beschriften Sie dieses mit Fahrzeugtyp und fügen Sie daneben eine XdevComboBox ein. Ziehen Sie die Virtuelle Tabelle Fahrzeugtyp per Drag&Drop auf die ComboBox, um diese zu füllen.

8.Fügen Sie darunter ein siebtes XdevLabel in das Formular ein, beschriften Sie dieses mit Fahrzeugart und fügen Sie daneben eine XdevComboBox ein. Ziehen Sie die Virtuelle Tabelle Fahrzeugart per Drag&Drop auf die ComboBox, um diese zu füllen.

9. Fügen Sie darunter ein achtes XdevLabel in das Formular ein, beschriften Sie dieses mit Kraftstoff und fügen Sie daneben eine XdevComboBox ein. Ziehen Sie die Virtuelle Tabelle Kraftstoff per Drag&Drop auf die ComboBox, um diese zu füllen.

10. Fügen Sie darunter ein neuntes XdevLabel in das Formular ein, und beschriften Sie dieses mit Getriebe und fügen Sie daneben eine XdevComboBox ein. Ziehen Sie die Virtuelle Tabelle Getriebe per Drag&Drop auf die ComboBox, um diese zu füllen.

11. Fügen Sie darunter ein zehntes XdevLabel in das Formular ein, beschriften Sie dieses mit Farbe und fügen Sie daneben eine XdevComboBox ein. Ziehen Sie die Virtuelle Tabelle Farbe per Drag&Drop auf die ComboBox, um diese zu füllen.

12. Fügen Sie darunter ein elftes XdevLabel in das Formular ein, beschriften Sie dieses mit Preis und fügen Sie daneben ein XdevTextField ein.

13. Weisen Sie nun einer beliebigen Formular-Komponente die Layout-Option Streckung zu, damit sich die Formular-Komponenten immer automatisch an die Größe des Formulars anpassen. Wählen Sie dazu im Menü Ansicht > Fenster > Toolbox und klicken Sie in der Toolbox bei Streckung aufdistribute_objectwidth.

clip0164

 

Formular-VT Mapping

14. Verknüpfen Sie nun alle Formular-Komponenten mit den dazugehörigen Datenfeldern der Virtuellen Tabelle Fahrzeuge. Klicken Sie dazu zuerst im Projektmanagement > Virtuelle Tabellen > Fahrzeuge.java das Datenfeld BILDPFAD an und ziehen Sie dieses mit Drag&Drop auf das TextField im Formular bei Bildpfad.

clip0165

15. Ziehen Sie dann das Datenfeld MODELL_ID auf die ComboBox im Formular bei Modell.

16. Ziehen Sie das Datenfeld LEISTUNG auf das TextField im Formular bei Leistung.

17. Ziehen Sie das Datenfeld ERSTZULASSUNG auf das DateTextField im Formular bei Erstzulassung.

18. Ziehen Sie das Datenfeld KILOMETERSTAND auf das TextField im Formular bei Kilometerstand.

19. Ziehen Sie das Datenfeld FAHRZEUGTYP_ID auf die ComboBox im Formular bei Fahrzeugtyp.

20. Ziehen Sie das Datenfeld FAHRZEUGART_ID auf die ComboBox im Formular bei Fahrzeugart.

21. Ziehen Sie das Datenfeld KRAFTSTOFF_ID auf die ComboBox im Formular bei Kraftstoff.

22. Ziehen Sie das Datenfeld GETRIEBE_ID auf die ComboBox im Formular bei Getriebe.

23. Ziehen Sie das Datenfeld FARBE_ID auf die ComboBox im Formular bei Farbe.

24. Ziehen Sie das Datenfeld PREIS auf das TextField im Formular bei Preis.