The 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 square. The number of grid spaces is decided by specifying
the rows and columns of the grid. For example, a grid with three rows
and three columns will generate nine equally-sized squares that can take
nine components.
<layoutmanager type="grid-layout" grid-layout-rows="3" grid-layout-cols="3"/>
Each of these squares can also take a container which can contain more
components arranged using the same or another layout manager. Hence, the
nesting of containers and components to produce a complex layout is possible.
Example 1: Below is an example of ten buttons arranged
using the Grid Layout. The layout is defined to have two (2) rows and
five (5) columns. Each of the objects defined will automatically be displayed
inside a dynamically defined cell. NOTE: The borders are turned on for
illustration purposes only.
Code:
<xpanel>
<layoutmanager type="grid-layout" grid-layout-rows="2" grid-layout-cols="5" border="1"/>
<xbutton style="width:75px; height:75px"><text>1</text></xbutton>
<xbutton style="width:75px; height:75px"><text>2</text></xbutton>
<xbutton style="width:75px; height:75px"><text>3</text></xbutton>
<xbutton style="width:75px; height:75px"><text>4</text></xbutton>
<xbutton style="width:75px; height:75px"><text>5</text></xbutton>
<xbutton style="width:75px; height:75px"><text>6</text></xbutton>
<xbutton style="width:75px; height:75px"><text>7</text></xbutton>
<xbutton style="width:75px; height:75px"><text>8</text></xbutton>
<xbutton style="width:75px; height:75px"><text>9</text></xbutton>
<xbutton style="width:75px; height:75px"><text>10</text></xbutton>
</xpanel>
Example 2: Below are the same buttons displayed using
a 2x4 grid. Notice that "9" and "10" buttons automatically
flowed into the next row. NOTE: The borders are turned on for illustration
purposes only.
Code:
<xpanel>
<layoutmanager type="grid-layout" grid-layout-rows="2" grid-layout-cols="4" border="1"/>
<xbutton style="width:75px; height:75px"><text>1</text></xbutton>
<xbutton style="width:75px; height:75px"><text>2</text></xbutton>
<xbutton style="width:75px; height:75px"><text>3</text></xbutton>
<xbutton style="width:75px; height:75px"><text>4</text></xbutton>
<xbutton style="width:75px; height:75px"><text>5</text></xbutton>
<xbutton style="width:75px; height:75px"><text>6</text></xbutton>
<xbutton style="width:75px; height:75px"><text>7</text></xbutton>
<xbutton style="width:75px; height:75px"><text>8</text></xbutton>
<xbutton style="width:75px; height:75px"><text>9</text></xbutton>
<xbutton style="width:75px; height:75px"><text>10</text></xbutton>
</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:
<xformsetbegin action="#"/>
<xpanel>
<xpanel style="border:3px solid groove;padding:10 10 10 10; background-image:url(../images/bg0002.jpg);">
<layoutmanager type="border-layout"/>
<xpanel border-layout-region="NORTH" style="padding-bottom: 0px;">
<xtextpane style="padding:0 0 5 5;">CASIO</xtextpane>
<xinput type="text" style="height:50px; width:300px;"/>
</xpanel>
<xpanel border-layout-region="CENTER">
<xpanel>
<layoutmanager type="grid-layout" grid-layout-rows="5" grid-layout-cols="4"/>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>C/AC</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>MU</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>%</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>/</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>7</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>8</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>9</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>x</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>4</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>5</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>6</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>-</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>1</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>2</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>3</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>+</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>0</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>.</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);font-weight:bold;"><text>=</text></xbutton>
<xbutton style="width:75px; height:75px; background-image:url(../images/bg0004.jpg);"><xicon src="../../XUI-INF/icons/plasticxp/32x32/reload.gif"/></xbutton>
</xpanel>
<xpanel border-layout-region="SOUTH">
<xtextpane style="padding:5 0 0 0;">Powered by XUI</xtextpane>
</xpanel>
</xpanel>
</xpanel>
</xpanel>
<xformsetend/>
Next: Formatting
Using CSS Positioning
Back to: Application Guide
| 