Recent Changes - Search:

Information

Installation

Documentation

User Feedback

The layout property

The layout property
Maybe the most important property of a container for other interface elements (not for drawables) is the layout. When an element is added to a container, the parent assigns to the child appropriated position and size according to the available space, the child requirements, and of, so to call it, the container’s own policy of space distribution or layout. Some layouts allow the child to choose its relative position inside the parent, but in most of them position is a consequence of the “order of birth” of the child.

 

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:

 

  • Border layout
  • HBOX layout
  • VBOX layout
  • Grid layout
  • Flow layout

 

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.
The Up and Down panel do not get more vertical space, as they already have enough; the extra vertical space is allocated to the Left/Center/Right panel.

 

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.
If not enough space is available flow layout will flow the child elements, much in the way words are arranged in a paragraph; when the line is filled a new line is started.

 

 

 

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.

Edit - History - Print - Recent Changes - Search
Page last modified on August 16, 2009, at 09:55 PM