Layouts and Containers"

From Documentation
m (remove empty version history (via JWB))
 
(76 intermediate revisions by 6 users not shown)
Line 5: Line 5:
 
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.
 
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.
  
−
You could nest one from another to create the UI you want.
+
Users are allowed to nest one from another to create desired UI.
  
 
=Layouts=
 
=Layouts=
−
Here are a brief introductions. For detailed information and a complete list, please refer to [[ZK Component Reference/Layouts|ZK Component Reference: 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|ZK Component Reference: Layouts]].
 
==Hlayout and Vlayout==
 
==Hlayout and Vlayout==
−
[[ZK Component Reference/Layouts/Hlayout|Hlayout]] and [[ZK Component Reference/Layouts/Vlayout|Vlayout]] are a simple and lightweight layout that arranges its children to be displayed horizontally and vertically, respectively. They are made of HTML DIV, so they are also easy to customize.
+
[[ZK Component Reference/Layouts/Hlayout|Hlayout]] and [[ZK Component Reference/Layouts/Vlayout|Vlayout]] are simple and light-weighted layout components that arrange their children to be displayed horizontally and vertically respectively. Also, they are easily customizable as they are made up of HTML DIVs.
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrHlayout.png]]
 
| [[Image:DrHlayout.png]]
Line 33: Line 33:
 
|}
 
|}
 
=== Scrolling ===
 
=== Scrolling ===
−
*You can specify "overflow:auto;" to style for make Hlayout and Vlayout can be scrolled.  
+
*To make Hlayout and Vlayout scrollable, specify "overflow:auto;" to "style" .  
−
*Due to the height of Hlayout and Vlayout is count on children, their height will be increased by their children, you have to specify a fixed height to Hlayout and Vlayout or place them in a fixed height container, EX: "<window height="100px"...".
+
*The height of Hlayout and Vlayout depends 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"...".
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrHlayout_scrolling.png]]
 
| [[Image:DrHlayout_scrolling.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="1">
 
<hlayout width="100px" height="100px" style="border:1px solid black;overflow:auto;">
 
<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:blue;color:white;">1</div>
Line 48: Line 48:
 
| [[Image:DrVlayout_scrolling.png]]
 
| [[Image:DrVlayout_scrolling.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="1">
 
<vlayout width="100px" height="100px" style="border:1px solid black;overflow:auto;">
 
<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:blue;color:white;">1</div>
 
<div width="80px" height="80px" style="background:yellow;">2</div>
 
<div width="80px" height="80px" style="background:yellow;">2</div>
 
</vlayout>
 
</vlayout>
 +
</source>
 +
|}
 +
 +
===Alignment===
 +
Users are allowed to change sclass to control alignment.
 +
{| class='wikitable' | width="100%"
 +
|-
 +
| [[Image:DrHlayout_alignment.png]]
 +
|
 +
<source lang="xml" highlight="2,14">
 +
<zk>
 +
<hlayout sclass="z-valign-top">
 +
<label value="Text:"/>
 +
<textbox/>
 +
<window width="50px" height="50px" title="win" border="normal"/>
 +
</hlayout>
 +
<separator/>
 +
<hlayout>
 +
<label value="Text:"/>
 +
<textbox/>
 +
<window width="50px" height="50px" title="win" border="normal"/>
 +
</hlayout>
 +
<separator/>
 +
<hlayout sclass="z-valign-bottom">
 +
<label value="Text:"/>
 +
<textbox/>
 +
<window width="50px" height="50px" title="win" border="normal"/>
 +
</hlayout>
 +
</zk>
 
</source>
 
</source>
 
|}
 
|}
  
 
==Hbox and Vbox ==
 
==Hbox and Vbox ==
−
Similar to [[ZK Component Reference/Layouts/Hlayout|Hlayout]] and [[ZK Component Reference/Layouts/Vlayout|Vlayout]], [[ZK Component Reference/Layouts/Hbox|Hbox]] and [[ZK Component Reference/Layouts/Vbox|Vbox]] arrange its children to be displayed horizontally and vertically. However, they provide more functionality, such as splitter, align and pack, but the performance is slower.
+
Similar to [[ZK Component Reference/Layouts/Hlayout|Hlayout]] and [[ZK Component Reference/Layouts/Vlayout|Vlayout]], [[ZK Component Reference/Layouts/Hbox|Hbox]] and [[ZK Component Reference/Layouts/Vbox|Vbox]] arrange their children to be displayed horizontally and vertically respectively. [[ZK Component Reference/Layouts/Hbox|Hbox]] and [[ZK Component Reference/Layouts/Vbox|Vbox]] provide more functionalities such as splitter, align and pack. However, their '''performance is slower''', so it is suggested to use [[ZK Component Reference/Layouts/Hlayout|Hlayout]] and [[ZK Component Reference/Layouts/Vlayout|Vlayout]] if you'd like to use them a lot in a UI, unless you need the features that only [[ZK Component Reference/Layouts/Hbox|Hbox]] and [[ZK Component Reference/Layouts/Vbox|Vbox]] support.
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrHbox.png]]
 
