ZK MVVM List box with Dynamic Template

Requirement.

In a screen, want to show the list of records with three different layout. Say for example, for layout1, we want to display three columns, for layouy2, we want to display four columns and so on.

 

Here is the code.

 

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
	<window id="listboxdynamic" border="none"
		apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('com.product.webapp.examples.ListBoxDynamicVM')">
		<custom-attributes listenKeys="willlistenforKeys" />
		<separator />
		<button label="Template 1" onClick="@command('onTemplate',type='simple')"></button>
		<space></space>
		<button label="Template 2" onClick="@command('onTemplate',type='simple2')"></button>
		<space></space>
		<button label="Template 3" onClick="@command('onTemplate',type='simple3')"></button>
		<space></space>
		<separator></separator>
		<div children="@load('1') @template(vm.templatetype)">
			<template name="simple">
				<listbox id="" mold="paging"
					model="@load(vm.persons)">
					<listhead sizable="true">
						<listheader label="First Name" />
						<listheader label="Last Name" />
					</listhead>
					<template name="model" var="p1">
						<listitem>
							<listcell label="@load(p1.firstName)" />
							<listcell label="@load(p1.lastName)" />
						</listitem>
					</template>
				</listbox>
			</template>
			<template name="simple2">
				<listbox id="" mold="paging"
					model="@load(vm.persons)">
					<listhead sizable="true">
						<listheader label="First Name" />
						<listheader label="Last Name" />
						<listheader label="Address1" />
					</listhead>
					<template name="model" var="p1">
						<listitem>
							<listcell label="@load(p1.firstName)" />
							<listcell label="@load(p1.lastName)" />
							<listcell label="@load(p1.address1)" />
						</listitem>
					</template>
				</listbox>
			</template>
			 
			<template name="simple3">3333</template>
		</div>
	</window>
</zk>

 

View Model

package com.product.webapp.examples;

import java.util.ArrayList;
import java.util.List;

import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zul.Messagebox;

public class ListBoxDynamicVM {

	private String templatetype;
	private List<Person> persons;

	public List<Person> getPersons() {
		return persons;
	}

	public void setPersons(List<Person> persons) {
		this.persons = persons;
	}

	public String getTemplatetype() {
		return templatetype;
	}

	public void setTemplatetype(String templatetype) {
		this.templatetype = templatetype;
	}

	@AfterCompose
	public void initSetup(@ContextParam(ContextType.VIEW) Component view) {
		Selectors.wireComponents(view, this, false);

		System.out.println("starting creating list");
		persons = new ArrayList<Person>();
		for (int i = 0; i < 10; i++) {
			persons.add(new Person("firstname_" + i, "lastname_" + i,
					"address_" + i, "city_" + i));
		}

		this.templatetype = "simple";
	}

	@NotifyChange("templatetype")
	@Command
	public void onTemplate(@BindingParam("type") String type) {

		this.templatetype = type;
		Messagebox.show(" " + templatetype);
	}

	public static class Person {
		private String firstName;
		private String lastName;
		private String address1;
		private String city;

		public Person(String firstName, String lastName, String address1,
				String city) {
			this.firstName = firstName;
			this.lastName = lastName;
			this.address1 = address1;
			this.city = city;

		}

		public String getFirstName() {
			System.out.println(" " + this.firstName);
			return firstName;
		}

		public void setFirstName(String firstName) {
			this.firstName = firstName;
		}

		public String getLastName() {
			return lastName;
		}

		public void setLastName(String lastName) {
			this.lastName = lastName;
		}

		public String getAddress1() {
			return address1;
		}

		public void setAddress1(String address1) {
			this.address1 = address1;
		}

		public String getCity() {
			return city;
		}

		public void setCity(String city) {
			this.city = city;
		}

	}
}