Using ZK Borderlayout"
m |
m |
||
Line 62: | Line 62: | ||
===Implementing the Views=== | ===Implementing the Views=== | ||
+ | <source lang="xml"> | ||
+ | <window title="You are using ZK: ${desktop.webApp.version}" border="normal" width="100%" height="900px"> | ||
+ | |||
+ | <borderlayout> | ||
+ | |||
+ | <center border="0"> | ||
+ | <div id="PrdoDiv" style="background:#D9E5EF; height:100%" apply="demo.web.ui.ctrl.ProductViewCtrl"> | ||
+ | <grid id="prodGrid"> | ||
+ | <columns sizable="true"> | ||
+ | <column image="/image/Bullet-10x10.png" align="center" width="100px"/> | ||
+ | <column label="Name" width="100px"/> | ||
+ | <column label="Price" width="50px"/> | ||
+ | <column label="Quantity" width="50px"/> | ||
+ | <column label="Arrive Date" width="110px" /> | ||
+ | <column label="operation" /> | ||
+ | </columns> | ||
+ | </grid> | ||
+ | </div> | ||
+ | </center> | ||
+ | |||
+ | <east title="Shopping Cart" size="30%" flex="true" splittable="true" collapsible="true"> | ||
+ | <div style="background:#D9E5EF; height:100%" apply="demo.web.ui.ctrl.ShoppingCartViewCtrl"> | ||
+ | |||
+ | <listbox id="shoppingCartListbox"> | ||
+ | <listhead sizable="true"> | ||
+ | <listheader label="Name" /> | ||
+ | <listheader label="Price" /> | ||
+ | <listheader label="Amount" /> | ||
+ | <listheader label="subTotal"/> | ||
+ | <listheader align="center"/> | ||
+ | </listhead> | ||
+ | <listfoot> | ||
+ | <listfooter span="2" id="subtotalFooter"></listfooter> | ||
+ | <listfooter><button id="submitOrderBtn" label="submit"/></listfooter> | ||
+ | <listfooter><button id="clearBtn" label="clear"/></listfooter> | ||
+ | </listfoot> | ||
+ | </listbox> | ||
+ | <textbox id="descTxb" rows="10" width="200px" value="Note for this order." /> | ||
+ | <image id="cartItemImage" /> | ||
+ | </div> | ||
+ | </east> | ||
+ | |||
+ | <south size="250px" flex="true" border="0" | ||
+ | splittable="true" collapsible="true" style="overflow:scroll"> | ||
+ | <div style="background:#D9E5EF; height:100%" apply="demo.web.ui.ctrl.OrderViewCtrl" > | ||
+ | <grid id="orderGrid" > | ||
+ | <columns sizable="true"> | ||
+ | <column label="" width="17px"/> | ||
+ | <column label="info" width="200px"/> | ||
+ | <column label="description" width="50%"/> | ||
+ | <column label="Sub Total" /> | ||
+ | <column label="operation" /> | ||
+ | </columns> | ||
+ | </grid> | ||
+ | |||
+ | <button id="myBtn" label="Click me!"/> | ||
+ | </div> | ||
+ | </south> | ||
+ | |||
+ | </borderlayout> | ||
+ | |||
+ | </window> | ||
+ | </source> | ||
{{ZKEssentialsPageFooter}} | {{ZKEssentialsPageFooter}} |
Revision as of 03:30, 21 October 2010
This article is out of date, please refer to http://books.zkoss.org/zkessentials-book/master/ for more up to date information.
Using ZK Border Layout
Suppose in our shopping cart application, we have the following requirements:
- Product View - A table displaying the available products to purchase
- Shopping Cart View - A list of items placed in the shopping cart
- Order View - A record of all the orders placed
The borderlayout divides a page into five sections: North, East, Center, West, South.
Border Layout Attributes
The attributes involved in the configuration of border layout is listed in the table below:
Attributes | Sample | Description |
---|---|---|
size | <north size="20%">...</north> <south size="180px">...</south> | set size in pixels or a percentage relative to its parent component |
border | <east border="normal">...</east> | show/hide border; "normal" shows border, while "none" hides border |
collapsible | <west collapsible="true">...</west> | allow the whole division to show/hide |
maxsize/minsize | <south splitter="true" maxsize="500px" minisize="200px">...</south> | set the maximum and minimum allowable size for a component; |
splittable | <north splittable="true">...</north> | allow the contents area size to be adjustable |
Borderlayout Configuration Notes
Some rules to oblige to when working with the border layout:
- The center component does not take size attributes; its height is dependent on the north and south components, while its width is dependent on the east and west components
- Each children component of borderlayout, ie. north, east, center, west, and south, are allowed only one child component; therefore, wrap multiple components in container components such as Div or Window when placing them in borderlayout's children components.
- The borderlayout component itself (not its children: north, west, etc..) do not have the "border" attribute
Why Use Borderlayout
Border Layout stands out as the obvious choice because it supports:
- splittable, so we could adjust the dimensions of the views by dragging the splitters.
- collapsible, so views could be collapsed to make room for other views.
Using the Borderlayout, we could outline the shopping cart application like the following:
The borders can be made adjustable (splittable="true"), and the east and south components can be collapsed to give room to the center component displaying the Product View.
Implementing the Views
<window title="You are using ZK: ${desktop.webApp.version}" border="normal" width="100%" height="900px">
<borderlayout>
<center border="0">
<div id="PrdoDiv" style="background:#D9E5EF; height:100%" apply="demo.web.ui.ctrl.ProductViewCtrl">
<grid id="prodGrid">
<columns sizable="true">
<column image="/image/Bullet-10x10.png" align="center" width="100px"/>
<column label="Name" width="100px"/>
<column label="Price" width="50px"/>
<column label="Quantity" width="50px"/>
<column label="Arrive Date" width="110px" />
<column label="operation" />
</columns>
</grid>
</div>
</center>
<east title="Shopping Cart" size="30%" flex="true" splittable="true" collapsible="true">
<div style="background:#D9E5EF; height:100%" apply="demo.web.ui.ctrl.ShoppingCartViewCtrl">
<listbox id="shoppingCartListbox">
<listhead sizable="true">
<listheader label="Name" />
<listheader label="Price" />
<listheader label="Amount" />
<listheader label="subTotal"/>
<listheader align="center"/>
</listhead>
<listfoot>
<listfooter span="2" id="subtotalFooter"></listfooter>
<listfooter><button id="submitOrderBtn" label="submit"/></listfooter>
<listfooter><button id="clearBtn" label="clear"/></listfooter>
</listfoot>
</listbox>
<textbox id="descTxb" rows="10" width="200px" value="Note for this order." />
<image id="cartItemImage" />
</div>
</east>
<south size="250px" flex="true" border="0"
splittable="true" collapsible="true" style="overflow:scroll">
<div style="background:#D9E5EF; height:100%" apply="demo.web.ui.ctrl.OrderViewCtrl" >
<grid id="orderGrid" >
<columns sizable="true">
<column label="" width="17px"/>
<column label="info" width="200px"/>
<column label="description" width="50%"/>
<column label="Sub Total" />
<column label="operation" />
</columns>
</grid>
<button id="myBtn" label="Click me!"/>
</div>
</south>
</borderlayout>
</window>