| [[Image:DrHbox.png]]
Line 81: Line 110:
 
</source>
 
</source>
 
|}
 
|}
−
=== scrolling ===
+
=== Scrolling ===
−
*Hbox and Vbox is create by table, HTML table cannot appear a scroll bar, you have to place them in a scrolling container.
+
*Hbox and Vbox are created by a table, however, HTML tables are not able to show scroll bars. Hence, to achieve this, users will need to place them in a scrolling container.
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrHlayout_scrolling.png]]
 
| [[Image:DrHlayout_scrolling.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="1">
 
<div width="100px" height="100px" style="border:1px solid black;overflow:auto;">
 
<div width="100px" height="100px" style="border:1px solid black;overflow:auto;">
 
<hbox>
 
<hbox>
Line 98: Line 127:
 
| [[Image:DrVlayout_scrolling.png]]
 
| [[Image:DrVlayout_scrolling.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="1">
 
<div width="100px" height="100px" style="border:1px solid black;overflow:auto;">
 
<div width="100px" height="100px" style="border:1px solid black;overflow:auto;">
 
<vbox>
 
<vbox>
Line 105: Line 134:
 
</vbox>
 
</vbox>
 
</div>
 
</div>
 +
</source>
 +
|}
 +
 +
===Alignment===
 +
*Users are also allowed to specify align and pack to control alignment.
 +
{| class='wikitable' | width="100%"
 +
|-
 +
| [[Image:DrHbox_align.png]]
 +
|
 +
<source lang="xml" highlight="4">
 +
<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>
 +
</source>
 +
|-
 +
| [[Image:DrHbox_pack.png]]
 +
|
 +
<source lang="xml" highlight="4">
 +
<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>
 +
</source>
 +
|-
 +
| [[Image:DrVbox_align.png]]
 +
|
 +
<source lang="xml" highlight="4">
 +
<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>
 +
</source>
 +
|-
 +
| [[Image:DrVbox_pack.png]]
 +
|
 +
<source lang="xml" highlight="4">
 +
<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>
 +
</source>
 +
|}
 +
For more detailed information, please refer to [[ZK Component Reference/Layouts/Hbox|Hbox]] and [[ZK Component Reference/Layouts/Vbox|Vbox]].
 +
*Users are also allowed to use "cell" to control each cell's alignment.
 +
{| class='wikitable' | width="100%"
 +
|-
 +
| [[Image:DrHbox_Cell.png]]
 +
|
 +
<source lang="xml" highlight="6,12">
 +
<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>
 +
</source>
 +
|-
 +
| [[Image:DrVbox_Cell.png]]
 +
|
 +
<source lang="xml" highlight="6,12">
 +
<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>
 
</source>
 
</source>
 
|}
 
|}
  
 
==Borderlayout==
 
==Borderlayout==
−
[[ZK Component Reference/Layouts/Borderlayout|Borderlayout]] places its child components in up to five areas: north, east, south, west and center. All extra space is placed in the center area.
+
[[ZK Component Reference/Layouts/Borderlayout|Borderlayout]] divides its child components into to five areas: North, South, East, West and Center. The heights of North and South are first decided, the remaining space is then given to Center as its height. Note that East and West also take on the height of Center.  
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrBorderlayout.png]]
 
| [[Image:DrBorderlayout.png]]
Line 118: Line 250:
 
<borderlayout width="100px" height="100px">
 
<borderlayout width="100px" height="100px">
 
<north>
 
<north>
−
<div style="background:blue;color:white;">N</div>
+
<div style="background:#008db7;color:white;">N</div>
 
</north>
 
</north>
 
<south>
 
<south>
−
<div style="background:blue;color:white;">S</div>
+
<div style="background:#112f37;color:white;">S</div>
 
