Vbox"

From Documentation
Line 29: Line 29:
 
</zk>
 
</zk>
 
</source>
 
</source>
 +
 +
[[Image:ZKComRef_Vbox_Simple_Example_align_pack.PNG]]
 +
 +
<source lang="xml" >
 +
<zk xmlns:n="http://www.zkoss.org/2005/zk/native">
 +
<zscript><![CDATA[
 +
Map map = new LinkedHashMap();
 +
String[] packs = new String[]{"", "start", "center", "end"};
 +
String[] aligns = new String[]{"", "stretch", "start", "center", "end"};
 +
 +
for (int i = 0; i < aligns.length; i++) {
 +
String align = aligns[i];
 +
List list = new ArrayList();
 +
for (int j = 0; j < packs.length; j++) {
 +
list.add(packs[j]);
 +
}
 +
map.put(align, list);
 +
}
 +
 +
]]></zscript>
 +
<tablelayout columns="6">
 +
<tablechildren >
 +
<panel border="normal" height="150px" width="100px"
 +
forEach='"pack / align", "", "start", "center", "end"'>
 +
<panelchildren>
 +
<n:h3>${each}</n:h3>
 +
</panelchildren>
 +
</panel>
 +
</tablechildren>
 +
<tablechildren forEach="${map}">
 +
<variables key="${each.key}"/>
 +
<panel border="normal" height="150px" width="100px">
 +
<panelchildren>
 +
<n:h3>${key}</n:h3>
 +
</panelchildren>
 +
</panel>
 +
<panel border="normal" height="150px" width="100px" forEach="${each.value}" >
 +
<panelchildren>
 +
<vbox align="${key}" pack="${each}" height="90%" width="100%">
 +
<button label="1" />
 +
<button label="2" />
 +
<button label="3" />
 +
</vbox>
 +
</panelchildren>
 +
</panel>
 +
</tablechildren>
 +
</tablelayout>
 +
</zk>
  
 
=Supported events=
 
=Supported events=

Revision as of 09:38, 14 October 2010

Vbox

  • Demonstration: N/A
  • Java API: Vbox
  • JavaScript API: Box

Employment/Purpose

The vbox component is used to create a vertically oriented box. Added components will be placed underneath each other in a column.

Notice that hbox and vbox are designed to provode more sophisticated layout, such as splitter, alignment and packing. If you need only the layout feature, it is suggest to use ZK Component Reference/Layouts/Hlayout and ZK Component Reference/Layouts/Vlayout instead, since the performance is much better (due to the use of HTML DIV instead of TABLE).

Example

ZKComRef Vbox Simple Example.PNG

<zk>
     <vbox>
         <button label="Button 1"/>
         <button label="Button 2"/>
     </vbox>
     <hbox>
         <button label="Button 3"/>
         <button label="Button 4"/>
     </hbox>
</zk>

ZKComRef Vbox Simple Example align pack.PNG

<source lang="xml" > <zk xmlns:n="http://www.zkoss.org/2005/zk/native"> <zscript><![CDATA[ Map map = new LinkedHashMap(); String[] packs = new String[]{"", "start", "center", "end"}; String[] aligns = new String[]{"", "stretch", "start", "center", "end"};

for (int i = 0; i < aligns.length; i++) { String align = aligns[i]; List list = new ArrayList(); for (int j = 0; j < packs.length; j++) { list.add(packs[j]); } map.put(align, list); }

]]></zscript> <tablelayout columns="6"> <tablechildren > <panel border="normal" height="150px" width="100px" forEach='"pack / align", "", "start", "center", "end"'> <panelchildren> <n:h3>${each}</n:h3> </panelchildren> </panel> </tablechildren> <tablechildren forEach="${map}"> <variables key="${each.key}"/> <panel border="normal" height="150px" width="100px"> <panelchildren> <n:h3>${key}</n:h3> </panelchildren> </panel> <panel border="normal" height="150px" width="100px" forEach="${each.value}" > <panelchildren> <vbox align="${key}" pack="${each}" height="90%" width="100%"> <button label="1" /> <button label="2" /> <button label="3" /> </vbox> </panelchildren> </panel> </tablechildren> </tablelayout> </zk>

Supported events

Name
Event Type
None None

Supported Children

*ALL

Use cases

Version Description Example Location
     

Version History

Version Date Content
     



Last Update : 2010/10/14

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