Suggested case list:
Using timer to refresh a grid
383guest172.69.33.12125nk0uiMay 7, 2020 7:23:47 AMlinkuser model to move item to another listbox
120guest162.158.193.148d0n3krApr 2, 2020 5:28:28 AMlinkDisabled list item row passed to VM-1981
296fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:44 PMlinkDisabled list item row passed to VM-1981
295fatih123160.83.36.13025nk0uiFeb 13, 2018 4:25:16 PMlinkDisabled list item row passed to VM-1981
294fatih123160.83.36.13225nk0uiFeb 13, 2018 3:30:44 PMlinkgrid sample with ListModel/RowRenderer
816guest80.82.2.1312vah9ajFeb 21, 2017 11:42:21 AMlinkgrid sample with ListModel/RowRenderer
809guest175.98.113.1622vah9ajJan 26, 2017 9:19:33 AMlinkgrid sample with ListModel/RowRenderer
196guest79.185.142.402vah9ajApr 26, 2014 10:53:57 PMlinkgrid sample with ListModel/RowRenderer
195guest79.185.142.402vah9ajApr 26, 2014 10:53:54 PMlinkgrid sample with ListModel/RowRenderer
194guest79.185.142.402vah9ajApr 26, 2014 10:53:51 PMlinkgrid sample with ListModel/RowRenderer
193guest79.185.142.402vah9ajApr 26, 2014 10:53:48 PMlinkgrid sample with ListModel/RowRenderer
192guest79.185.142.402vah9ajApr 26, 2014 10:53:44 PMlinkgrid sample with ListModel/RowRenderer
191guest79.185.142.402vah9ajApr 26, 2014 10:53:40 PMlinkHierarchy table without using ZK PE/EE
1aaknai151.28.135.2131s871daJul 29, 2013 11:02:46 PMlinkgrid sample with ListModel/RowRenderer
128aaknai151.28.135.2132vah9ajJul 29, 2013 7:20:00 PMlinkuser model to move item to another listbox
1TonyQ114.25.109.94d0n3krApr 21, 2012 10:43:27 AMlinkUsing timer to refresh a grid
1TonyQ220.133.44.3725nk0uiFeb 17, 2012 3:17:34 AMlinkFire a event from child iframe
1TonyQ220.133.44.372eupjotFeb 3, 2012 5:04:52 AMlinkTextbox input restriction sample
1TonyQ72.21.245.2431b3nlr0Dec 20, 2011 10:09:10 AMlinkTest web core taglib in ZUL
1TonyQ198.203.175.175ofqkemDec 17, 2011 3:36:08 AMlinkLatest 10 Fiddles :
ZK 8 x EL 3.0
4guest172.71.215.28smcii2Mar 13, 2025 10:17:02 AMlinkZK 8 x EL 3.0
3guest172.71.215.27smcii2Mar 13, 2025 10:16:37 AMlinkZK 8 x EL 3.0
2guest172.71.215.28smcii2Mar 13, 2025 10:16:23 AMlinkgrid deselect
1guest172.71.155.44d0eqcvMar 13, 2025 8:30:45 AMlinkAnother new ZK fiddle
22guest172.71.155.4320846g3Mar 13, 2025 8:24:21 AMlinkAnother new ZK fiddle
21guest172.71.155.4420846g3Mar 13, 2025 8:23:21 AMlinkAnother new ZK fiddle
20guest172.71.155.4420846g3Mar 13, 2025 8:22:52 AMlinkAnother new ZK fiddle
19guest172.71.155.4420846g3Mar 13, 2025 8:22:31 AMlinkAnother new ZK fiddle
18guest172.71.155.4420846g3Mar 13, 2025 8:22:18 AMlinkAnother new ZK fiddle
17guest162.158.167.4320846g3Mar 13, 2025 8:00:27 AMlinkZK-4380
1JamesChu162.158.90.105iunt15Dec 7, 2023 8:04:21 AMlinkresources
index.zulzul<?xml version="1.0" encoding="UTF-8"?>
<!--
F90-ZK-4380.zul
Purpose:
Description:
History:
Mon Sep 20 15:40:43 CST 2019, Created by rudyhuang
Copyright (C) 2019 Potix Corporation. All Rights Reserved.
-->
<zk xmlns:w="client">
<label multiline="true">
Test single selection
1. Open the searchbox, select the first item
2. The selectedItems will be only one item you chose. And the item will be highlighted.
3. Open the searchbox, select the first item again
4. The selectedItems will be empty. And the item won't be highlighted.
Test multiple selection
1. Click multiple and autoclose button.
2. Open the searchbox and select the first 4 items
3. The selectedItems will be 5 items. And these items will be highlighted and checked.
4. Open the searchbox and unselect the first item
5. The selectedItems will be 4 items. And these items will be highlighted and checked.
Test search
1. Open the searchbox
2. Input "9" in the textbox
3. You can see items containing "9" only.
4. Input "999". You can see no items.
5. Empty the textbox. You should see all items.
Test keyboard navigation
1. Focus the searchbox.
2. Pressing Up or Down key can open the searchbox.
3. Pressing Up/Down/PageUp/PageDown/Home/End keys can move the highlighted item.
4. Pressing Enter key can select/unselect the highlighted item.
5. Pressing Shift + Enter can select/unselect items in bulk (from last select/unselect item to the highlighted item)
3. Pressing Esc key can close the searchbox.
Properties
- Disabled
1. Click disabled button
2. The searchbox should be greyed. It shouldn't be focused and opened with a click.
3. Click disabled button again. It should be working again (focus, open).
- Open
1. Click open button. The popup should be opened regardless disabled or not.
- Autoclose
1. Click autoclose button.
2. Open the searchbox and click an item. The popup won't be closed after clicked an item.
3. Click autoclose button again.
4. Open the searchbox and click an item. The popup will be closed after clicked an item.
</label>
<div apply="pkg$.TestComposer">
<vlayout>
<textbox />
<searchbox id="myComp" hflex="1" multiple="false" autoclose="true"
open="false" disabled="false" onAfterRender='Clients.log("loaded")'>
<template name="model">
<html><![CDATA[
<i class="z-icon-globe"></i>
<span class="name">${each}</span>
<span class="description">yoyoyo</span>
]]></html>
</template>
</searchbox>
<combobox hflex="1" />
</vlayout>
<vlayout>
<hlayout>
<button label="disabled" onClick="myComp.disabled = !myComp.disabled" />
<button label="open" onClick="myComp.open = !myComp.open" />
<button label="multiple" id="modelMultiple" />
<button label="autoclose" onClick="myComp.autoclose = !myComp.autoclose" />
<button label="invalidate" onClick="myComp.invalidate()" />
<button label="rerender" w:onClick="zk.$('@searchbox').rerender()" />
<button label="serialize/deserialize" id="serDeser" />
</hlayout>
<hlayout>
<button label="add item" id="addItem" />
<button label="remove item" id="removeItem" />
<button label="change item" id="changeItem" />
<button label="add selItem" id="addSelItem" />
<button label="selectedItems" onClick="alert(myComp.selectedItems)" />
<button label="selectedItem" onClick="alert(myComp.selectedItem)" />
<button label="setModel" id="setModel" />
<button label="setModel set" id="setModelSet" />
<button label="setModel null" id="setModelNull" />
<button label="setListSubModel" id="setListSubModel" />
</hlayout>
</vlayout>
</div>
<div height="1000px"/>
</zk>
TestComposer.javajavaimport java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.ObjectInputStream;
import java.io.ObjectOutputStream;
import java.security.SecureRandom;
import java.time.LocalTime;
import java.util.Arrays;
import java.util.HashSet;
import java.util.ListIterator;
import java.util.Set;
import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.InputEvent;
import org.zkoss.zk.ui.select.SelectorComposer;
import org.zkoss.zk.ui.select.annotation.Listen;
import org.zkoss.zk.ui.select.annotation.Wire;
import org.zkoss.zk.ui.sys.ComponentCtrl;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zkmax.zul.Searchbox;
import org.zkoss.zul.ListModel;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.ListModelSet;
import org.zkoss.zul.ListModels;
import org.zkoss.zul.ext.Selectable;
public class TestComposer extends SelectorComposer<Component> {
@Wire
private Searchbox<String> myComp;
private ListModelList<String> model;
public void doAfterCompose(Component comp) throws Exception {
super.doAfterCompose(comp);
model = new ListModelList<>();
for (int i = 1; i <= 100; i++) {
model.add("Item " + i);
}
((Selectable<String>) model).addToSelection("Item 99");
myComp.setModel(model);
myComp.setItemConverter(obj -> String.format("Selected %d items: %s", obj.size(), obj.toString()));
}
@Listen("onSearching=#myComp")
public void handleOnSearching(InputEvent event) {
Clients.log(String.format("You listen onSearching: %s prev: %s value: %s pos: %d",
event.getTarget(), event.getPreviousValue(), event.getValue(), event.getStart()));
}
@Listen("onClick=#modelMultiple")
public void handleModelMultiple() {
Selectable m = (Selectable) myComp.getModel();
m.setMultiple(!m.isMultiple());
}
@Listen("onClick=#addItem")
public void handleAddItem() {
model.add(0, LocalTime.now().toString());
}
@Listen("onClick=#removeItem")
public void handleRemoveItem() {
model.remove(model.getSize() - 1);
}
@Listen("onClick=#changeItem")
public void handleChangeItem() {
final ListIterator<String> listIterator = model.listIterator();
if (listIterator.hasNext()) {
listIterator.next();
listIterator.set(LocalTime.now().toString());
}
}
@Listen("onClick=#addSelItem")
public void handleAddSelItem() {
final int size = model.getSize();
final SecureRandom rng = new SecureRandom();
final Set<String> selection = new HashSet<>();
for (int i = 0; i < 3; i ++) {
selection.add(model.get(rng.nextInt(size)));
}
model.setMultiple(true);
model.setSelection(selection);
}
@Listen("onClick=#setModel")
public void handleSetModel() {
model = new ListModelList<>(Arrays.asList("1", "2", "3", "4"));
myComp.setModel(model);
//((Selectable<String>) model).addToSelection("2");
}
@Listen("onClick=#setModelSet")
public void handleSetModelSet() {
Set<String> newset = new HashSet<>();
ListModelSet<String> modelSet = new ListModelSet<>(newset, true);
myComp.setModel(modelSet);
modelSet.addAll(Arrays.asList("1", "2", "3", "4"));
}
@Listen("onClick=#setModelNull")
public void handleSetModelNull() {
myComp.setModel(null);
}
@Listen("onClick=#setListSubModel")
public void handleSetListSubModel() {
ListModel<String> subModel = ListModels.toListSubModel(model);
handleAddSelItem();
myComp.setModel(subModel);
}
byte[] _bytes;
@Listen("onClick=#serDeser")
public void doSerialize() {
try {
doSerialize0(myComp);
doDeserialize0(myComp);
} catch (Exception x) {
x.printStackTrace();
Clients.log("error :" + x.getClass() + "," + x.getMessage());
}
}
public void doSerialize0(Component comp) throws Exception {
((ComponentCtrl) comp).sessionWillPassivate(comp.getPage()); // simulate
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ObjectOutputStream oos = new ObjectOutputStream(baos);
oos.writeObject(comp);
oos.close();
baos.close();
_bytes = baos.toByteArray();
}
public void doDeserialize0(Component comp) throws Exception {
ByteArrayInputStream bais = new ByteArrayInputStream(_bytes);
ObjectInputStream ois = new ObjectInputStream(bais);
Component newComp = (Component) ois.readObject();
Component parent = comp.getParent();
Component ref = comp.getNextSibling();
comp.detach();
ois.close();
bais.close();
parent.insertBefore(newComp, ref);
//for load component back.
((ComponentCtrl) newComp).sessionDidActivate(newComp.getPage()); // simulate
myComp = (Searchbox<String>) newComp; // replace the old one
Clients.log("done deserialize: " + _bytes.length);
}
}