</south>
 
</south>
 
<center>
 
<center>
−
<div style="background:red;color:white;">C</div>
+
<div>C</div>
 
</center>
 
</center>
−
<east >
+
<east>
−
<div style="background:yellow;">E</div>
+
<div style="background:#f2f2f2;">E</div>
 
</east>
 
</east>
 
<west>
 
<west>
−
<div style="background:yellow;">W</div>
+
<div style="background:#f2f2f2;">W</div>
 
</west>
 
</west>
 
</borderlayout>
 
</borderlayout>
Line 136: Line 268:
 
|}
 
|}
 
=== flex ===
 
=== flex ===
−
Layout region will share the height of Borderlayout, the sequence is North, South, Center, and the height of East and West is count on Center, in the previous sample, the div in the layout region will not take whole of the layout region's space , you have to specify flex="true" to the layout region, let the child to occupy whole space.
+
Layout region shares the height of Borderlayout with a distributing sequence of: North, South and Center while the heights of East and West take 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. In order for the child to occupy the whole area, please set vflex="1" to the child component.
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrBorderlayout_flex.png]]
 
| [[Image:DrBorderlayout_flex.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="12,15">
 
<borderlayout width="100px" height="100px">
 
<borderlayout width="100px" height="100px">
 
<north>
 
<north>
−
<div style="background:blue;color:white;">N</div>
+
<div style="background:#008db7;color:white;">N</div>
 
</north>
 
</north>
 
<south>
 
<south>
−
<div style="background:blue;color:white;">S</div>
+
<div style="background:#112f37;color:white;">S</div>
 
</south>
 
</south>
−
<center flex="true">
+
<center>
−
<div style="background:red;color:white;">C</div>
+
<div>C</div>
 
</center>
 
</center>
−
<east flex="true">
+
<east>
−
<div style="background:yellow;">E</div>
+
<div vflex="1" style="background:#f2f2f2;">E</div>
 
</east>
 
</east>
−
<west flex="true">
+
<west>
−
<div style="background:yellow;">W</div>
+
<div vflex="1" style="background:#f2f2f2;">W</div>
 
</west>
 
</west>
 
</borderlayout>
 
</borderlayout>
 
</source>
 
</source>
 
|}
 
|}
 +
 
=== Scrolling ===
 
=== Scrolling ===
−
*The height of Center will count on Borderlayout not count on child, so Center's height will not grow by child component, if Center's height is not enough for it's child, Center will cut the content of it's child, you have to specify autoscroll="true" to Center, let Center to handle the scrolling.
+
*The height of Center depends on Borderlayout but 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 its child, Center will cut out the contents of its child, hence, to avoid this, specify autoscroll="true" to Center in order to assign Center to handle the scrolling.
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrBorderlayout_Center_scrolling.png]]
 
| [[Image:DrBorderlayout_Center_scrolling.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="8">
 
<borderlayout width="300px" height="300px">
 
<borderlayout width="300px" height="300px">
 
<north>
 
<north>
−
<div height="100px" style="background:blue;color:white;">N</div>
+
<div height="100px" style="background:#008db7;color:white;">N</div>
 
</north>
 
</north>
 
<south>
 
<south>
−
<div height="100px" style="background:blue;color:white;">S</div>
+
<div height="100px" style="background:#112f37;color:white;">S</div>
 
</south>
 
</south>
 
<center autoscroll="true">
 
<center autoscroll="true">
−
<div height="200px" style="background:red;color:white;">C</div>
+
<div height="200px">C</div>
 
</center>
 
</center>
 
<east flex="true">
 
<east flex="true">
−
<div width="30px" style="background:yellow;">E</div>
+
<div width="30px" style="background:#f2f2f2;">E</div>
 
</east>
 
</east>
 
<west flex="true">
 
<west flex="true">
−
<div width="20px" style="background:yellow;">W</div>
+
<div width="20px" style="background:#f2f2f2;">W</div>
 
</west>
 
</west>
 
</borderlayout>
 
</borderlayout>
 
</source>
 
</source>
 
|}
 
|}
−
===Grow by children ===
+
 
