ChildSchoolEditor.zul

<?page title="Schools" contentType="text/html;charset=UTF-8"?>
<zk>
  <window id="winEditor" title="School Editor" border="normal"
		height="350px" width="400px" closable="true"
		apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('org.com.demo.ChildSchoolsEditVM')">
		<vlayout>
			<toolbar>
				<toolbarbutton id="tbtnSave" label="Save"
					onClick="@command('saveSchool')" image="/images/16_save.png" />
				<toolbarbutton id="tbtnExit" label="Exit"
					onClick="@command('exitSchool')" image="/images/EXIT.GIF" />
			</toolbar>
			<grid>
				<columns>
					<column width="100px" />
					<column />
				</columns>
				<rows>
					<row>
						<label value="Code" />
						<textbox value="@bind(vm.selectedSchool.code)" />
					</row>
					<row>
						<label value="Name" />
						<textbox value="@bind(vm.selectedSchool.name)" />
					</row>
					<row>
						<label value="Address" />
						<textbox
							value="@bind(vm.selectedSchool.address)" />
					</row>
				</rows>
			</grid>
		</vlayout>
	</window>
</zk>

ChildSchoolsEditVM.java

package org.com.demo;

import java.util.HashMap;
import java.util.Map;

import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.ContextParam;
import org.zkoss.bind.annotation.ContextType;
import org.zkoss.bind.annotation.ExecutionArgParam;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.select.Selectors;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zul.Window;

public class ChildSchoolsEditVM {

  private School selectedSchool;
    @Wire("#winEditor")
	private Window winEditor;
	
	public School getSelectedSchool() {
		return selectedSchool;
	}

	public void setSelectedSchool(School selectedSchool) {
		this.selectedSchool = selectedSchool;
	}

	@AfterCompose
	public void initSetup(@ContextParam(ContextType.VIEW) Component view,
			@ExecutionArgParam("SELECTED_SCHOOL") School selectedSchool) {
		Selectors.wireComponents(view, this, false);
		this.selectedSchool = selectedSchool;

	}

	@Command
	public void exitSchool() {
		winEditor.detach();
	}

	@SuppressWarnings({ "rawtypes", "unchecked" })
	@Command
	public void saveSchool() {
		Map args = new HashMap();
		args.put("modifiedSchool", this.selectedSchool);
		BindUtils.postGlobalCommand(null, null, "onSchoolSaved", args);
		winEditor.detach();

	}

}

ParentSchoolsList.zul

<?page title="Schools" contentType="text/html;charset=UTF-8"?>
<zk>
  <window id="winSchools" title="Schools" border="normal"
		height="100%" width="100%" apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('org.com.demo.schoolListVM')">
		<vlayout>
			<toolbar>
				<toolbarbutton id="tbtnEdit" label="Edit"
					onClick="@command('editSchool')" image="/images/icon-edit.png" />
				<toolbarbutton id="tbtnRemove" label="Remove"
					onClick="@command('deleteSchool')" image="/images/icon-trash-red.png" />
			</toolbar>
			<listbox id="lbSchools" model="@load(vm.schools	)"
				selectedItem="@bind(vm.selectedSchool)" vflex="true">
				<listhead sizable="true">
					<listheader label="Code" width="50px" />
					<listheader label="Name" width="150px" />
					<listheader label="Address" width="200px" />
				</listhead>
				<template name="model" var="p1">
					<listitem>
						<listcell label="@load(p1.code)" />
						<listcell label="@load(p1.name)" />
						<listcell label="@load(p1.address)" />
					</listitem>
				</template>
			</listbox>
		</vlayout>
	</window>
</zk>

schoolListVM

package org.com.demo;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.zkoss.bind.BindUtils;
import org.zkoss.bind.annotation.AfterCompose;
import org.zkoss.bind.annotation.BindingParam;
import org.zkoss.bind.annotation.Command;
import org.zkoss.bind.annotation.GlobalCommand;
import org.zkoss.bind.annotation.NotifyChange;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.SuspendNotAllowedException;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Window;

public class schoolListVM {

  private Window winSchools;
	private List<School> schools;
	private School selectedSchool;

	public List<School> getSchools() {
		return schools;
	}

	public void setSchools(List<School> schools) {
		this.schools = schools;
	}

	public School getSelectedSchool() {
		return selectedSchool;
	}

	public void setSelectedSchool(School selectedSchool) {
		this.selectedSchool = selectedSchool;
	}

	@AfterCompose
	public void initSetup() {

		schools = new ArrayList<School>();
		schools.add(new School("1", "1st school", "address-1"));
		schools.add(new School("2", "2nd school", "address-2"));
		schools.add(new School("3", "3rd school", "address-3"));
		schools.add(new School("4", "4th school", "address-4"));
		schools.add(new School("5", "5th school", "address-5"));
		schools.add(new School("6", "6th school", "address-6"));
		schools.add(new School("7", "7th school", "address-7"));
		schools.add(new School("8", "8th school", "address-8"));
		schools.add(new School("9", "9th school", "address-9"));

	}

	/**
	 * Event handler method triggered when the "edit" toolbar button is pressed
	 */
	@Command
	public void editSchool() {

		if (selectedSchool == null) {
			Messagebox.show("You have to select a school from the list first.",
					"Error", Messagebox.OK, Messagebox.ERROR);
			return;
		}

		Map<String, Object> parameters = new HashMap<String, Object>();
		parameters.put("SELECTED_SCHOOL", selectedSchool);
		Window editDialog = (Window) Executions.createComponents(
				"ChildSchoolEditor.zul", winSchools, parameters);

		try {
			editDialog.doModal();
		} catch (SuspendNotAllowedException e) {
			e.printStackTrace();
		}
	}

	/**
	 * This method is actualy an event handler triggered only from the edit
	 * dialog and it is responsible to reflect the data changes made to the
	 * list.
	 */
	@GlobalCommand
	@NotifyChange("selectedSchool")
	public void onSchoolSaved(
			@BindingParam("modifiedSchool") School modifiedSchool) {
		this.selectedSchool = modifiedSchool;
	}

	/**
	 * Event handler method triggered when the "remove" toolbar button is
	 * pressed
	 */

	@SuppressWarnings({ "unchecked", "rawtypes" })
	@Command
	@NotifyChange("selectedSchool")
	public void deleteSchool() {

		int OkCancel;
		if (selectedSchool == null) {
			Messagebox.show("You have to select a school from the list first.",
					"Error", Messagebox.OK, Messagebox.ERROR);
			return;
		}

		String str = "The Selected  \"" + selectedSchool.getName()
				+ "\" will be deleted.";
		OkCancel = Messagebox.show(str, "Confirm", Messagebox.OK
				| Messagebox.CANCEL, Messagebox.QUESTION);
		if (OkCancel == Messagebox.CANCEL) {
			return;
		}

		str = "The \""
				+ selectedSchool.getName()
				+ "\" will be permanently deleted and the action cannot be undone.";

		Messagebox.show(str, "Confirm", Messagebox.OK | Messagebox.CANCEL,
				Messagebox.QUESTION, new EventListener() {
					@Override
					public void onEvent(Event event) throws Exception {
						if (((Integer) event.getData()).intValue() == Messagebox.OK) {
							schools.remove(selectedSchool);
							selectedSchool = null;
							BindUtils.postNotifyChange(null, null,
									schoolListVM.this, "selectedSchool");
						}
					}
				});
	}

}