list.zul

ZK是一个Ajax Java Web框架

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

<!--
list.zul

{{IS_NOTE
	Purpose:
		
	Description:
		
	History:
		Thu Oct 27 21:18:02     2005, Created by tomyeh
}}IS_NOTE

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

{{IS_RIGHT
}}IS_RIGHT
-->
<window title="List Demo">
<hbox>
<zscript>
	Comparator sa0 = new ListitemComparator(0),
		sa1 = new ListitemComparator(1),
		sd0 = new ListitemComparator(0, false, true),
		sd1 = new ListitemComparator(1, false, true);
</zscript>
<listbox id="src" multiple="true" width="250px">
	<listhead id="lh" sizable="true">
		<listheader width="150px" label="Population" sortAscending="${sa0}"/>
		<listheader width="100px" align="right" label="%" sortAscending="${sa1}" sortDescending="${sd1}"/>
	</listhead>
	<auxhead id="ah1">
		<auxheader label="Total" colspan="2"/>
	</auxhead>
	<auxhead id="ah2">
		<auxheader label="Total 2" colspan="2"/>
	</auxhead>
	<listitem id="a" value="A">
		<listcell label="A. Graduate"/>
		<listcell label="20%"/>
	</listitem>
	<listitem id="b" value="B">
		<listcell label="B. College"/>
		<listcell label="23%"/>
	</listitem>
	<listitem id="c" value="C">
		<listcell label="C. High School"/>
		<listcell label="40%"/>
	</listitem>
	<listfoot>
		<listfooter label="More or less"/>
		<listfooter label="100%"/>
	</listfoot>
	<listitem id="d" value="D">
		<listcell label="D. Others"/>
		<listcell><toolbarbutton label="Go Potix" href="http://www.zkoss.org"/></listcell>
	</listitem>
</listbox>
<vbox>
	<button label="=&gt;" onClick="move(src, dst)"/>
	<button label="&lt;=" onClick="move(dst, src)"/>
	<button label="remove 1st head" onClick="ah1.detach()"/>
	<button label="remove 2nd head" onClick="ah2.detach()"/>
	<button label="add aux head">
		<attribute name="onClick">{
		Auxhead ah = new Auxhead();
		Auxheader ahr = new Auxheader("New aux");
		ahr.setParent(ah);
		ahr.setSpan(2);
		src.insertBefore(ah, lh);
		}</attribute>
	</button>
</vbox>
<listbox id="dst" checkmark="true" multiple="true" width="250px">
	<listhead>
		<listheader label="Population"/>
		<listheader label="%"/>
	</listhead>
	<listitem id="e" value="E">
		<listcell label="E. Supermen"/>
		<listcell label="21%"/>
	</listitem>
	<listitem id="f" value="F">
		<listcell label="F. Junior High Scroll"/>
		<listcell label="12%"/>
	</listitem>
</listbox>
</hbox>
<vbox>
The first column width above is 150, while the second is 100.
<hbox>
<button label="Move c before b" onClick="move(c, b)"/>
<button label="Move b before a" onClick="move(b, a)"/>
<button label="Move a before d" onClick="move(a, d)"/>
<button label="Check index" onClick="checkIndex(src)"/>
</hbox>
</vbox>
<zscript><![CDATA[
void move(Listitem li, Listitem before) {
	src.insertBefore(li, before);
}
void move(Listbox src, Listbox dst) {
	Listitem s = src.getSelectedItem();
	if (s == null)
		Messagebox.show("Select an item first");
	else
		s.setParent(dst);
}
void checkIndex(Listbox l) {
	boolean ok = true, selfound = false;
	int j = 0;
	for (Iterator it = l.getItems().iterator(); it.hasNext(); ++j) {
		Listitem li = it.next();
		if (li.getIndex() != j) {
			ok = false;
			alert("Wrong index "+li.getIndex()+" != "+j);
		}
		if (!selfound && li.isSelected()) {
			selfound = true;
			if (l.getSelectedIndex() != j) {
				ok = false;
				alert("Wrong selected "+l.getSelectedIndex()+" != "+j);
			}
		}
	}
	if (!selfound && l.getSelectedIndex() != -1) {
		ok = false;
		alert("None selected but "+l.getSelectedIndex());
	}
	if (ok) alert("Correct");
}
]]></zscript>
<separator bar="true"/>
<listbox rows="3" width="400px">
	<listhead>
		<listheader label="Population"/>
		<listheader label="Percentage"/>
		<listheader label="Description"/>
	</listhead>
	<listitem id="li0" value="A">
		<listcell label="A. Graduate"/>
		<listcell label="20%"/>
		<listcell label="More or less"/>
	</listitem>
	<listitem id="li1" value="B">
		<listcell label="B. College"/>
		<listcell label="23%"/>
		<listcell label="More or less"/>
	</listitem>
	<listitem value="C" selected="true">
		<listcell label="C. High School"/>
		<listcell label="40%"/>
		<listcell label="More or less"/>
	</listitem>
	<listitem value="D">
		<listcell label="D. Junior High School"/>
		<listcell label="10%"/>
		<listcell label="More or less"/>
	</listitem>
	<listitem value="E">
		<listcell label="F. Others"/>
		<listcell label="17%"/>
		<listcell label="More or less"/>
	</listitem>