−
*If you want Borderlayout grow by children, you have to use [[ZK_Developer's_Reference/UI_Patterns/Hflex_and_Vflex#Minimum_Flexibility|vflex feature]], specify vflex="min" to each layout region and Borderlayout.
+
===Grown by children ===
−
{| border="1px" | width="100%" | cellspacing="0"
+
*To make Borderlayout dependent on the size of its child components, [[ZK_Developer's_Reference/UI_Patterns/Hflex_and_Vflex#Minimum_Flexibility|vflex feature]] is applied. Specify vflex="min" to each layout region and Borderlayout.
 +
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrBorderlayout_grow.png]]
 
| [[Image:DrBorderlayout_grow.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="1,2,5,8">
−
<borderlayout width="300px" vflex="min">
+
<borderlayout width="300px" vflex="min">
 
<north vflex="min">
 
<north vflex="min">
−
<div height="100px" style="background:blue;color:white;">N</div>
+
<div height="100px" style="background:#008db7;color:white;">N</div>
 
</north>
 
</north>
 
<south vflex="min">
 
<south vflex="min">
−
<div height="100px" style="background:blue;color:white;">S</div>
+
<div height="100px" style="background:#112f37;color:white;">S</div>
 
</south>
 
</south>
 
<center vflex="min">
 
<center vflex="min">
−
<div height="200px" style="background:red;color:white;">C</div>
+
<div height="200px">C</div>
 
</center>
 
</center>
 
<east flex="true">
 
<east flex="true">
−
<div width="30px" style="background:yellow;">E</div>
+
<div width="30px" style="background:#f2f2f2;">E</div>
 
</east>
 
</east>
 
<west flex="true">
 
<west flex="true">
−
<div width="20px" style="background:yellow;">W</div>
+
<div width="20px" style="background:#f2f2f2;">W</div>
 
</west>
 
</west>
 
</borderlayout>
 
</borderlayout>
 
</source>
 
</source>
 
|}
 
|}
 +
 
===  Borderlayout in a container===
 
===  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.
+
*Almost all containers' heights depend on their child components, however, the height of Borderlayout does not expand according to the sizes of its child components, therefore, when placing Borderlayout in a container, users have to specify a fixed height in order for Borderlayout to be visible.
−
<source lang="xml">
+
<source lang="xml" highlight="3">
 
<zk>
 
<zk>
 
<window title="win" border="normal">
 
<window title="win" border="normal">
Line 239: Line 374:
 
</zk>
 
</zk>
 
</source>
 
</source>
−
*The default height of Borderlayout is count on parent component, you can put Borderlayout in a fixed height container.
+
*The default height of Borderlayout is dependent on its parent component, therefore, users can also put Borderlayout in a container with a fixed height.
−
<source lang="xml">
+
<source lang="xml" highlight="2">
 
<zk>
 
<zk>
 
<window title="win" border="normal" height="200px">
 
<window title="win" border="normal" height="200px">
Line 265: Line 400:
  
 
==Columnlayout==
 
==Columnlayout==
−
[[ZK Component Reference/Layouts/Columnlayout|Columnlayout]] places its child components into multiple columns, and each column could have any number of child components placed vertically with different height (but the same width). Unlike [[ZK Component Reference/Layouts/Portallayout|portallayout]], the user ''cannot'' move the child components to different locations (of course, the application can re-arrange the order anytime it likes).
+
[[ZK Component Reference/Layouts/Columnlayout|Columnlayout]] places its child components into multiple columns while each column allows any number of child components placed vertically with different heights (but with the same widths). Unlike [[ZK Component Reference/Layouts/Portallayout|portallayout]], [[ZK Component Reference/Layouts/Columnlayout|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 to re-arrange the order of children components).
  
 
{{ZK PE and EE}}
 
{{ZK PE and EE}}
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrColumnlayout.png]]
 
| [[Image:DrColumnlayout.png]]
Line 293: Line 428:
  
 
==Portallayout==
 
==Portallayout==
−
[[ZK Component Reference/Layouts/Portallayout|Portallayout]] places its child components into multiple columns, and each column could have any number of child components placed vertically with different height (but the same width). The user can move any of them to another location he want like a portal.
+
[[ZK Component Reference/Layouts/Portallayout|Portallayout]] places its child components into multiple columns while each column can allow any number of child components to be 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.  
  
 
{{ZK EE}}
 
{{ZK EE}}
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrPortallayout.png]]
 
| [[Image:DrPortallayout.png]]
Line 324: Line 459:
  
 
==Tablelayout==
 
