z35-borderlayout-001.zul

ZK是一个Ajax Java Web框架

<?xml version="1.0" encoding="UTF-8"?>

<!--
	F35-2041292.zul
	
	{{IS_NOTE
	Purpose:
	
	Description:
	
	History:
	Thu Aug  7 16:40:54 TST 2008, Created by jumperchen
	}}IS_NOTE
	
	Copyright (C) 2008 Potix Corporation. All Rights Reserved.
	
	{{IS_RIGHT
	}}IS_RIGHT
-->
<zk>
	Please test each collapse/expand button to see if there is any error.
	<borderlayout height="500px">
		<north maxsize="300" size="50%" border="0" splittable="true"
			title="North" collapsible="true">
			<borderlayout>
				<west id="west" size="25%" border="0" flex="true" maxsize="250"
					 title="West" collapsible="true" autoscroll="true">
					<div style="background:#B8D335">
						<listbox width="400px">
							<auxhead>
								<auxheader colspan="2">
									<label id="span">ss</label>
									<textbox
										onChange='span.value = self.value' />
									ssss
								</auxheader>
							</auxhead>
							<listhead sizable="true">
								<listheader sort="auto">
									<toolbarbutton label="toobarbutton"
										onClick='alert(self.label)' />
									<menubar>
										<menu label="File">
											<menupopup>
												<menuitem label="New"
													onClick="alert(self.label)" />
												<menuitem label="Open"
													onClick="alert(self.label)" />
												<menuitem label="Save"
													onClick="alert(self.label)" />
												<menuseparator />
												<menuitem label="Exit"
													onClick="alert(self.label)" />
											</menupopup>
										</menu>
										<menu label="Help">
											<menupopup>
												<menuitem label="Index"
													onClick="alert(self.label)" />
												<menu label="About">
													<menupopup>
														<menuitem
															label="About ZK" onClick="alert(self.label)" />
														<menuitem
															label="About Potix" onClick="alert(self.label)" />
													</menupopup>
												</menu>
											</menupopup>
										</menu>
									</menubar>
									<button label="lable"
										onClick='alert("button")' />
									<datebox />

								</listheader>
								<listheader>
									<listbox rows="1" mold="select">
										<listitem label="option1" />
										<listitem label="option2" />
										<listitem label="option3" />
									</listbox>
									<datebox />
								</listheader>
							</listhead>
							<listitem>
								<listcell label="Mary" />
								<listcell label="FEMALE" />
							</listitem>
							<listitem>
								<listcell label="John" />
								<listcell label="MALE" />
							</listitem>
							<listitem>
								<listcell label="Jane" />
								<listcell label="FEMALE" />
							</listitem>
							<listitem>
								<listcell label="Henry" />
								<listcell label="MALE" />
							</listitem>
						</listbox>
					</div>
				</west>
				<center border="none" flex="true">
					<tablelayout id="tbl" columns="3">
		<tablechildren id="tc1" colspan="2">
			<panel title="table1" border="normal" 
			 	maximizable="true" collapsible="true" >
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</tablechildren>
		<tablechildren>
			<panel title="table2" border="normal"
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>
			 </panel>
		</tablechildren>
		<tablechildren rowspan="2">
			<panel title="table3" border="normal" 
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</tablechildren>
		<tablechildren >
			<panel title="table4" border="normal" 
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</tablechildren>
		<tablechildren>
			<panel title="table5" border="normal"
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</tablechildren>
		<tablechildren>
			<panel title="table6" border="normal"
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</tablechildren>
		<tablechildren>
			<panel title="table7" border="normal"
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</tablechildren>
		<tablechildren>
			<panel title="table8" border="normal"
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</tablechildren>
</tablelayout>
				</center>
				<east size="50%" border="none" flex="true">
				<div>
				<button id="btn" label="Restore Panel" visible="false" onClick='self.visible = panel.minimized = false;'/>
					<panel id="panel" framable="true" width="500px" height="500px" title="Panel component" floatable="true" movable="true"
	maximizable="true" minimizable="true"  border="normal" collapsible="true" closable="true">
	<attribute name="onMinimize">
		btn.visible = self.minimized;
		btn.focus();
	</attribute>
	<attribute name="onClose">
		alert("Panel is closed");
	</attribute>
	<toolbar>
		Search:
		<bandbox id="bd" width="350px">
			<bandpopup>
				<vbox>
					<hbox>
						Search
						<textbox />
					</hbox>
					<listbox width="200px"
						onSelect="bd.value=self.selectedItem.label; bd.closeDropdown();">
						<listhead>
							<listheader label="Name" />
							<listheader label="Description" />
						</listhead>
						<listitem>
							<listcell label="John" />
							<listcell label="CEO" />
						</listitem>
						<listitem>
							<listcell label="Joe" />
							<listcell label="Engineer" />
						</listitem>
						<listitem>
							<listcell label="Mary" />
							<listcell label="Supervisor" />
						</listitem>
					</listbox>
				</vbox>
			</bandpopup>
		</bandbox>
	</toolbar>
	<panelchildren style="background-color:white">
		<vbox>
			<div>1. Click the top toolbuttons, they should work well. (toggle, minimize, maximize, and close)</div>
			<div>2. Move the panel, and it should show proper.</div>
			<div>3. The panel layout should show proper.</div>
		</vbox>
		
	</panelchildren>
	<toolbar>
		<paging/>
	</toolbar>

	<toolbar mold="panel" align="center">
		<button label="OK" />
		<button label="Canel" />
	</toolbar>
