Description & Source Code

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

	<style dynamic="true">
		.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;
		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;
	<panel id="panel" title="Panel" framable="true" 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">
			<bandbox id="bd" autodrop="true" width="350px"
				onChanging="search.model = strset.getSubModel(event.value, 30);">
				<bandpopup width="320px">
					<panel height="215px">
							<listbox class="listbox search" id="search" height="100%"
								style="background:white;" oddRowSclass="" model="${strset}"
								onSelect="bd.value=self.selectedItem.label; bd.close();" />
								<attribute name="onCreate"><![CDATA[
									search.mold = "paging";
									search.paginal = self;
									search.pageSize = 10;
				<columnchildren width="100%">
					<panel height="285px">
								<center flex="true">
									<div id="viewer" style="overflow:auto;" />
								<south splittable="true" size="45%"  flex="true">
									<textbox id="text" multiline="true" width="98%" 
										style="margin:0px" value="Hi, I am Jumper." />
				<columnchildren width="130px">
					<panel height="285px" width="100%">
							<borderlayout style="background:transparent">
								<north size="120px" border="none" style="background:transparent">
									<image src="/widgets/window/panel/img/msn1.png"/>	
								<south size="120px" border="none" style="background:transparent">
									<image src="/widgets/window/panel/img/msn2.png"/>
		<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); = "padding-left:20px";
					content.parent = viewer;
					text.value = "";
			<button label="Clear" width="65px" onClick='text.value = ""'/>