Theme:
Processing...
Description & Source Code

Column layout divides its container space into individual columns called "columnchildren". The columnchildren take only the ZK panel components as children components; the panels serve as the container for your content.

column_layout.zul
<div apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('demo.layout.column_layout.ColumnLayoutViewModel')">
	<columnlayout>
		<columnchildren width="50%">
			<panel title="Available projects:">
				<panelchildren>
					<listbox id="left" model="@load(vm.leftListModel)" height="300px" 
						oddRowSclass="non-odd" checkmark="true">
						<template name="model">
							<listitem>
								<listcell label="@load(each.label)" src="@load(each.image)" />
							</listitem>
						</template>
					</listbox>			
				</panelchildren>
			</panel>
		</columnchildren>
		<columnchildren width="100px">
			<panel>
				<panelchildren class="actionColumn">
					<image sclass="pointer" tooltiptext="Add Project" 
						src="/widgets/layout/column_layout/img/ButtonArrowRight32.png"
						onClick="@command('addProjects')">
					</image>
					<separator height="15px"/>
					<image sclass="pointer" tooltiptext="Remove Project" 
						src="/widgets/layout/column_layout/img/ButtonArrowLeft32.png"
						onClick="@command('removeProjects')">
					</image>
				</panelchildren>
			</panel>
		</columnchildren>
		<columnchildren width="50%">
			<panel title="Configured projects:">
				<panelchildren>
					<listbox id="right" model="@load(vm.rightListModel)" height="300px" 
						oddRowSclass="non-odd" checkmark="true">
						<template name="model">
							<listitem>
								<listcell label="@load(each.label)" src="@load(each.image)" />
							</listitem>
						</template>
					</listbox>			
				</panelchildren>
			</panel>
		</columnchildren>
	</columnlayout>
	
	<style>
		.pointer {
			cursor: pointer;
		}
		.actionColumn {
			margin: 70px 34px;
		}
	</style>
</div>
ColumnLayoutViewModel.java
package demo.layout.column_layout;

import java.util.Set;

import org.zkoss.bind.annotation.Command;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zul.ListModelList;

public class ColumnLayoutViewModel {

	private static final String IMAGE_URL = "/widgets/layout/column_layout/img/blue-document.png";

	private ListModelList<ProjectInfo> leftListModel = createListModel("ZK Forge", "ZK Mobile", "ZK GWT", "ZK JSF", "ZK JSP");
	private ListModelList<ProjectInfo> rightListModel = createListModel("ZK", "ZK Studio", "ZK Spring");

	@Command
	public void addProjects() {
		moveSelection(leftListModel, rightListModel, "Please select at least one Project to add.");
	}

	@Command
	public void removeProjects() {
		moveSelection(rightListModel, leftListModel, "Please select at least one Project to remove.");
	}

	public void moveSelection(ListModelList<ProjectInfo> origin,
			ListModelList<ProjectInfo> destination, String failMessage) {
		Set<ProjectInfo> selection = origin.getSelection();
		if (selection.isEmpty()) {
			Clients.showNotification(failMessage, "info", null, null, 2000,
					true);
		} else {
			destination.addAll(selection);
			origin.removeAll(selection);
		}
	}
	
	public ListModelList<ProjectInfo> getLeftListModel() {
		return leftListModel;
	}

	public ListModelList<ProjectInfo> getRightListModel() {
		return rightListModel;
	}

	ListModelList<ProjectInfo> createListModel(String... labels) {
		ListModelList<ProjectInfo> listModelList = new ListModelList<ProjectInfo>();
		for(String label : labels) {
			listModelList.add(new ProjectInfo(label, IMAGE_URL));
		}
		listModelList.setMultiple(true);
		return listModelList;
	}
}
ProjectInfo.java
package demo.layout.column_layout;

public class ProjectInfo {
	private String label;
	private String image;

	public ProjectInfo(String label, String image) {
		super();
		this.label = label;
		this.image = image;
	}

	public String getLabel() {
		return label;
	}

	public String getImage() {
		return image;
	}
}