==Tablelayout==
−
[[ZK Component Reference/Layouts/Tablelayout|Tablelayout]] places its child components in a table. The implementation is based on HTML TABLE tag.
+
[[ZK Component Reference/Layouts/Tablelayout|Tablelayout]] places its child components in a table. Ths implementation is based on an HTML TABLE tag.
  
 
{{ZK EE}}
 
{{ZK EE}}
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrTablelayout.png]]
 
| [[Image:DrTablelayout.png]]
Line 363: Line 498:
  
 
=Containers=
 
=Containers=
−
Here are a brief introductions. For detailed information and a complete list, please refer to [[ZK Component Reference/Containers|ZK Component Reference: Containers]].
+
This section provides a brief introduction for some of the container components in ZK. For detailed information and a complete list of containers, please refer to [[ZK Component Reference/Containers|ZK Component Reference: Containers]].
  
 
==Div and Span==
 
==Div and Span==
−
[[ZK Component Reference/Containers/Div|Div]] and [[ZK Component Reference/Containers/Span|span]] are the most lightweight 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).
+
[[ZK Component Reference/Containers/Div|Div]] and [[ZK Component Reference/Containers/Span|span]] are the most light-weighted containers to group child components. They work the same way as HTML DIV and SPAN tags respectively. Div is a block element that would cause line break for the following sibling i.e. the child and its sibling won't be on the same line (horizontal position). On the other hand, span is an ''inline'' element which would place the child component and its siblings on the same line (horizontal position).
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrDivSpan.png]]
 
| [[Image:DrDivSpan.png]]
Line 385: Line 520:
 
=== Scrolling ===
 
=== Scrolling ===
 
Span:  
 
Span:  
−
*Span is a inline element, it can't be scrolled.
+
*Span is an inline element that is not scrollable.
 
Div:  
 
Div:  
−
*You can specify "overflow:auto;" to style for make Div can be scrolled.
+
*To make Div scrollable, specify "overflow:auto;" to "style".
−
*Due to the height of Div is count on children, it's height will be increased by it's children, you have to specify a fixed height to Div.
+
*The height of Div depends 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.
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrDiv_scrolling.png]]
 
| [[Image:DrDiv_scrolling.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="2">
 
<div height="100px" width="100px"  
 
<div height="100px" width="100px"  
 
style="border:1px solid black;overflow:auto;">
 
style="border:1px solid black;overflow:auto;">
Line 410: Line 545:
  
 
==Window==
 
==Window==
−
[[ZK Component Reference/Containers/Window|Window]] is a container providing caption, border, overlapped, draggable, closable, sizable, and many other features. Window is also a owner of [[ZK Developer's Reference/UI Composing/ID Space|a ID space]], such that the IDs of its child components won't be conflict with others.
+
[[ZK Component Reference/Containers/Window|Window]] is a container providing captioning, bordering, overlapping, draggable, closable, sizable, and many other features. Window is also the owner of [[ZK Developer's Reference/UI Composing/ID Space|an ID space]], such that each child component and its IDs are in one independent window so as to avoid the IDs of child components conflicting with one another.
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrWindow.png]]
 
| [[Image:DrWindow.png]]
Line 425: Line 560:
 
|}
 
|}
 
===Scrolling===
 
===Scrolling===
−
*You can specify "overflow:auto;" to contentStyle for make Window can be scrolled.  
+
*To make Window scrollable, specify "overflow:auto;" from "contentStyle".  
−
*Due to the height of Window is count on children, it's height will be increased by it's children, you have to specify a fixed height to Window.
+
*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.
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrWindow_scrolling.png]]
 
| [[Image:DrWindow_scrolling.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="3">
 
<window title="window" border="normal"  
 
<window title="window" border="normal"  
 
height="150px" width="150px"
 
height="150px" width="150px"
Line 449: Line 584:
  
 
==Panel==
 
==Panel==
−
Like [[ZK Component Reference/Containers/Window|Window]], [[ZK Component Reference/Containers/Panel|panel]] is another powerful container, supporting caption, border, overlapped and many other features. However, it does not implement <javadoc type="interface">org.zkoss.zk.ui.IdSpace</javadoc>, so all of its children belongs to the same ID space of its parent.
+
Like [[ZK Component Reference/Containers/Window|Window]], [[ZK Component Reference/Containers/Panel|panel]] is another powerful container supporting captioning, bordering, overlapping and many other features. However, <javadoc type="interface">org.zkoss.zk.ui.IdSpace</javadoc> is not implemented by this component, therefore, all of its children belong to the same ID space of its parent.
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrPanel.png]]
 
