Using XUI Layout Managers

With a good understanding of the XUI components, it is now critical to be able to lay out the components and place them on the page appropriately. XUI uses Layout Managers to assist the developer in placing components in the preferred layout. A layout is the arrangement of UI components within a container such as an <xpanel> or <xcontentpane>. To position components according to the preferred layout, XUI depends on its built-in layout managers to control each component according to the given layout.

These layout managers are border layout, flow layout and grid layout. Each of these layout managers works differently to give you more control over the environment.

In all cases, setting the appropriate layout manager is defined by setting a “type” attribute of the <layoutmanager> element such as:

<layoutmanager type="border-layout"/> 

The options for the “type” attribute are:

1. flow-layout - A flow layout arranges components in a left-to-right flow, much like lines of text in a paragraph. Flow layouts are typically used to arrange buttons in a panel. It will arrange buttons left to right until no more buttons fit on the same line.
2. border-layout - A border layout is used to arrange components in different geographical regions. These regions are defined as NORTH, SOUTH, WEST, EAST, and CENTER.
3. grid-layout - The grid layout is used to lay out a container's components in a rectangular grid. The container is divided into equal-sized rectangles, and one component is placed in each rectangle.

If no layout manager is defined, the default is “flow-layout”.

All of these layout managers can be nested by using nested <xpanel> elements. For example, because the Border Layout places components in a relative location, it is very common to embed another Border Layoutmanager within a specific region as additional components are added and need to be placed precisely in the screen layout. Demonstrated in the figure below, the “CENTER” region of the larger layout has another Border layout region called where components can now be placed within any of the five new regions (NORTH, WEST, CENTER, EAST or SOUTH) within the main CENTER region.

Next: Flow Layout
Back to: Application Guide

COPYRIGHT © 1997–2006 JWAY GROUP, Inc.
All Rights Reserved. XUI is a registered trademark of JWAY GROUP, Inc.
All other designated trademarks and brands are properties of their respective owners.