The layout propertyThe layout property
Containers for drawables (i.e. drawing and plotting panels) define their own system of coordinates that allows their children (which must be drawing elements) to specify their position using user coordinates. For this reasons these containers have no layout property.
We need to admit that the first time a new user is faced with layouts, they always seem an unnecessary nuisance: “Why can’t I just place a child exactly here with a fixed, prescribed size?”. The answer appears naturally when the user resizes or adds new elements to a view (which happens rather frequently). Then, the original sizes and positions are almost always inadequate. Using layout policies in the containers of our view instructs them how to proceed in these situations to distribute the new available space in a form that is congruent with the previous one. After a bit of practice, the use of layout policies becomes not only simple, but it even appears as the natural way of designing the interface.
Even when Java provides a great deal of layout policies (and allows the programmer to create new ones), we will only use the following layouts:
Overview:
Border layout
![]() Border layout with all four “bordering” panels
In Java the five options are referred to as Center, North, East, South, West; in EJS the five options are referred to as Center, Up, Right, Down, Left, respectively. None of the five panels is mandatory, all combinations of subsets are valid. When all five panels are declared the layout will consist of two nested boxes: a vertical stack, with a Left/Center/Right row in between.
Border layout is designed to fill the available space, and to maintain that state when the outer dimensions change. The Up and Down panel receive only the vertical space they need, the remainder is allocated to the middle section. Horizontally, the Up and Down panel are expanded to the width of the outer dimension (overruling any width setting of their contents). In the middle section, the Left and Right panel get the horizontal space they need, the remainder is allocated to the Center panel.
![]() Rearranged layout when the end user has stretched the window
The image shows what happens when the application window is stretched vertically.
Note: The default setting of the ‘Resizable’ property of the parent container Frame element is ‘true’, in which case the end user can resize the window by dragging the edge with the mouse. The purpose of the layout policy is to maintain a consistent layout over a range of window sizes.
![]() Layout of a subset of the bordering panels
The image shows how the arrangement comes out for a subset of the five panels. As mentioned earlier, all subset combinations of the panels are valid. In each case the child elements are expanded to fill the available space.
HBOX layout
![]() HBOX layout
In HBOX layout difference in horizontal size of the child elements will persist.
VBOX layout
![]() VBOX layout
Grid layout
![]() Grid layout
With Grid layout the available space is allocated evenly between the cells. Note that a Grid layout with a single row is the same as an HBOX layout, except that with Grid layout the child elements will all have the same size.
Flow layout
![]() Flow layout
![]() Automatic reflow when the window is stretched
Flow layout will arrange the child elements much like the words on a line; individual widths are preserved and the group of elements can be left, right or center justified. In EJS flow layout is suitable when enough horizontal space for all child elements is guaranteed.
General remarks
The examples above all involved subdivisions of the main EJS frame, but it applies for any subpanel. When a new subpanel is created in the tree of view elements the default layout policy that EJS offers is border layout.
In the cases of Border, Grid, and Flow layout it is also possible to enter values for horizontal and vertical separation between the child elements.
The EJS view is created by nesting panels, each with suitable layout, in such a way that the combined effects produce the desired user interface. |