Changing Layouts


The layout for containers/composites can be set using the context menu or the component/layout palette, and also by
using the "Layout" section of the "GUI Properties" view.

Layout palette: Choose the layout from the component/layout palette, and click on the component in the form or in the Outline view.

Context menu: Right-click on a component and choose one of the "Set Layout" options. The layout and it's parameters will be displayed in the "GUI Properties" view, where it can be edited. Eg, the number of columns, margins, etc for a Grid layout can be set here.

GridBagLayout


For the Swing GridBagLayout you can drag the sides of components to change their gridwidth and gridheight parameters (a tooltip box will tell you their current values) and you can change the gridx and gridy values by just dragging the component. The best way to change the gridx and gridy values is to drag the component by a blue region of the selection border, instead of clicking and dragging the interior of the component, since this latter method can change the parent of the dragged component, while the former method will only change the grid values.


Here a JTextPane is about to be added at grid position (2,2),  indicated by the red box. The top-left position is (0,0).

Here, the JTextPane has been added and the tooltip indicates it's grid position and size. Note that it does not fill up a grid cell.



To make it fill the grid cell, select a "fill" constraint of "HORIZONTAL", "VERTICAL" or "BOTH"

Now it fills the cell, and is being dragged up and left, to position 1,1, indicated by the red box.



Now it has been moved, and it's bottom-right edge is being dragged to increase it's width by 1 column and it's height by 2 rows.

Now it has been resized, and the tooltip indicates it's grid x, y, width and height values.

The above container had a grid size of 3 columns and 4 rows. To alter this, set the "columns" and/or "rows" properties of the container's layout. This will alter the grid, as shown below. Note that these "columns" and "rows" properties are "synthetic" properties, and are defined and used by Jigloo to set the GridBagLayout's columnWeights, columnWidths, rowWeights and rowHeights array properties. After setting the rows or columns, you can modify the individual values for columnWeights etc, if needed.


However, if you want to change the preferredSize property of an element without changing it's gridx, gridy, gridwidth or gridheight values, then hold the SHIFT key down while dragging a black section of a selected element's border.

JGoodies FormLayout

The JGoodies FormLayout is supported by Jigloo 3.1. It's behaviour inside Jigloo is very similar to that of the GridBagLayout, in that the grid x,y,width and height values can be changed by dragging the borders of components.

As with the GridBag layout, if you want to change the preferredSize property of an element without changing it's gridx, gridy, gridwidth or gridheight values, then hold the SHIFT key down while dragging a black section of a selected element's border.

The parameter passed to the FormLayout(colSpecs, rowSpecs) constructor determines the columns and rows of the layout. Jigloo generates a default value of

new FormLayout("max(p;5px), max(p;5px), max(p;5px), max(p;5px)",
                 "max(p;5px), max(p;5px), max(p;5px), max(p;5px)");

which creates a layout of four columns and four rows, with each cell having a size of 5 pixels or the preferred size of the element which occupies that cell (if there is one), whichever one is bigger. You can change the "colSpecs" and "rowSpecs" for the layout in Jigloo - a "p" specifies the preferred size, while a number followed by "px" specifies a size in pixels, so for example "colSpecs={10px, p, 100px, 10px}, rowSpecs={50px, 50px}" will specify a layout with 4 columns and two rows, with the cells in the second column assuming the preferred widths of the components which occupy them, and all other cells having specified widths and heights.

You can read the documentation on the jgoodies site for more information on FormLayout. Note that Builders and Factories are not yet supported by Jigloo.

If you use this layout in your code then you need to include the forms-1.0.5.jar file in your project's build path. You can find this jar file in the jigloo plugin folder, or you can download it from the jgoodies site.

Form and Anchor Layouts


The graphical editing of the SWT FormLayout, and the Swing com.cloudgarden.layout.AnchorLayout, is similar to the laying-out of components in the Delphi or Visual Studio graphical editors. Components can be moved around and resized, but also sides can be anchored so that when the container is resized components will be resized with it, maintaining a constant relationship to the container's sides. In Jigloo, there are two kinds of "anchors" - relative and absolute. If a side is anchored absolutely then it will remain a fixed distance in pixels from it's parent's respective side. For instance, if the bottom side of a component is anchored (with an anchor value of say 100) then it will remain fixed 100 pixels from the bottom side of it's parent. If the top side is also anchored (with say a value of 150) then the top side will remain 150 pixels from the top of it's parent and if it's parent is stretched vertically then the component will also stretch vertically.

To illustrate the effects of anchoring one or both sides absolutely or relatively, consider this simple button:


If both left and right sides are anchored absolutely and the frame is stretched:


If the right side is anchored absolutely but the left side is not anchored at all:


If
both left and right sides are anchored relatively:


If the right side is anchored relatively but the left side is not anchored at all:


And then one side might be anchored absolutely and the other relatively.

In the "Layout" part of the "GUI Properties" editor view, you will see an "Anchor" entry when the selected component is managed by an Anchor or Form layout. The value for this label will be something like this: "[T,r,B]". Upper case means that a side is absolutely anchored, while lower case implies it is relatively anchored, so the above label means that the top and bottom sides are absolutely anchored, the right side is relatively anchored, and the left side is not anchored at all.

To anchor sides using the editor, either click on the "Anchor" label in the Layout part of the property editor, or right-click on one or several components and choose the "Anchor..." option. In either case, a dialog will pop up allowing you to switch between no/absolute/relative anchoring of each of the four sides.


The AnchorLayout for Swing components provides only this anchoring behaviour, and not the more complex behaviour offered by the SWT FormLayout. If you select an AnchorLayout for a component then the com.cloudgarden.layout package will be automatically generated inside your project, so that the code you need to run your Swing app will all be there.

In addition to the "Anchor" options, there are context-menu "Align" options for components inside Anchor or Form layouts. If you select multiple components you can choose to align them by their left, center (horizontally), right, top, center (vertically) or bottom sides, with the component on which the context menu was opened being the reference component. You can also choose the "Align components...->Snap to grid" option to arrange all the selected components along grid lines (if a snap-grid is being used).

Setting layout parameters


If a component is a child of a container with a defined layout, (eg, a SWT Button inside a Composite with a Grid layout) then that Button will have a "Grid Constraints" entry in the "Layout" part of the GUI Properties view. Below, the GridBag constraints node is opened in the property editor.


For the Swing GridBagLayout, you can drag the sides of components to change their gridwidth and gridheight parameters (a tooltip box will tell you their current values) and you can change the gridx and gridy values by just dragging the component.

For several kinds of layout (Border, GridBag, SWT Grid, and for components of a JSplitPane) there are context-menu options for quickly setting some of these parameters, for instance, the "anchor" and "fill" parameters for a GridBag layout, or the direction for a Border layout.

It is worthwhile reading the javadoc for the SWT layouts (and the Swing GridBagLayout) so that these values make sense to you - and then combine that with some experimentation inside Jigloo to see the actual effect of setting various layout parameters.

It is also worthwhile examining the examples that come with Jigloo to see how certain layout patterns are created.