</listbox>
<button label="Select 2nd" onClick="li1.selected = true"/>

<separator bar="true"/>
<listbox checkmark="true" rows="4" width="300px">
	<listhead>
		<listheader label="Population"/>
		<listheader label="Percentage"/>
	</listhead>
	<listitem value="A">
		<listcell label="A. Graduate"/>
		<listcell label="20%"/>
	</listitem>
	<listitem value="B">
		<listcell label="B. College"/>
		<listcell label="23%"/>
	</listitem>
	<listitem value="C">
		<listcell label="C. High School"/>
		<listcell label="40%"/>
	</listitem>
	<listitem value="D">
		<listcell label="D. Junior High School"/>
		<listcell label="10%"/>
	</listitem>
	<listitem value="E">
		<listcell label="F. Others"/>
		<listcell label="17%"/>
	</listitem>
</listbox>

<separator bar="true"/>
H scroll only
<listbox width="80px">
	<listhead>
		<listheader width="50px" label="Population"/>
		<listheader width="50px" label="%"/>
	</listhead>
	<listitem value="A">
		<listcell label="A. Graduate"/>
		<listcell label="20%"/>
	</listitem>
	<listitem value="B">
		<listcell label="B. College"/>
		<listcell label="23%"/>
	</listitem>
	<listitem value="C">
		<listcell label="C. High School"/>
		<listcell label="40%"/>
	</listitem>
	<listitem value="D">
		<listcell label="D. Junior High School"/>
		<listcell label="10%"/>
	</listitem>
	<listitem value="E">
		<listcell label="F. Others"/>
		<listcell label="17%"/>
	</listitem>
</listbox>

<separator bar="true"/>
Both H and V scroll
<listbox rows="4" width="80px">
	<listhead>
		<listheader width="50px" label="Population"/>
		<listheader label="%"/>
	</listhead>
	<listitem value="A">
		<listcell label="A. Graduate"/>
		<listcell label="20%"/>
	</listitem>
	<listitem value="B">
		<listcell label="B. College"/>
		<listcell label="23%"/>
	</listitem>
	<listitem value="C">
		<listcell label="C. High School"/>
		<listcell label="40%"/>
	</listitem>
	<listitem value="D">
		<listcell label="D. Junior High School"/>
		<listcell label="10%"/>
	</listitem>
	<listitem value="E">
		<listcell label="F. Others"/>
		<listcell label="17%"/>
	</listitem>
</listbox>

<separator bar="true"/>
<listbox rows="4" width="100%">
	<listhead>
		<listheader label="Population"/>
		<listheader label="%"/>
	</listhead>
	<listitem value="A">
		<listcell label="A. Graduate"/>
		<listcell label="20%"/>
	</listitem>
	<listitem value="B">
		<listcell label="B. College"/>
		<listcell label="23%"/>
	</listitem>
	<listitem value="C">
		<listcell label="C. High School"/>
		<listcell label="40%"/>
	</listitem>
	<listitem value="D">
		<listcell label="D. Junior High School"/>
		<listcell label="10%"/>
	</listitem>
	<listitem value="E">
		<listcell label="F. Others"/>
		<listcell label="17%"/>
	</listitem>
</listbox>
<separator bar="true"/>
<listbox>
	<listhead>
		<listheader label="Population"/>
		<listheader label="%"/>
	</listhead>
	<listitem value="A">
		<listcell><textbox value="A. Graduate"/></listcell>
		<listcell label="20%"/>
	</listitem>
	<listitem value="B">
		<listcell><checkbox label="B. College"/></listcell>
		<listcell><button label="23%"/></listcell>
	</listitem>
	<listitem value="C">
		<listcell label="C. High School"/>
		<listcell><textbox cols="8" value="40%"/></listcell>
	</listitem>
</listbox>
<listbox>
	<listhead>
		<listheader/>
		<listheader align="right"/>
	</listhead>
	<listitem value="X">
		<listcell label="X. Graduate"/>
		<listcell label="20%"/>
	</listitem>
	<listitem value="Y">
		<listcell label="Y. College"/>
		<listcell label="23%"/>
	</listitem>
	<listitem value="Z">
		<listcell label="Z. High School"/>
		<listcell label="40%"/>
	</listitem>
</listbox>
<radiogroup>
<radio checked="true" label="a"/>
<radio label="b"/>
</radiogroup>
</window>