The 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.
When the Border Layout is applied, the attribute "border-layout-region"
for each component or container that will be within the area affected
by this layout has to be set to one of the mentioned regions. For example,
if an <xbutton> will appear within the area, then the button can
be set as follows:
<xbutton text="My Button" border-layout-region="NORTH"/>
Example 1: An example of five buttons arranged using
the border-layout Layout Manager. Each button occupies a border-layout-region:
NORTH, WEST, CENTER, EAST, and SOUTH. The positioning of these objects is not
based on document order. Positions are determined by the region settings.
Code:
<xpanel>
<layoutmanager type="border-layout"/>
<xpanel border-layout-region="NORTH">
<xbutton style="width:375px; height:100px" tooltip="NORTH region" text="NORTH"/>
</xpanel>
<xpanel border-layout-region="WEST">
<xbutton style="width:125px; height:100px" tooltip="WEST region" text="WEST"/>
</xpanel>
<xpanel border-layout-region="CENTER">
<xbutton style="width:125px; height:100px" tooltip="CENTER region" text="CENTER"/>
</xpanel>
<xpanel border-layout-region="EAST">
<xbutton style="width:125px; height:100px" tooltip="EAST region" text="EAST"/>
</xpanel>
<xpanel border-layout-region="SOUTH">
<xbutton style="width:375px; height:100px" tooltip="SOUTH region" text="SOUTH"/>
</xpanel>
</xpanel>
Example 2: Bi-Directional Control.
The direction of which the objects within this layout manager can also
be manipulated by using the "dir" attribute. By setting the
value to "rtl", the objects will be displayed with a direction
of right-to-left. Notice that the button marked "WEST" now appears
in the east region.
Code:
<xpanel dir="rtl">
<layoutmanager type="border-layout"/>
<xpanel border-layout-region="NORTH">
<xbutton style="width:375px; height:100px" tooltip="NORTH region" text="NORTH"/>
</xpanel>
<xpanel border-layout-region="WEST">
<xbutton style="width:125px; height:100px" tooltip="WEST region" text="WEST"/>
</xpanel>
<xpanel border-layout-region="CENTER">
<xbutton style="width:125px; height:100px" tooltip="CENTER region" text="CENTER"/>
</xpanel>
<xpanel border-layout-region="EAST">
<xbutton style="width:125px; height:100px" tooltip="EAST region" text="EAST"/>
</xpanel>
<xpanel border-layout-region="SOUTH">
<xbutton style="width:375px; height:100px" tooltip="SOUTH region" text="SOUTH"/>
</xpanel>
</xpanel>
Example 3: The following example shows the same set
of buttons but rendered using icons. NOTE: the path to the images is relative
to the XUI page.
Code:
<xpanel border-layout-region="CENTER">
<layoutmanager type="border-layout"/>
<xpanel border-layout-region="NORTH">
<xbutton style="width:375px; height:100px">
<xicon src="../../XUI-INF/icons/plasticxp/32x32/user-group.gif"/>
</xbutton>
</xpanel>
<xpanel border-layout-region="WEST">
<xbutton style="width:125px; height:100px">
<xicon src="../../XUI-INF/icons/plasticxp/32x32/save-as.gif"/>
</xbutton>
</xpanel>
<xpanel border-layout-region="CENTER">
<xbutton style="width:125px; height:100px">
<xicon src="../../XUI-INF/icons/plasticxp/32x32/preferences.gif"/>
</xbutton>
</xpanel>
<xpanel border-layout-region="EAST">
<xbutton style="width:125px; height:100px">
<xicon src="../../XUI-INF/icons/plasticxp/32x32/picture1.gif"/>
</xbutton>
</xpanel>
<xpanel border-layout-region="SOUTH">
<xbutton style="width:375px; height:100px">
<xicon src="../../XUI-INF/icons/plasticxp/32x32/bug.gif"/>
</xbutton>
</xpanel>
</xpanel>
Next: Grid Layout
Back to: Application Guide
| 