ZK Component Reference/Layouts/Vbox

Vbox

• Demonstration: Vbox
• Java API: Vbox
• JavaScript API: Box
• Style Guide: 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

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

Align and Pack

<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]

Supported Events

Name	Event Type
None	None

• Inherited Supported Events: Box

Supported Children

*ALL

Use Cases

Version	Description	Example Location

Version History

Version	Date	Content