Address Book Using JPA +ZK + Spring.

AddressCRUD.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
  <window title="Address" id="addressCRUD" border="normal" width="30%"
		mode="modal" maximizable="false" closable="true" sclass="mymodal"
		position="center,parent" apply="org.zkoss.bind.BindComposer"
		viewModel="@id('vm') @init('zkoss.vm.AddressListCRUDVM')">
		<panel width="100%">
			<panelchildren>
				<separator />
				<grid sclass="vgrid">
					<columns>
						<column></column>
						<column></column>
					</columns>
					<rows>
						<row>
							<cell colspan="2">
								<vlayout>
									<label value="Full Name" />
									<textbox id="fullName" hflex="1"
										readonly="@load(vm.makeAsReadOnly)"
										value="@load(vm.selectedRecord.fullName) @save(vm.selectedRecord.fullName, before='saveThis')"
										mold="rounded" />
								</vlayout>
							</cell>
						</row>
						<row>
							<cell colspan="2">
								<vlayout>
									<label value="Address" />
									<textbox id="address1" hflex="1"
										readonly="@load(vm.makeAsReadOnly)"
										value="@load(vm.selectedRecord.address1) @save(vm.selectedRecord.address2, before='saveThis')"
										mold="rounded" />
								</vlayout>
							</cell>
						</row>
						<row>
							<cell colspan="2">
								<vlayout>
									<textbox id="address2" hflex="1"
										readonly="@load(vm.makeAsReadOnly)"
										value="@load(vm.selectedRecord.address2) @save(vm.selectedRecord.address2, before='saveThis')"
										mold="rounded" />
								</vlayout>
							</cell>
						</row>
						<row>
							<vlayout>
								<label value="City" />
								<textbox id="City" hflex="1"
									readonly="@load(vm.makeAsReadOnly)"
									value="@load(vm.selectedRecord.city) @save(vm.selectedRecord.city, before='saveThis')"
									mold="rounded" />
							</vlayout>
							<vlayout>
								<grid sclass="vgrid">
									<columns>
										<column width="30%"></column>
										<column></column>
									</columns>
									<rows>
										<row>
											<vlayout>
												<label value="State" />
												<textbox id="State"
													readonly="@load(vm.makeAsReadOnly)"
													value="@load(vm.selectedRecord.state) @save(vm.selectedRecord.state, before='saveThis')"
													hflex="1" mold="rounded" />
											</vlayout>
											<vlayout>
												<label value="ZipCode" />
												<textbox id="zipcode"
													readonly="@load(vm.makeAsReadOnly)"
													value="@load(vm.selectedRecord.zipCode) @save(vm.selectedRecord.zipCode, before='saveThis')"
													hflex="1" mold="rounded" />
											</vlayout>
										</row>
									</rows>
								</grid>
							</vlayout>
						</row>
						<row>
							<cell colspan="2">
								<vlayout>
									<label value="Email" />
									<textbox id="email" hflex="1"
										readonly="@load(vm.makeAsReadOnly)"
										value="@load(vm.selectedRecord.email) @save(vm.selectedRecord.email, before='saveThis')"
										mold="rounded" />
								</vlayout>
							</cell>
						</row>
						<row>
							<vlayout>
								<label value="Mobile" />
								<textbox id="Mobile" hflex="1"
									readonly="@load(vm.makeAsReadOnly)"
									value="@load(vm.selectedRecord.mobile) @save(vm.selectedRecord.mobile, before='saveThis')"
									mold="rounded" />
							</vlayout>
						</row>

					</rows>
				</grid>
			</panelchildren>
		</panel>
		<separator />
		<separator />
		<separator />
		<div align="center">
			<button label="Save" visible="@load(not vm.makeAsReadOnly)"
				onClick="@command('saveThis')" mold="trendy"
				sclass="mybutton button blue small" />
			<button label="@load(vm.makeAsReadOnly ?'Ok':'Cancel')"
				onClick="@command('closeThis')" mold="trendy"
				sclass="mybutton button blue small" />
		</div>
		<separator />
	</window>
</zk>