This demo shows several layout components that help us to align, group and organize components to an application's layout needs.

Hlayout and Vlayout

Hlayout and Vlayout are simple and light-weight layout components that arrange components contained within in a horizontal, or vertical orientation.

<vlayout ... hflex="1" vflex="1">
	<label ...>Normal Class:</label>
	<hlayout ...>
		<vlayout width="60px">...</vlayout>
		<vlayout>...</vlayout>
	</hlayout>
	...
</vlayout>

hflex and vflex indicate respectively the horizontal and vertical "flexibility" of a component. "Flexibility" refers to how a component's parent should distribute the remaining empty space among its children components. See detailed explanation and examples here .

Hbox and Vbox

Hbox and Vbox arrange components inside them horizontally or vertically just as hlayout and vlayout do, but provide more features such as content alignment and packing; where align adjusts how children components are laid out vertically while pack controls their positions horizontally .

		
<hbox align="center" pack="center" hflex="1" vflex="1">
    <image .../>
</hbox>
<vbox align="center" pack="center" width="100%" ...>
    <label .../>
    <label .../>    
</vbox>

Borderlayout

A Borderlayout is a container that can divide its enclosed area into five regions: North, South, East, West, and Center. Each region is a component in itself and is not required to be declared within the parent Borderlayout. A Borderlayout can also contain another Borderlayout. The dimensions of the Center region is dependent on the other four regions. With the exception of Center, all regions may be assigned with attributes such as splittable (which makes the region resizable) and collapsible.

<borderlayout height="500px" ...>
	<north ... height="50px">...</north>
	<west title="By Type" collapsible="true" width="160px">...</west>
	<center>
		<borderlayout ...>
			<west title="By Filter" collapsible="true" splittable="true" ...>...</west>
			...
		</borderlayout>
	</center>
	<south ... height="50px">...</south>
</borderlayout>

Tablelayout

Tablelayout is an HTML table based container. You can specify the number of columns through the columns attribute and assign the colspan (merge cells horizontally) or rowspan (merge cells vertically) of each Tablechildren to achieve the desired layout.

<tablelayout columns="2" width="100%">
	<tablechildren colspan="2">...</tablechildren>
	<tablechildren>...</tablechildren>
	...
</tablelayout>

Tabbox

Tabbox is a container that displays its children components in multiple tabs. Only Tabs and Tabpanels are allowed as its direct descedents.

The Tabs component can contain multiple Tab components which determine the number of tabs shown in the Tabbox, while their corresponding Tabpanel components enclose the contents of the Tabbox. Each Tabpanel must be placed inside a Tabpanels component.

<tabbox height="100%">
	<tabs>
		<tab label="Search Result 1" closable="false" />
		<tab label="Search Result 2" closable="true" />
	</tabs>
	<tabpanels>
		<tabpanel>...</tabpanel>
		<tabpanel>...</tabpanel>
	</tabpanels>
</tabbox>

Assigning attribute closable=true to Tab will display a close button on the tab such that user can close the tab and its corresponding tab panel.