| [[Image:DrPanel.png]]
Line 466: Line 601:
 
|}
 
|}
 
===Scrolling===
 
===Scrolling===
−
*You can specify "overflow:auto;" to style of Panelchildren for make Panel can be scrolled.
+
*To make Panel scrollable, specify "overflow:auto;" to "style" of "panelchildren".
−
*Due to the height of Panel is count on children, it's height will be increased by it's children, you have to specify a fixed height to Panel.  
+
*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.  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrPanel_scrolling.png]]
 
| [[Image:DrPanel_scrolling.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="3">
 
<panel title="panel" border="normal"  
 
<panel title="panel" border="normal"  
 
height="150px" width="150px">
 
height="150px" width="150px">
Line 491: Line 626:
  
 
==Groupbox==
 
==Groupbox==
−
[[ZK Component Reference/Containers/Groupbox|Groupbox]] is a lightweight way to group child components. It supports the [[ZK Component Reference/Containers/Caption|caption]] and border, but it can not be overlapped or sized. It does not implement <javadoc type="interface">org.zkoss.zk.ui.IdSpace</javadoc> either.
+
[[ZK Component Reference/Containers/Groupbox|Groupbox]] is a light-weighted way to group child components together. It supports [[ZK Component Reference/Containers/Caption|"caption"]] and "border", however, it does not support overlapping or resizing. Like Panel, <javadoc type="interface">org.zkoss.zk.ui.IdSpace</javadoc> is not implemented by this component either.
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrGroupbox3d.png]]
 
| [[Image:DrGroupbox3d.png]]
Line 510: Line 645:
 
===Scrolling===
 
===Scrolling===
 
  <font color="red">3d mold only</font>
 
  <font color="red">3d mold only</font>
−
*You can specify "overflow:auto;" to contentStyle for make Groupbox can be scrolled.  
+
*To make Groupbox scrollable, specify "overflow:auto" to "contentStyle".  
−
*Due to the height of Groupbox is count on children, it's height will be increased by it's children, you have to specify a fixed height to Groupbox.  
+
*The height of the Groupbox depends 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.  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrGroupbox3d_scrolling.png]]
 
| [[Image:DrGroupbox3d_scrolling.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="2">
 
<groupbox mold="3d" height="150px" width="150px"
 
<groupbox mold="3d" height="150px" width="150px"
 
contentStyle="overflow:auto;">
 
contentStyle="overflow:auto;">
Line 530: Line 665:
  
 
==Tabbox==
 
==Tabbox==
−
[[ZK Component Reference/Containers/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.
+
[[ZK Component Reference/Containers/Tabbox|Tabbox]] is a container used to display a set of tabbed groups of components. A row of tabs can be displayed at the top (or left) of the tabbox; users can switch between each tab group by a simple click. <javadoc type="interface">org.zkoss.zk.ui.IdSpace</javadoc> is not implemented by this component either.
−
It does not implement <javadoc type="interface">org.zkoss.zk.ui.IdSpace</javadoc> either.
 
  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrTabbox.png]]
 
| [[Image:DrTabbox.png]]
Line 551: Line 685:
 
|}
 
|}
 
===Scrolling===
 
===Scrolling===
−
*You can specify "overflow:auto;" to style of Tabpanel for make Tabpanel can be scrolled.  
+
* To make Tabpanel scrollable, specify "overflow:auto;" to "style".  
−
*Due to the height of Tabpanel is count on children, it's height will be increased by it's children, you have to specify a fixed height to Tabbox.  
+
*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.  
−
{| border="1px" | width="100%" | cellspacing="0"
+
{| class='wikitable' | width="100%"
 
|-
 
|-
 
| [[Image:DrTabbox_scrolling.png]]
 
| [[Image:DrTabbox_scrolling.png]]
 
|
 
|
−
<source lang="xml">
+
<source lang="xml" highlight="6">
 
<tabbox height="100px" width="150px">
 
<tabbox height="100px" width="150px">
 
<tabs>
 
<tabs>
Line 575: Line 709:
 
|}
 
|}
  
−
= Default size of ZK Layouts and Containers =
 
−
 