</panel>
</div>
				</east>
			</borderlayout>
		</north>
		<center border="0">
			<borderlayout>
				<west maxsize="600" size="30%" flex="true" border="0"
					splittable="true">
					<div style="background:#E6D92C">
						<label value="30%"
							style="color:white;font-size:50px" />
					</div>
				</west>
				<center>
					<window>
	<columnlayout id="cl">
		<columnchildren width="200px" style="padding: 5px">
			<panel height="100px" title="column" border="normal"
			 	maximizable="true" collapsible="true">
			 	<panelchildren>Panel</panelchildren>	
			 </panel>
		</columnchildren>
	</columnlayout>
	
<zscript>
	import org.zkoss.zkmax.zul.Columnchildren;
	import org.zkoss.zul.Spinner;
	
	Columnchildren[] cc = new Columnchildren[15];
	int count = 0;
	
	public void add() {
		if (count > 14) return;
		
		cc[count] = new Columnchildren();
		cc[count].setWidth("50%");
		cc[count].setParent(cl);
		
		Panel p = new Panel();
		p.setHeight("100px");
		p.setStyle("padding: 5px");
		p.setTitle("column " + count);
		p.setBorder("normal");
		
		
		Panelchildren pc = new Panelchildren();
		Label l = new Label("test");
		l.setParent(pc);
		pc.setParent(p);
		p.setParent(cc[count]);
		count++;
	}
	public void remove() {
		if (count > 0)
			cc[--count].detach();
	}
</zscript>

	<button label="add" onClick="add()" />
	<button label="remove" onClick="remove()" />
</window>

				</center>
				<east id="east" size="30%" flex="true" border="0" title="East"
					collapsible="true">
					<div style="background:#B8D335">
						<window title="Grid Demo" border="normal"
							width="360px" closable="true">
							<grid>
								<rows>
									<row>
										<label value="File:" />
										<textbox width="99%" />
									</row>
									<row>
										<label value="Type:" />
										<hbox>
											<listbox rows="1"
												mold="select">
												<listitem
													label="Java Files,(*.java)" />
												<listitem
													label="All Files,(*.*)" />
											</listbox>
											<button label="Browse..." />
										</hbox>
									</row>
									<row>
										<label value="Options:" />
										<textbox rows="3" width="99%" />
									</row>
								</rows>
							</grid>
							<button label="doModal"
								onClick="self.parent.doModal();" />
						</window>
					</div>
				</east>
			</borderlayout>
		</center>
	</borderlayout>	
</zk>