<zk>
	<style src="/widgets/getting_started/layout/style.css" />
	<borderlayout vflex="min" apply="demo.getting_started.layout.LayoutController">
		<north sclass="header" height="50px">
			<label sclass="header-text">Search Car</label>
		</north>
		<west title="By Type" collapsible="true" width="160px" vflex="1">
			<vlayout sclass="fn-panel1" hflex="1" vflex="1">
				<label sclass="fn-title">Normal Class:</label>
				<hlayout sclass="fn-subpanel">
					<vlayout width="60px">
						<a label="MPV" sclass="fn-type" />
						<a label="SUV" sclass="fn-type" />
						<a label="Sedan" sclass="fn-type" />
					</vlayout>
					<vlayout>
						<a label="Sport" sclass="fn-type" />
						<a label="Supercar" sclass="fn-type" />
						<a label="Van" sclass="fn-type" />
					</vlayout>
				</hlayout>
				<label sclass="fn-title">Luxurious Class:</label>
				<hlayout sclass="fn-subpanel">
					<vlayout width="60px">
						<a label="MPV" sclass="fn-type" />
						<a label="SUV" sclass="fn-type" />
						<a label="Sedan" sclass="fn-type" />
					</vlayout>
					<vlayout>
						<a label="Sport" sclass="fn-type" />
						<a label="Supercar" sclass="fn-type" />
						<a label="Van" sclass="fn-type" />
					</vlayout>
				</hlayout>
			</vlayout>
		</west>
		<center sclass="nested-center" vflex="min">
			<borderlayout vflex="min">
				<west title="By Filter" collapsible="true" splittable="true" width="200px" minsize="200" vflex="min">
					<vlayout sclass="fn-panel2" hflex="1">
						<tablelayout columns="2" width="100%">
							<tablechildren colspan="2">
								<label sclass="fn-title">Accessories:</label>
							</tablechildren>
							<tablechildren>
								<checkbox label="ABS" sclass="fn-condi" />
							</tablechildren>
							<tablechildren>
								<checkbox label="Airbag" sclass="fn-condi" />
							</tablechildren>
							<tablechildren>
								<checkbox label="GPS" sclass="fn-condi" />
							</tablechildren>
							<tablechildren>
								<checkbox label="Keyless" sclass="fn-condi" />
							</tablechildren>
							<tablechildren>
								<checkbox label="Bumper" sclass="fn-condi" />
							</tablechildren>
							<tablechildren>
								<checkbox label="Bike Rack" sclass="fn-condi" />
							</tablechildren>
							<tablechildren colspan="2">
								<label sclass="fn-title">Countries:</label>
							</tablechildren>
							<tablechildren>
								<checkbox label="America" sclass="fn-condi" />
							</tablechildren>
							<tablechildren>
								<checkbox label="Britain" sclass="fn-condi" />
							</tablechildren>
							<tablechildren>
								<checkbox label="China" sclass="fn-condi" />
							</tablechildren>
							<tablechildren>
								<checkbox label="France" sclass="fn-condi" />
							</tablechildren>
							<tablechildren>
								<checkbox label="Germany" sclass="fn-condi" />
							</tablechildren>
							<tablechildren>
								<checkbox label="Italy" sclass="fn-condi" />
							</tablechildren>
						</tablelayout>
						<space height="10px" />
						<button label="Search" />
					</vlayout>
				</west>
				<center>
					<tabbox height="100%">
						<tabs>
							<tab label="Search Result 1" closable="false" />
							<tab label="Search Result 2" closable="true" />
						</tabs>
						<tabpanels>
							<tabpanel>
								<hlayout style="display: flex;justify-content: center;align-items:center" hflex="1" vflex="1">
									<image src="/widgets/getting_started/img/car1.png" />
								</hlayout>
							</tabpanel>
							<tabpanel>
								<hlayout style="display: flex;justify-content: center;align-items:center" vflex="1">
									<image src="/widgets/getting_started/img/car2.png" />
								</hlayout>
							</tabpanel>
						</tabpanels>
					</tabbox>
				</center>
			</borderlayout>
		</center>
		<south sclass="footer" height="50px">
			<vlayout width="100%" sclass="footer-box" style="display: flex; align-items: center;flex-direction: column;">
				<label sclass="footer_text">Copyright © 2005-2014</label>
				<label sclass="footer_text">Potix Corporation All rights reserved.</label>
			</vlayout>
		</south>
	</borderlayout>
</zk>

package demo.getting_started.layout;


import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.MouseEvent;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.impl.LabelElement;

public class LayoutController extends SelectorComposer<Component> {
	
	private static final long serialVersionUID = 1L;

	@Listen("onClick = a, button")
	public void cannedResponse(MouseEvent event){
		showNotify("Clicked "+((LabelElement)event.getTarget()).getLabel());
	}
	
	private void showNotify(String msg){
		Clients.showNotification(msg,"info",null,null,1000);
	}
}