Vbox"

From Documentation
Line 6: Line 6:
 
*Java API: <javadoc>org.zkoss.zul.Vbox</javadoc>
 
*Java API: <javadoc>org.zkoss.zul.Vbox</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.box.Box</javadoc>
 
*JavaScript API: <javadoc directory="jsdoc">zul.box.Box</javadoc>
*Style Guide: [http://books.zkoss.org/wiki/ZK_Style_Guide/XUL_Component_Specification/Box Vbox]
+
*Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Box| Vbox]]
  
 
= Employment/Purpose =
 
= Employment/Purpose =

Revision as of 08:27, 19 January 2011

Vbox

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 Vlayout and 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>

Properties

  • Inherited Properties: Box

Align and Pack

ZKComRef Vbox Simple Example align pack.PNG

<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>
[Since 5.0.0]

Cell Component

In ZK5, we have introduced a new component named Cell which can be embedded into a Grid or Box (Hbox and Vbox) to fully control the layout and the style. You can now use the rowspan or the colspan property to layout your Grid, for example a content cell can now cross over multiple rows. The code below demonstrates how to do this:

<vbox>
    <cell sclass="years">
        ...
    </cell>
</vbox>
[Since 5.0.0]

Supported Events

Name
Event Type
None None
  • Inherited Supported Events: Box

Supported Children

*ALL

Use Cases

Version Description Example Location
     

Version History

Last Update : 2011/01/19


Version Date Content
     



Last Update : 2011/01/19

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