−
{| border="1px" | cellspacing="0"
 
−
|- style="background-color: #B8CCE4;" align="center"
 
−
! scope="col" style="text-align: center;" width="180px" | Component
 
−
! scope="col" style="text-align: center;" width="160px" | Default Width
 
−
! scope="col"style="text-align: center;"  width="100px" | Default Height
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Div
 
−
| style="text-align: center;" | [[File:upArraw.jpg]] || style="text-align: center;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Groupbox
 
−
| style="text-align: center;background-color: #DBE5F1;" | [[File:upArraw.jpg]] || style="text-align: center;background-color: #DBE5F1;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Window
 
−
| style="text-align: center;" | [[File:upArraw.jpg]] || style="text-align: center;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Panel
 
−
| style="text-align: center;background-color: #DBE5F1;" | [[File:upArraw.jpg]] || style="text-align: center;background-color: #DBE5F1;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Panelchildren
 
−
| style="text-align: center;" | [[File:upArraw.jpg]] || style="text-align: center;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Tabbox
 
−
| style="text-align: center;background-color: #DBE5F1;" | [[File:upArraw.jpg]] || style="text-align: center;background-color: #DBE5F1;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Tabpanel
 
−
| style="text-align: center;" | [[File:upArraw.jpg]] || style="text-align: center;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Hbox
 
−
| style="text-align: center;background-color: #DBE5F1;" | [[File: downArraw.jpg]] || style="text-align: center;background-color: #DBE5F1;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Vbox
 
−
| style="text-align: center;" | [[File: downArraw.jpg]] || style="text-align: center;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Hlayout
 
−
| style="text-align: center;background-color: #DBE5F1;" | [[File:upArraw.jpg]] || style="text-align: center;background-color: #DBE5F1;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Vlayout
 
−
| style="text-align: center;" | [[File:upArraw.jpg]] || style="text-align: center;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Borderlayout
 
−
| style="text-align: center;background-color: #DBE5F1;" | [[File:upArraw.jpg]] || style="text-align: center;background-color: #DBE5F1;" | [[File: upArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Center,North,South
 
−
| style="text-align: center;" | [[File:upArraw.jpg]] || style="text-align: center;;" | [[File: upArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | East,West
 
−
| style="text-align: center;background-color: #DBE5F1;" | [[File: downArraw.jpg]] || style="text-align: center;background-color: #DBE5F1;" | [[File: upArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Columnlayout
 
−
| style="text-align: center;" | [[File:upArraw.jpg]] || style="text-align: center;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Columnchildren
 
−
| style="text-align: center;background-color: #DBE5F1;" | [[File: downArraw.jpg]] ( has minimal width ) || style="text-align: center;background-color: #DBE5F1;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Portallayout
 
−
| style="text-align: center;" | [[File:upArraw.jpg]] || style="text-align: center;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Portalchildren
 
−
| style="text-align: center;background-color: #DBE5F1;" | [[File: downArraw.jpg]] ( has minimal width )  || style="text-align: center;background-color: #DBE5F1;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Tablelayout
 
−
| style="text-align: center;" | [[File: downArraw.jpg]] ( has minimal width )  || style="text-align: center;" | [[File:downArraw.jpg]]
 
−
|- 
 
−
! scope="row" style="text-align: center;background-color: #B8CCE4;" | Tablechildren
 
−
| style="text-align: center;background-color: #DBE5F1;" | [[File: downArraw.jpg]] ( has minimal width )  || style="text-align: center;background-color: #DBE5F1;" | [[File:downArraw.jpg]]
 
−
 
−
|}
 
−
[[File:upArraw.jpg]]: Count on parent
 
−
 
−
[[File:downArraw.jpg]]: Count on children
 
  
−
=Version History=
 
−
{{LastUpdated}}
 
−
{| border='1px' | width="100%"
 
−
! Version !! Date !! Content
 
−
|-
 
−
| &nbsp;
 
−
| &nbsp;
 
−
| &nbsp;
 
−
|}
 
  
 
{{ZKDevelopersReferencePageFooter}}
 
{{ZKDevelopersReferencePageFooter}}

Latest revision as of 05:54, 6 February 2024


DocumentationZK Developer's ReferenceUI PatternsLayouts and Containers
Layouts and Containers


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 arrange their children to be displayed horizontally and vertically respectively. Also, they are easily customizable as they are made up of HTML DIVs.

DrHlayout.png 
<hlayout>
  <div width="100px" height="50px" style="background:blue">1</div>
  <div width="80px" height="70px" style="background:yellow">2</div>
</hlayout>
DrVlayout.png 
<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 depends 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"...".
DrHlayout scrolling.png 
<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>
DrVlayout scrolling.png 
<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>

Alignment

Users are allowed to change sclass to control alignment.

DrHlayout alignment.png 
<zk>
	<hlayout sclass="z-valign-top">
		<label value="Text:"/>
		<textbox/>
		<window width="50px" height="50px" title="win" border="normal"/>
	</hlayout>
	<separator/>
	<hlayout>
		<label value="Text:"/>
		<textbox/>
		<window width="50px" height="50px" title="win" border="normal"/>
	</hlayout>
	<separator/>
	<hlayout sclass="z-valign-bottom">
		<label value="Text:"/>
		<textbox/>
		<window width="50px" height="50px" title="win" border="normal"/>
	</hlayout>
</zk>

Hbox and Vbox

Similar to Hlayout and Vlayout, Hbox and Vbox arrange their children to be displayed horizontally and vertically respectively. Hbox and Vbox provide more functionalities such as splitter, align and pack. However, their performance is slower, so it is suggested to use Hlayout and Vlayout if you'd like to use them a lot in a UI, unless you need the features that only Hbox and Vbox support.

DrHbox.png 
<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>
DrVbox.png 
<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, to achieve this, users will need to place them in a scrolling container.
DrHlayout scrolling.png 
<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>
DrVlayout scrolling.png 
<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.
DrHbox align.png 
<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>
DrHbox pack.png 
<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>
DrVbox align.png 
<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>
DrVbox pack.png 
<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.
DrHbox Cell.png 
<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>
DrVbox Cell.png 
<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 first decided, the remaining space is then given to Center as its height. Note that East and West also take on the height of Center.

DrBorderlayout.png 
<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 Borderlayout with a distributing sequence of: North, South and Center while the heights of East and West take 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. In order for the child to occupy the whole area, please set vflex="1" to the child component.

DrBorderlayout flex.png 
<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 vflex="1" style="background:#f2f2f2;">E</div>
	</east>
	<west>
		<div vflex="1" style="background:#f2f2f2;">W</div>
	</west>
</borderlayout>

Scrolling

  • The height of Center depends on Borderlayout but 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 its child, Center will cut out the contents of its child, hence, to avoid this, specify autoscroll="true" to Center in order to assign Center to handle the scrolling.
DrBorderlayout Center scrolling.png 
<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>

Grown by children

  • To make Borderlayout dependent on the size of its child components, vflex feature is applied. Specify vflex="min" to each layout region and Borderlayout.
DrBorderlayout grow.png 
<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 all containers' heights depend on their child components, however, the height of Borderlayout does not expand according to the sizes of its child components, therefore, when placing Borderlayout in a container, users have to specify a fixed height in order for Borderlayout to be visible.
<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 dependent on its parent component, therefore, users can also put Borderlayout in a container with a fixed height.
<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 number 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 to re-arrange the order of children components).

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion pe-ee.png
DrColumnlayout.png 
<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 can allow any number of child components to be 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.

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png
DrPortallayout.png 
<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 an HTML TABLE tag.

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png
DrTablelayout.png 
<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 a brief introduction for some of the container components in ZK. For detailed information and a 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 work the same way as HTML DIV and SPAN tags respectively. Div is a block element that would cause line break for the following sibling i.e. the child and its sibling won't be on the same line (horizontal position). On the other hand, span is an inline element which would place the child component and its siblings on the same line (horizontal position).

DrDivSpan.png 
<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 depends 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.
DrDiv scrolling.png 
<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 child components conflicting with one another.

DrWindow.png 
<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;" from "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.
DrWindow scrolling.png 
<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, IdSpace is not implemented by this component, therefore, all of its children belong to the same ID space of its parent.

DrPanel.png 
<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.
DrPanel scrolling.png 
<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. Like Panel, IdSpace is not implemented by this component either.

DrGroupbox3d.png 
<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 depends 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.
DrGroupbox3d scrolling.png 
<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 can be displayed at the top (or left) of the tabbox; users can switch between each tab group by a simple click. IdSpace is not implemented by this component either.

DrTabbox.png 
<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.
DrTabbox scrolling.png 
<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>




Last Update : 2024/02/06

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.


Retrieved from "https://www.zkoss.org/_w/index.php?title=ZK_Developer%27s_Reference/UI_Patterns/Layouts_and_Containers&oldid=56858"