test.zul

ZK是一个Ajax Java Web框架

<?xml version="1.0" encoding="UTF-8"?>
<?page id="pg" title="ZK Test"?>
<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" ?>
<!--
test.zul

{{IS_NOTE
	Purpose:
		View the specified subject.
	Description:
		
	History:
		Mon May 30 19:13:47     2005, Created by tomyeh
}}IS_NOTE

Copyright (C) 2005 Potix Corporation. All Rights Reserved.

{{IS_RIGHT
}}IS_RIGHT
-->
<zk xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.zkoss.org/2005/zul/zul.xsd">
  <zscript>
import org.zkoss.lang.Objects;
  </zscript>
  <window id="test" border="normal" ctrlKeys="^g^q#f2">
	Desktop: ${self.page.desktop.id}
	<attribute name="onOK">
	Messagebox.show("OK is pressed", "OK", Messagebox.OK, Messagebox.EXCLAMATION);
	</attribute>
	<attribute name="onCancel">
	Messagebox.show("CANCEL is pressed", "CANCEL", Messagebox.OK, Messagebox.EXCLAMATION);
	</attribute>
	<attribute name="onCtrlKey">
	Messagebox.show(event.getKeyCode()+" is pressed", "CtrlKey", Messagebox.OK, Messagebox.EXCLAMATION);
	</attribute>

	Username: ${c:l('username')} ${c:l('password')}

	<image src="/img/coffee.gif" tooltiptext="Coffee"/>
	<image src="../img/sun.jpg" width="100px"/>

	<button label="Change page title" onClick="self.page.setTitle(self.page.getTitle()+&quot;Good&quot;)"/>
	<button label="No function"/>
	<button label="Go list.zul?a=b&amp;c=d" href="list.zul?a=b&amp;c=d"/>
	<button label="Go list.zul" href="list.zul"/>
	<button label="Go list.zul with target" href="list.zul" target="new"/>
	<button label="Go Yahoo" onClick="Executions.sendRedirect(&quot;http://www.yahoo.com&quot;)"/>
	<textbox/>
	<window id="some" title="Something" border="normal">
		<label id="label" value="Not good enough?"/>
		<button label="Change label"
			onClick="label.value = label.value + 'A'"/>
		<button label="Change title"
			onClick="self.parent.title = self.parent.title + 'B'"/>
		<button label="Change myself"
			onClick="self.label = self.label + 'C'"/>
		<button label="Test Path">
			<attribute name="onClick">
	alert("Found: "+Path.getComponent("/test/../test/some/label"));
			</attribute>
		</button>
		<button label="Test Path">
			<attribute name="onClick">
	alert("Found: "+Path.getComponent("//pg/test/some/label"));
			</attribute>
		</button>
	</window>
	<window id="mother" border="normal"/>
	<zscript>
	int count = 0;
	</zscript>
	<button label="Add labels" onClick="addLabel()">
		<zscript>
		void addLabel() {
			Label l1 = new Label("After"+count);
			mother.insertBefore(l1, null);
			Label l2 = new Label();
			l2.setValue("Before"+count++);
			mother.insertBefore(l2, l1);
		}
		</zscript>
	</button>
	<button label="Remove labels" onClick="removeLabel()">
		<zscript>
		void removeLabel() {
			for (Iterator it = new ArrayList(mother.getChildren()).iterator();
			it.hasNext();) {
				it.next().detach();
			}
		}
		</zscript>
	</button>
	<zscript>
	test.setTitle("AAA");
	new Button().setParent(test);
	</zscript>

	<button label="Test Progress" onClick="org.zkoss.lang.Threads.sleep(2000)"/>

	<window border="normal">
	<textbox id="inp0" onChange="add()"/>+<textbox id="inp1" onChange="add()"/>
	=<textbox id="out"/>
	<zscript>
	void add() {
		out.setValue(inp0.getValue() + inp1.getValue());
	}
	inp0.focus();
	</zscript>
	</window>

	<calendar/>

	<datebox id="db" onChange="dbi.setValue(self.getValue() != null ? self.getValue().toString(): &quot;N/A&quot;)"/>
	<label id="dbi"/>
	<button label="set MM-dd-yyyy" onClick="db.setFormat(&quot;MM-dd-yyyy&quot;)"/>
	<button label="change visibility" onClick="db.setVisible(!db.visible)"/>
	<separator/>
	Another date (no onChange): <datebox/>

	<separator bar="true"/>
	combobox:
	<combobox id="combo" onChange="comboOut.value = self.value">
		<comboitem label="Simple and Rich"/>
		<comboitem label="Cool!"/>
		<comboitem label="Thumbs Up!"/>
	</combobox>
	<checkbox onCheck="combo.autodrop = self.checked" label="autodrop"/>
	<combobox id="combo2" cols="10" onChange="comboOut.value = self.value">
		<comboitem label="Another Commbo that is longer than input box"/>
		<comboitem label="For testing auto-close"/>
	</combobox>
	<separator/>
	combobox3:
	<combobox id="combo3" cols="10" onChange="comboOut.value = self.value">
		<comboitem label="Item 1"/>
		<comboitem label="Item 2"/>
		<comboitem label="Item 3"/>
		<comboitem label="Item 4"/>
		<comboitem label="Item 5"/>
		<comboitem label="Item 6"/>
		<comboitem label="Item 7"/>
		<comboitem label="Item 8"/>
		<comboitem label="Item 9"/>
		<comboitem label="Item 10"/>
		<comboitem label="Item 11"/>
		<comboitem label="Item 12"/>
		<comboitem label="Item 13"/>
		<comboitem label="Item 14"/>
		<comboitem label="Item 15"/>
		<comboitem label="Item 16"/>
		<comboitem label="Item 17"/>
		<comboitem label="Item 18"/>
		<comboitem label="Item 19"/>
		<comboitem label="Item 20"/>
		<comboitem label="Item 21"/>
		<comboitem label="Item 22"/>
		<comboitem label="Item 23"/>
		<comboitem label="Item 24"/>
		<comboitem label="Item 25"/>
		<comboitem label="Item 26"/>
		<comboitem label="Item 27"/>
		<comboitem label="Last"/>
	</combobox>
	<checkbox onCheck="combo3.autodrop = self.checked" label="autodrop"/>
	<separator bar="true"/>
	Output of combo: <label id="comboOut"/>
	<separator bar="true"/>
	Dynamic Combo (0 item at 1st, 1 at 2nd, 3 at 3rd, 6 at 4th, 10 at 5th...)
	<combobox id="dcombo" onOpen="onComboOpen()"/>
	<zscript>
		int opens = 0;
		void onComboOpen() {
			for (int j = opens++; --j >= 0;)
				new Comboitem("New " + dcombo.getItemCount()).setParent(dcombo);
		}
	</zscript>
	<separator/>
	With description
	<combobox>
		<comboitem label="Simple and Rich" description="The simplest way to make Web applications rich"/>
		<comboitem label="Cool!" description="The coolest technology"/>
		<comboitem label="Thumbs Up!" description="Must try!"/>
	</combobox>
	<window>
	<separator bar="true"/>
	Integer: <intbox id="ibox"/>
	<button label="double" onClick="cal.setValue(Objects.toString(ibox.intValue()*2))"/> <label id="cal"/>
	<separator/>
	Number: <decimalbox format="#,##0.00"/>
	Positive integer: <intbox format="#,##0" constraint="no negative,no zero,no empty"/>
	Nonempty string: <textbox constraint="no empty"/>
	Email: <textbox id="email" constraint="/.+@.+\.[a-z]+/: e-mail address only"/>
		<button label="check" onClick="email.getValue()" />
	</window>

	<window border="normal">
	<button label="Add item" onClick="addItem()"/>
	<button label="Change item label" onClick="itemB.setLabel(&quot;BBBBB&quot;)"/>
	<button label="Remove first item" onClick ="list.removeItemAt(0)"/>
	<zscript>
	void addItem() {
		Listitem li = new Listitem();
		li.setValue("AB");
		li.setLabel("AB");
		list.insertBefore(li, itemB);
	}
	</zscript>
	<listbox id="list" mold="select" name="select" onSelect="itemInfo.value = list.selectedItem != null ? list.selectedItem.label: &quot;N/A&quot;">
		<listitem value="A" label="AA"/>
		<listitem id="itemB" value="B" label="BB"/>
	</listbox>
	<label id="itemInfo"/>
	<separator bar="true"/>
	<listbox id="list2" multiple="true" rows="3" width="200px"
	onSelect="itemInfo.value = list2.selectedItem != null ? list2.selectedItem.label: &quot;N/A&quot;">
		<listhead>
			<listheader label="Col1"/>
			<listheader label="Col2"/>
		</listhead>
		<listitem value="A">
			<listcell label="A1"/>
			<listcell label="A2"/>
		</listitem>
		<listitem value="B" selected="true">
			<listcell label="B1"/>
			<listcell label="B2"/>
		</listitem>
		<listitem value="C" selected="true">
			<listcell label="C1"/>
			<listcell label="C2"/>
		</listitem>
		<listitem value="D">
			<listcell label="D1"/>
			<listcell label="D2"/>
		</listitem>
	</listbox>
	<zscript>
		String[] data = {"AA", "BB", "CC", "DD", "EE", "FF", "GG"};
		ListModel strset = new SimpleListModel(data);
	</zscript>
	<listbox id="list3" multiple="true" width="200px" model="${strset}">
		<listhead>
			<listheader label="Dyna"/>
		</listhead>
	</listbox>
	</window>

	<window title="ABC" border="normal">
	<caption>
		<button label="Hi">
		<attribute name="onClick">
		Messagebox.show("Hello", "Hi", Messagebox.OK, Messagebox.INFORMATION);
		</attribute>
		</button>
	</caption>
	<vbox>
	<hbox id="hbox">
	<listbox id="mlist" seltype="multiple" rows="4" mold="select" onSelect="onsel()">
		<listitem value="A" label="AA"/>
		<listitem value="B" label="BB"/>
		<listitem value="C" label="CC"/>
		<listitem value="D" label="DD"/>
	</listbox>

	<checkbox id="ck" label="N/A" checked="true"/>
	</hbox>

	<radiogroup id="rg1" onCheck="ck.label = event.target.label+'-'+self.selectedIndex">
		<radio label="K1"/>
		<radio label="K2"/>
		<radio label="K3"/>
	</radiogroup>
	<radiogroup id="rg2" onCheck="ck.label = event.target.label+'-'+self.selectedIndex">
		<radio label="M1"/>
		<radio label="M2"/>
		<radio label="M3"/>
	</radiogroup>
	<radiogroup id="rg3" name="W" onCheck="ck.label = event.target.label+'-'+self.selectedIndex">
		<radio label="W1"/>
		<radio label="W2"/>
		<radio label="W3"/>
	</radiogroup>
	<radiogroup name="W">
		<radio label="W4"/>
		</radiogroup>
	<button label="Change orient" onClick="changeRadioOrient()"/>
	<button label="Add label" onClick="addLabelToHbox()"/>
	<button label="Remove label" onClick="removeLabelFromHbox()"/>
	</vbox>

	<zscript>
	List hboxAdded = new LinkedList();
	void onsel() {
		ck.label = mlist.selectedItem != null ? mlist.selectedItem.label: "N/A";
	}
	void addLabelToHbox() {
		Label l = new Label("Hbox's child");
		l.setWidth("100px");
		l.setParent(hbox);
		hboxAdded.add(l);
	}
	void removeLabelFromHbox() {
		for (Iterator it = hboxAdded.iterator(); it.hasNext();)
			it.next().detach();
		hboxAdded.clear();
	}
	void changeRadioOrient() {
		rg1.setOrient("vertical".equals(rg1.getOrient()) ? "horizontal":"vertical");
	}
	</zscript>
	</window>

	<tree id="tree" rows="4">
		<treecols>
			<treecol label="Name"/>
			<treecol label="Description"/>
		</treecols>
		<treechildren>
			<treeitem>
				<treerow>
					<treecell label="Item 1"/>
				</treerow>
				<treechildren/>
			</treeitem>
			<treeitem id="item2" label="Item 2"/>
			<treeitem>
				<treerow>
					<treecell label="Item 3"/>
				</treerow>
				<treechildren>
					<treeitem>
						<treerow>
							<treecell label="Item 3.1"/>
						</treerow>
						<treechildren>
							<treeitem>
								<treerow>
									<treecell label="Item 3.1.1"/>
								</treerow>
							</treeitem>
						</treechildren>
					</treeitem>
					<treeitem>
						<treerow>
							<treecell label="Item 3.2"/>
							<treecell label="3.2 is something who cares"/>
						</treerow>
					</treeitem>
				</treechildren>
			</treeitem>
			<treeitem label="Item 4">
				<treechildren id="item4"/>
			</treeitem>
		</treechildren>
	</tree>
	<button label="Add child item 2.x" onClick="addTreeitem2()"/>
	<button label="Add child item 4.x" onClick="addTreeitem4()"/>
	<zscript>
	int nTreeitems2 = 0;
	void addTreeitem2() {
		if (item2.getTreechildren() == null)
			item2.appendChild(new Treechildren());
		Treeitem ti = new Treeitem();
		Treerow tr = new Treerow();
		Treecell tc = new Treecell();
		tc.setLabel("Item 2." + ++nTreeitems2);
		tc.setParent(tr);
		tr.setParent(ti);

		tc = new Treecell();
		tc.setLabel("Something more and about "+nTreeitems2);
		tc.setParent(tr);

		ti.setParent(item2.getTreechildren());

		if (nTreeitems2 == 2)
			addTreeitem2();
	}
	int nTreeitems4 = 0;
	void addTreeitem4() {
		Treeitem ti = new Treeitem();
		ti.setLabel("Item 4." + ++nTreeitems4);
		ti.setParent(item4);
	}
	</zscript>

	<window id="modal" title="About" left="20px" top="230px" width="200px" border="normal"
	closable="true">
	<caption>
		<button label="Hi">
		<attribute name="onClick">
		Messagebox.show("Hello", "Hi", Messagebox.OK, Messagebox.INFORMATION);
		</attribute>
		</button>
	</caption>
		A modal dialog.
		<button label="close" onClick="modal.setVisible(false);"/>
	</window>
	<button label="doModal" onClick="modal.doModal()"/>
	<button label="doOverlapped" onClick="modal.doOverlapped();"/>
	<button label="doPopup" onClick="modal.doPopup();"/>
	<button label="doEmbedded" onClick="modal.doEmbedded();"/>
	<separator bar="true"/>
	<window id="modal2" title="About" left="20px" top="230px" width="200px" border="normal"
	closable="true">
	<caption>
		<toolbarbutton label="Hello">
		<attribute name="onClick">
		Messagebox.show("Hello", "Hi", Messagebox.OK, Messagebox.INFORMATION);
		</attribute>
		</toolbarbutton>
	</caption>
		Another modal dialog.
		<button label="close" onClick="modal2.setVisible(false);"/>
	</window>
	<button label="doOverlapped" onClick="modal2.doOverlapped();"/>
	<button label="doPopup" onClick="modal2.doPopup();"/>
	<separator/>
	<label id="buttonPressed"/>
	<button label="Message">
		<attribute name="onClick">{
	int v = Messagebox.show("Are you ready?", "Ready", Messagebox.YES|Messagebox.NO, Messagebox.QUESTION);
	buttonPressed.setValue("pressed: "+v);
		}</attribute>
	</button>
	<separator/>
	<image id="image"/>
	<button label="Upload">
		<attribute name="onClick">{
	Object media = Fileupload.get();
	if (media instanceof org.zkoss.image.Image)
		image.setContent(media);
	else if (media != null)
		Messagebox.show("Not an image: "+media, "Error", Messagebox.OK, Messagebox.ERROR);
		}</attribute>
	</button>

	<separator/>

	<html><![CDATA[
	You <b>can</b> put any HTML tags here.<br/>
	<i>italic</i> <span style="color:red">red&amp;&&lt;</span>...
	]]></html>

	<textbox rows="10">
		<attribute name="value"><![CDATA[
Line 1
Line 2
		]]></attribute>
	</textbox>
	<checkbox id="cbs" style="font-size: 20px" label="BIG FONT"/>
	<button label="change style" onClick="cbs.setStyle(&quot;font-size:28px;background-color:blue&quot;)"/>

<window title="toolbar demo" border="normal" width="300px">
	<caption>
		<toolbarbutton label="button3"/>
		<toolbarbutton label="button4"/>
	</caption>
	<toolbar>
		<toolbarbutton label="button1"/>
		<toolbarbutton label="button2"/>
	</toolbar>
</window>
  </window>
</zk>