Recent Changes - Search:

Information Foreword What is EJS? Demos/Examples Credits Links Webcasts Installation Download & Install EJS Workspaces Running EJS Conditions of Use Documentation EJS Console EJS Interface Description Panel Model Panel View Panel Deployment Elements Reference User Feedback English | Spanish | ? View Edit History Print PDF ## 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