Layouting

When the UIs become more sophisticated, the framework's automatic layouting will soon lead to poor mask layouts. Although there are a few annotations for descriptive layout control (like @FieldOrder and @MethodOrder), gengui's approach for reasonable layouts is a different one. Whenever you bring a mask on the screen for the first time, the framework automatically generates a layout and writes it to file. These layout files may later be edited in a very user-friendly WYSIWYG way using the tool JFormDesigner (currently version 5.x). Subsequent starts of the application use these files when they are present. JFormDesigner is probably the most convenient UI builder for Swing-based applications. So what ever UI tools you have used before - this one will grip you.

Start the example from directory examples-firststeps/quickstart/layout by the following command:

java gengui.infonode.RootFrame quickstart.layout.RegisterNewCar

It is exactly the same application as in directory examples-firststeps/quickstart/validate from the section above. As the only difference it is not explicitly configured to avoid the creation of layout files (see the file resources/quickstart_validate_gengui.properties, which does that for the validation example application). So it uses the defaults.What you see on the screen is the same as before. But if you have a look in the directory resources/layouts you will find a new file there named quickstart_layout_RegisterNewCar.jfd. JFD is an JSon-based layout description format from the JFormDesigner.

If you haven't installed JFormDesigner yet, you should do that now. You can download a free evaluation copy from www.formdev.com which installs in less than a minute. After installation just double-click the JFD file to open it in JFormDesigner which looks like that:

Before editing layouts, be sure to switch off JFormDesigner's Java code generation under Window->Preferences...->Java Code Generator.

gengui generates the layout using the JGoodies FormLayout which is a perfect Swing layout manager for automatic creation and subsequent manual improvement. It organizes the mask as a grid of columns and row while being much more comfortable than the mean old GridBagLayout. A column can e.g. be widened and narrowed by clicking on the splitter marks between the column numbers in the frame around the mask and dragging them back and forth.

You may apply any kind of layout manipulation but - of course - you must neither add, rename or delete any of the I/O components like text fields, buttons, combo boxes etc. But you may completely re-arrange the mask, change the label texts, add or remove layout containers, additional descriptive labels, and rows and columns in the layout. Although the initially created container hierarchy reflects the domain objects' references between each other, you are completely free to change this.

As an example we will change the label "License Number" to "License No." and make this tiny edit mask to look more like a dialog without resizing behavior and being centered on the screen. Changing the label is easy - just double-click it and you can edit the text. The rest takes some experience, so you may leave this part away. Otherwise the result looks like this:

Now save the file and start your application again. The next time you hit the Register New Car button you will see the mask come up as you designed it in the JFormDesigner:

But what is happening to your layouts if you need to extend your domain object after having spent hour of graphical design work? Don't panic - it will usually not get lost. By default, subsequent extensions are automatically merged into existing layouts. The result looks pretty ugly because the framework can only add the new fields at the bottom. But proper placement is simple work using the JFormDesigner.

Give it a try an add a description property to the Car class. Then start the application again and press the Register New Car button. You should now see a mask like that:

Very ugly indeed, but the merged layout can easily be beautified. Load the JFD file to the JFormDesigner, add a row to the upper New Car panel and move the description label and field from the lower panel to the upper one. Then completely delete the row which contains the lower panel.

Gengui also supports a few component type changes in the layouts. E.g. the description property may require a bit more content and multiple lines. So you may change the component's type from JTextField to JTextArea by clicking on the component and select menu item Morph Bean... from the context menu.

For an overview of the supported component morphings have a look in chapter " Manual GUI tuning" in the manual. Morphing is also the way how to change a non-editable table for a domain object's collection property to a repeated view of sub panels.

Created with the Personal Edition of HelpNDoc: Easy EPub and documentation editor