This sample demonstrates how to piece together an UI for a messaging application using the panel component.

<zk>
	<style>
		.cells td, .search .item td {
			border-bottom: 1px solid #BFDBF5;
		}
		.search .cell-inner {
			color: #2C559C; font: italic Tahoma, Arial, Helvetica, sans-serif;
		}
	    .z-menubar-hor, .z-menubar-ver{
	        border-bottom:0 none;
	        background: transparent none;
	    }
	</style>
	<zscript><![CDATA[
		String[] data = new String[] {
			"Albert", "Bob", "Candy", "Elva", "Elva2", "Gaby", "Gavin", "Jason", "John", 
			"Jean", "Janet", "Jamie", "Jessica", "Peter", "Rex", "Richard", "Sam", "Sidney", 
			"Simon", "Sky", "Tony", "Vicky", "Winnie", "Wendy", "Zera", "Zenobia" };
		ListModel strset = new demo.data.DemoListModel(data);
	]]></zscript>
	<panel id="panel" title="Panel" width="500px"
		maximizable="true" minimizable="true" border="normal" collapsible="true" closable="true"
		onClose='alert("Panel is closed");' onMinimize='alert("Panel is minimized");'>
		<toolbar mold="panel">
			Search:
			<bandbox id="bd" autodrop="true" width="350px"
				onChanging="search.model = strset.getSubModel(event.value, 30);">
				<bandpopup width="320px">
					<panel height="215px">
						<panelchildren>
							<listbox class="listbox search" id="search" height="100%"
								style="background:white;" oddRowSclass="" model="${strset}"
								onSelect="bd.value=self.selectedItem.label; bd.close();" />
						</panelchildren>
						<toolbar>
							<paging>
								<attribute name="onCreate"><![CDATA[
									search.mold = "paging";
									search.paginal = self;
									search.pageSize = 10;
								]]></attribute>
							</paging>
						</toolbar>
					</panel>
				</bandpopup>
			</bandbox>
		</toolbar>
		<panelchildren>
			<columnlayout>
				<columnchildren width="100%">
					<panel height="285px">
						<panelchildren>
							<borderlayout>
								<center vflex="1">
									<div id="viewer" style="overflow:auto;" />
								</center>
								<south splittable="true" size="45%" >
									<textbox id="text" multiline="true" width="100%"
										style="margin:0px" value="Hi, I am Jumper." height="100%"/>
								</south>
							</borderlayout>
						</panelchildren>
					</panel>
				</columnchildren>
				<columnchildren width="130px">
					<panel height="285px" width="100%">
						<panelchildren>
							<borderlayout style="background:transparent">
								<north size="120px" border="none" style="background:transparent">
									<image src="/widgets/window/panel/img/msn1.png"/>	
								</north>
								<south size="120px" border="none" style="background:transparent">
									<image src="/widgets/window/panel/img/msn2.png"/>
								</south>
							</borderlayout>
						</panelchildren>
					</panel>
				</columnchildren>
			</columnlayout>
		</panelchildren>
		<toolbar mold="panel" align="center">
			<button label="Send" width="65px">
				<attribute name="onClick"><![CDATA[
					if(text.value.isEmpty()) return;
					Div div = new Div();
					new Label("Jumper@office says:").setParent(div);
					div.parent = viewer;
					Label content = new Label(text.value);
					content.style = "padding-left:20px";
					content.parent = viewer;
					text.value = "";
				]]></attribute>
			</button>
			<button label="Clear" width="65px" onClick='text.value = ""'/>
		</toolbar>
	</panel>
</zk>