Layouts are components used to partition the display area it owns into several sub-areas for its child components, while containers group its child components into the display area it owns.
Users are allowed to nest one from another to create desired UI.
Layouts
This section provides brief introductions for some of the layout components in ZK. For detailed information and the complete list of layouts, please refer to ZK Component Reference: Layouts.
Hlayout and Vlayout
Hlayout and Vlayout are simple and light-weighted layout components that arranges its children to be displayed horizontally and vertically respectively. Also, they are easily customizable as they are made up of HTML DIVs.
|
<hlayout>
<div width="100px" height="50px" style="background:blue">1</div>
<div width="80px" height="70px" style="background:yellow">2</div>
</hlayout>
|
|
<vlayout>
<div width="100px" height="50px" style="background:blue">1</div>
<div width="80px" height="70px" style="background:yellow">2</div>
</vlayout>
|
Scrolling
- To make Hlayout and Vlayout scrollable, specify "overflow:auto;" to "style" .
- The height of Hlayout and Vlayout are dependent on the size of their children, therefore, in order to keep the height of Hlayout and Vlayout constant for the scroll bar to appear, specify a fixed height to Hlayout and Vlayout or place them into a fixed height container, EX: "<window height="100px"...".
|
<hlayout width="100px" height="100px" style="border:1px solid black;overflow:auto;">
<div width="40px" height="150px" style="background:blue;color:white;">1</div>
<div width="40px" height="150px" style="background:yellow;">2</div>
</hlayout>
|
|
<vlayout width="100px" height="100px" style="border:1px solid black;overflow:auto;">
<div width="80px" height="80px" style="background:blue;color:white;">1</div>
<div width="80px" height="80px" style="background:yellow;">2</div>
</vlayout>
|
Hbox and Vbox
Similar to Hlayout and Vlayout, Hbox and Vbox arranges its children to be displayed horizontally and vertically. However, they do provide more functionalities such as splitter, align and pack, but performance is slower.
|
<hbox>
<div width="100px" height="50px" style="background:blue">1</div>
<splitter collapse="before"/>
<div width="80px" height="70px" style="background:yellow">2</div>
</hbox>
|
|
<vbox>
<div width="100px" height="50px" style="background:blue">1</div>
<splitter collapse="after"/>
<div width="80px" height="70px" style="background:yellow">2</div>
</vbox>
|
Scrolling
- Hbox and Vbox are created by a table, however, HTML tables are not able to show scroll bars, hence, users need to place them in a scrolling container to achieve this.
|
|
<div width="100px" height="100px" style="border:1px solid black;overflow:auto;">
<hbox>
<div width="40px" height="150px" style="background:blue;color:white;">1</div>
<div width="40px" height="150px" style="background:yellow;">2</div>
</hbox>
</div>
|
|
|
<div width="100px" height="100px" style="border:1px solid black;overflow:auto;">
<vbox>
<div width="80px" height="80px" style="background:blue;color:white;">1</div>
<div width="80px" height="80px" style="background:yellow;">2</div>
</vbox>
</div>
|
Alignment
- Users are also allowed to specify align and pack to control alignment.
|
<window title="Hbox" border="normal" width="150px" height="100px">
<caption label="align: center" />
<hbox width="100%" height="100%" style="border:1px solid black;"
align="center">
<button label="1" />
<button label="2" />
</hbox>
</window>
|
|
<window title="Hbox" border="normal" width="150px" height="100px">
<caption label="pack: center" />
<hbox width="100%" height="100%" style="border:1px solid black;"
pack="center">
<button label="1" />
<button label="2" />
</hbox>
</window>
|
|
<window title="Vbox" border="normal" width="150px" height="150px">
<caption label="align: center" />
<vbox width="100%" height="100%" style="border:1px solid black;"
align="center">
<button label="1" />
<button label="2" />
</vbox>
</window>
|
|
<window title="Vbox" border="normal" width="150px" height="150px">
<caption label="pack: center" />
<vbox width="100%" height="100%" style="border:1px solid black;"
pack="center">
<button label="1" />
<button label="2" />
</vbox>
</window>
|
For more detailed information, please refer to Hbox and Vbox.
- Users are also allowed to use "cell" to control each cell's alignment.
|
<hbox width="500px">
<cell style="border:1px solid black;">
<button label="Help"/>
</cell>
<cell style="border:1px solid black;"
hflex="6" align="center">
<button label="Add"/>
<button label="Reomve"/>
<button label="Update"/>
</cell>
<cell style="border:1px solid black;"
hflex="4" align="right">
<button label="OK"/>
<button label="Cancel"/>
</cell>
</hbox>
|
|
<vbox width="300px" align="stretch">
<cell style="border:1px solid black;">
<button label="Help"/>
</cell>
<cell style="border:1px solid black;"
align="center">
<button label="Add"/>
<button label="Reomve"/>
<button label="Update"/>
</cell>
<cell style="border:1px solid black;"
align="right">
<button label="OK"/>
<button label="Cancel"/>
</cell>
</vbox>
|
Borderlayout
Borderlayout divides its child components into to five areas: North, South, East, West and Center. The heights of North and South are firstly decided and the remainder space is then given to Center as its height. Note that East and West also takes on the height of Center.
|
<borderlayout width="100px" height="100px">
<north>
<div style="background:#008db7;color:white;">N</div>
</north>
<south>
<div style="background:#112f37;color:white;">S</div>
</south>
<center>
<div>C</div>
</center>
<east>
<div style="background:#f2f2f2;">E</div>
</east>
<west>
<div style="background:#f2f2f2;">W</div>
</west>
</borderlayout>
|
flex
Layout region shares the height of Borderlayou with a distributing sequence of: North, South and Center while the heights of East and West takes on the height of Center. In the previous sample, the div in the layout region does not take up all of layout region's space, hence, in order for the child to occupy the whole area, specify flex="true" in the layout region.
|
<borderlayout width="100px" height="100px">
<north>
<div style="background:#008db7;color:white;">N</div>
</north>
<south>
<div style="background:#112f37;color:white;">S</div>
</south>
<center>
<div>C</div>
</center>
<east flex="true">
<div style="background:#f2f2f2;">E</div>
</east>
<west flex="true">
<div style="background:#f2f2f2;">W</div>
</west>
</borderlayout>
|
Scrolling
- The height of Center is dependent on Borderlayout not on its child, therefore, the height of Center will not be expanded by the growing size of its child components. if Center's height is too short for it's child, Center will cut out the contents of it's child, hence, to avoid this, specify autoscroll="true" to Center in order to assign Center to handle the scrolling.
|
<borderlayout width="300px" height="300px">
<north>
<div height="100px" style="background:#008db7;color:white;">N</div>
</north>
<south>
<div height="100px" style="background:#112f37;color:white;">S</div>
</south>
<center autoscroll="true">
<div height="200px">C</div>
</center>
<east flex="true">
<div width="30px" style="background:#f2f2f2;">E</div>
</east>
<west flex="true">
<div width="20px" style="background:#f2f2f2;">W</div>
</west>
</borderlayout>
|
Grow by children
- If you want Borderlayout grow by children, you have to use vflex feature, specify vflex="min" to each layout region and Borderlayout.
|
<borderlayout width="300px" vflex="min">
<north vflex="min">
<div height="100px" style="background:#008db7;color:white;">N</div>
</north>
<south vflex="min">
<div height="100px" style="background:#112f37;color:white;">S</div>
</south>
<center vflex="min">
<div height="200px">C</div>
</center>
<east flex="true">
<div width="30px" style="background:#f2f2f2;">E</div>
</east>
<west flex="true">
<div width="20px" style="background:#f2f2f2;">W</div>
</west>
</borderlayout>
|
Borderlayout in a container
- Almost of container's height is count on children, place Borderlayout in a container, you have to specify a height to Borderlayout.
<zk>
<window title="win" border="normal">
<borderlayout height="200px">
<north>
<div style="background:blue">N</div>
</north>
<south>
<div style="background:blue">S</div>
</south>
<center>
<div>C</div>
</center>
<east>
<div style="background:yellow">E</div>
</east>
<west>
<div style="background:yellow">W</div>
</west>
</borderlayout>
</window>
</zk>
- The default height of Borderlayout is count on parent component, you can put Borderlayout in a fixed height container.
<zk>
<window title="win" border="normal" height="200px">
<borderlayout>
<north>
<div style="background:blue">N</div>
</north>
<south>
<div style="background:blue">S</div>
</south>
<center>
<div>C</div>
</center>
<east>
<div style="background:yellow">E</div>
</east>
<west>
<div style="background:yellow">W</div>
</west>
</borderlayout>
</window>
</zk>
Columnlayout
Columnlayout places its child components into multiple columns while each column allows any numbers of child components placed vertically with different heights (but with the same widths). Unlike portallayout, Columnlayout does not allow end users the ability to move child components to different locations at will (although of course, developers are allowed to use the ZK application itself to re-arrange the order of children components).
|
<columnlayout>
<columnchildren width="30%" style="padding: 5px 1px">
<panel height="60px" title="1" border="normal" maximizable="true">
<panelchildren>1</panelchildren>
</panel>
<panel height="80px" title="2" border="normal" closable="true">
<panelchildren>2</panelchildren>
</panel>
</columnchildren>
<columnchildren width="70%" style="padding: 5px 1px">
<panel height="100px" title="3" border="normal" collapsible="true">
<panelchildren>3</panelchildren>
</panel>
</columnchildren>
</columnlayout>
|
Portallayout
Portallayout places its child components into multiple columns while each column allows any numbers of child components placed vertically with different heights (but with the same widths). Users are also allowed to move any of them to any area desired like that of a portal.
|
<portallayout>
<portalchildren width="40%" style="padding: 5px 1px">
<panel height="60px" title="1" border="normal" maximizable="true">
<panelchildren>1</panelchildren>
</panel>
<panel height="90px" title="2" border="normal" closable="true">
<panelchildren>2</panelchildren>
</panel>
</portalchildren>
<portalchildren width="60%" style="padding: 5px 1px">
<panel height="100px" title="3" border="normal" collapsible="true">
<panelchildren>3</panelchildren>
</panel>
<panel height="55px" title="4" border="normal" closable="true">
<panelchildren>4</panelchildren>
</panel>
</portalchildren>
</portallayout>
|
Tablelayout
Tablelayout places its child components in a table. Ths implementation is based on a HTML TABLE tag.
|
<tablelayout columns="2">
<tablechildren>
<panel title="1" border="normal"
collapsible="true" width="80px" height="60px">
<panelchildren>1</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel title="2" border="normal"
collapsible="true" width="80px" height="60px">
<panelchildren>2</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel title="3" border="normal"
collapsible="true" width="80px" height="60px">
<panelchildren>3</panelchildren>
</panel>
</tablechildren>
<tablechildren>
<panel title="4" border="normal"
collapsible="true" width="80px" height="60px">
<panelchildren>4</panelchildren>
</panel>
</tablechildren>
</tablelayout>
|
Containers
This section provides brief introductions for some of the container components in ZK. For detailed information and the complete list of containers, please refer to ZK Component Reference: Containers.
Div and Span
Div and span are the most light-weighted containers to group child components. They are the same as HTML DIV and SPAN tags respectively. Div is displayed as block that the following sibling won't be displayed in the same vertical position; as if there is a line break before and after it. On the other hand, span is displayed inline with siblings (as if no line break in between).
|
<div style="border: 1px solid blue" width="150px">
this is
<span>inlined with <button label="Hi"/></span>
</div>
<div style="border: 1px solid grey">
<div>div is a block</div>
<datebox/>
</div>
|
Scrolling
Span:
- Span is an inline element that is not scrollable.
Div:
- To make Div scrollable, specify "overflow:auto;" to "style".
- The height of Div is dependent on the size of its children, therefore, in order to keep the height of Div constant for the scroll bar to appear, specify a fixed height to Div.
|
<div height="100px" width="100px"
style="border:1px solid black;overflow:auto;">
<grid>
<rows>
<row>item</row>
<row>item</row>
<row>item</row>
<row>item</row>
<row>item</row>
</rows>
</grid>
</div>
|
Window
Window is a container providing captioning, bordering, overlapping, draggable, closable, sizable, and many other features. Window is also the owner of an ID space, such that each child component and its IDs are in one independent window so as to avoid the IDs of each child components conflicting with one another.
|
<window title="A" closable="true" sizable="true"
border="normal" mode="overlapped">
<div style="background: yellow">1</div>
<combobox/>
</window>
|
Scrolling
- To make Window scrollable, specify "overflow:auto;" into "contentStyle".
- The height of Window is dependent on the size of its children, therefore, in order to keep the height of Window constant for the scroll bar to appear, specify a fixed height to Window.
|
<window title="window" border="normal"
height="150px" width="150px"
contentStyle="overflow:auto;">
<grid>
<rows>
<row>item</row>
<row>item</row>
<row>item</row>
<row>item</row>
<row>item</row>
</rows>
</grid>
</window>
|
Panel
Like Window, panel is another powerful container supporting captioning, bordering, overlapping and many other features. However, it does not implement IdSpace, so all of its children belongs to the same ID space of its parent.
|
<panel title="A" framable="true" border="normal"
maximizable="true" collapsible="true">
<panelchildren>
<div style="background: yellow">1</div>
<combobox/>
</panelchildren>
</panel>
|
Scrolling
- To make Panel scrollable, specify "overflow:auto;" to "style" of "panelchildren".
- The height of Panel is dependent on the size of its children, therefore, in order to keep the height of the Panel constant for the scroll bar to appear, specify a fixed height to Panel.
|
<panel title="panel" border="normal"
height="150px" width="150px">
<panelchildren style="overflow:auto;">
<grid>
<rows>
<row>item</row>
<row>item</row>
<row>item</row>
<row>item</row>
<row>item</row>
</rows>
</grid>
</panelchildren>
</panel>
|
Groupbox
Groupbox is a light-weighted way to group child components together. It supports "caption" and "border", however, it does not support overlapping or resizing. It does not implement IdSpace either.
|
<groupbox mold="3d">
<caption label="Fruits"/>
<radiogroup>
<radio label="Apple"/>
<radio label="Orange"/>
<radio label="Banana"/>
</radiogroup>
</groupbox>
|
Scrolling
3d mold only
- To make Groupbox scrollable, specify "overflow:auto;" to "contentStyle".
- The height of the Groupbox is dependent on the size of its children, therefore, in order to keep the height of the Groupbox constant for the scroll bar to appear, specify a fixed height to Groupbox.
|
<groupbox mold="3d" height="150px" width="150px"
contentStyle="overflow:auto;">
<caption label="3d groupbox" />
<grid>
<rows>
<row forEach="1,2,3,4,5,6">item</row>
</rows>
</grid>
</groupbox>
|
Tabbox
Tabbox is a container used to display a set of tabbed groups of components. A row of tabs is displayed at the top (or left or other location) of tabbox which may be used to switch between each group.
It does not implement IdSpace either.
|
<tabbox height="80px">
<tabs>
<tab label="Tab 1"/>
<tab label="Tab 2"/>
</tabs>
<tabpanels>
<tabpanel>This is panel 1</tabpanel>
<tabpanel>This is panel 2</tabpanel>
</tabpanels>
</tabbox>
|
Scrolling
- To make Tabpanel scrollable, specify "overflow:auto;" to "style".
- The height of Tabpanel is dependent on the size of its children, therefore, in order to keep the height of the Tabpanel constant for the scroll bar to appear, specify a fixed height to Tabbox.
|
<tabbox height="100px" width="150px">
<tabs>
<tab label="tab" />
</tabs>
<tabpanels>
<tabpanel style="overflow:auto;">
<grid>
<rows>
<row forEach="1,2,3,4,5,6">item</row>
</rows>
</grid>
</tabpanel>
</tabpanels>
</tabbox>
|
Version History
