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 :
open new url in same tab
16guest172.71.134.14923nk51gApr 23, 2024 3:42:54 PMlinkDedalus Concerto CONC-5938
71guest188.114.102.11417kiilApr 23, 2024 1:10:17 PMlinkDedalus Concerto CONC-XXXX
70guest172.71.246.317kiilApr 23, 2024 10:43:35 AMlinkDedalus Concerto CONC-XXXX
69guest172.71.246.217kiilApr 23, 2024 10:42:44 AMlinkDedalus Concerto CONC-XXXX
68guest172.71.246.4917kiilApr 23, 2024 10:40:09 AMlinkScrapbook Concerto CONC-XXXX
67guest172.71.246.4817kiilApr 23, 2024 10:39:49 AMlinkScrapbook Concerto CONC-XXXX
66guest172.71.246.4917kiilApr 23, 2024 10:39:35 AMlinkScrapbook Concerto CONC-XXXX
65guest172.71.246.4917kiilApr 23, 2024 10:38:52 AMlinkScrapbook Concerto CONC-XXXX
64guest172.71.246.4917kiilApr 23, 2024 10:38:47 AMlinkScrapbook Concerto CONC-XXXX
63Giacomo Taormina172.71.114.2417kiilApr 23, 2024 10:19:11 AMlinkMVC Tutorial Demo
120guest162.158.167.1241ssg7sdMay 15, 2021 9:42:09 PMlinkresources
index.zulzul<window title="Search" width="600px" border="normal"
apply="pkg$.SearchController">
<hbox align="center">
Keyword:
<textbox id="keywordBox" />
<button id="searchButton" label="Search" image="http://www.zkoss.org/zkdemo/widgets/getting_started/img/search.png" />
</hbox>
<listbox id="carListbox" emptyMessage="No car found in the result" height="160px" style="margin-top:10px">
<listhead>
<listheader label="Model" />
<listheader label="Make" />
<listheader label="Price" width="20%"/>
</listhead>
<template name="model">
<listitem>
<listcell label="${each.model}"></listcell>
<listcell label="${each.make}"></listcell>
<listcell>$<label value="${each.price}" /></listcell>
</listitem>
</template>
</listbox>
<hbox style="margin-top:20px" id="detailBox" visible="false">
<image id="previewImage" style="padding:10px" />
<vbox>
<hlayout>
Model : <label id="modelLabel" style="font-weight:bold"/>
</hlayout>
<hlayout>
Make : <label id="makeLabel" style="font-weight:bold"/>
</hlayout>
<hlayout>
Price :
<span>$<label id="priceLabel" style="font-weight:bold"/></span>
</hlayout>
<label id="descriptionLabel" />
</vbox>
</hbox>
</window>
SearchController.javajavaimport java.util.List;
import org.zkoss.zk.ui.Component;
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.zul.Image;
import org.zkoss.zul.Label;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Textbox;
public class SearchController extends SelectorComposer<Component> {
private static final long serialVersionUID = 1L;
@Wire
private Textbox keywordBox;
@Wire
private Listbox carListbox;
@Wire
private Label modelLabel;
@Wire
private Label makeLabel;
@Wire
private Label priceLabel;
@Wire
private Label descriptionLabel;
@Wire
private Image previewImage;
@Wire
private Component detailBox;
private CarService carService = new CarServiceImpl();
@Listen("onClick = #searchButton")
public void search(){
String keyword = keywordBox.getValue();
List<Car> result = carService.search(keyword);
carListbox.setModel(new ListModelList<Car>(result));
}
@Listen("onSelect = #carListbox")
public void showDetail(){
detailBox.setVisible(true);
Car selected = carListbox.getSelectedItem().getValue();
previewImage.setSrc(selected.getPreview());
modelLabel.setValue(selected.getModel());
makeLabel.setValue(selected.getMake());
priceLabel.setValue(selected.getPrice().toString());
descriptionLabel.setValue(selected.getDescription());
}
}
Car.javajava/** Car Bean **/
public class Car {
private Integer id;
private String model;
private String make;
private String preview;
private String description;
private Integer price;
public Car() {
}
public Car(Integer id, String model, String make, String description, String preview, Integer price) {
this.id = id;
this.model = model;
this.make = make;
this.preview = preview;
this.description = description;
this.price = price;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getMake() {
return make;
}
public void setMake(String make) {
this.make = make;
}
public String getPreview() {
return preview;
}
public void setPreview(String preview) {
this.preview = preview;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public Integer getPrice() {
return price;
}
public void setPrice(Integer price) {
this.price = price;
}
public String getModel() {
return model;
}
public void setModel(String model) {
this.model = model;
}
}CarService.javajavaimport java.util.List;
public interface CarService {
/**
* Retrieve all cars in the catalog.
* @return all cars
*/
public List<Car> findAll();
/**
* search cars according to keyword in name and company.
* @param keyword for search
* @return list of car that match the keyword
*/
public List<Car> search(String keyword);
}CarServiceImpl.javajava
import java.util.LinkedList;
import java.util.List;
public class CarServiceImpl implements CarService{
//data model
private List<Car> carList= new LinkedList<Car>();
private int id = 1;
//initialize book data
public CarServiceImpl() {
carList.add(
new Car(id++,
"Primera",
"Nissan",
"The Nissan Primera was produced between 2002 and 2008. It was available as a 4-door sedan or a 5-door hatchback or estate."+
" The entry-level 1.6-liter petrol feels underpowered for a large car. The 1.8-liter petrol is keen, the refined 2.0-liter unit is the star performer. An improved 2.2-liter turbodiesel performs well, but is only relatively economical, as it's competitors in this class with similar characteristics offer even lower fuel consumption.",
"http://www.zkoss.org/zkdemo/widgets/getting_started/img/car1.png",
23320));
carList.add(
new Car(id++,
"Cefiro",
"Nissan",
"The Nissan Cefiro is an intermediate-size automobile range sold in Japan and other countries. It was available only as a 4 door sedan. A large proportion were equipped with automatic transmissions. Originally marketed towards the Japanese salaryman the top model used the same engine as found in the R32 Nissan Skyline, a 2 litre turbo charged 6 cylinder engine capable of just over 200 hp (150 kW). Other variants came with other versions of the Nissan RB engine. Brand new, the Cefiro was slightly more expensive than the equivalent Nissan Skyline.",
"http://www.zkoss.org/zkdemo/widgets/getting_started/img/car2.png",
38165));
carList.add(
new Car(id++,
"Camry",
"Toyota",
"The Toyota Camry is a midsize car manufactured by Toyota in Georgetown, Kentucky, USA; as well as Australia; and Japan. Since 2001 it has been the top selling car in the United States.The Holden equivalents were not successful even though they came from the same factory as the Camry. Since 2000 Daihatsu has sold a Camry twin named the Daihatsu Altis. The name comes from the English phonetic of the Japanese word \"kan-muri,\" which means \"crown.\"",
"http://www.zkoss.org/zkdemo/widgets/getting_started/img/car3.png",
24170));
carList.add(
new Car(id++,
"Century",
"Toyota",
"The Toyota Century is a large four-door limousine produced by Toyota mainly for the Japanese market. Production of the Century began in 1967 and the model received " +
"only minor changes until redesign in 1997. This second-generation Century is still sold in Japan. The Century is produced in limited numbers and is built " +
"in a \"nearly hand-made\" fashion. It is often used by royalty, government leaders, and executive businessmen. Although the Century is not exported outside Japan in large numbers, it is used frequently by officials stationed in overseas Japanese offices. In contrast to other luxurious cars (such as the Maybach or a Rolls Royce), the Century has not been positioned and marketed as a sign of wealth or excess. Instead, the Century projects an image of conservative achievement.",
"http://www.zkoss.org/zkdemo/widgets/getting_started/img/car4.png",
28730));
carList.add(
new Car(id++,
"Sigma",
"Mitsubishi",
"The third-generation of Japanese car Mitsubishi Galant, dating from 1976, was divided into two models: the Galant Sigma (for the sedan and wagon) and the Galant Lambda (the coupe). The former was sold in many markets as the Mitsubishi Galant (without the word 'Sigma') and in Australia as the Chrysler Sigma (until 1980, after which it became the Mitsubishi Sigma). Strangely, in New Zealand it was badged as 'Galant Sigma' but colloquially referred to as the 'Sigma', a name it formally adopted after 1980.",
"http://www.zkoss.org/zkdemo/widgets/getting_started/img/car5.png",
54120));
carList.add(
new Car(id++,
"Challenger",
"Mitsubishi",
"The Mitsubishi Challenger, called Mitsubishi Pajero Sport in most export markets, Mitsubishi Montero Sport in Spanish-speaking countries (including North America), Mitsubishi Shogun Sport in the UK and Mitsubishi Nativa in Central and South Americas (the Challenger name was also used in Australia), is a medium sized SUV built by the Mitsubishi Motors Corporation. It was released in 1997, and is still built as of 2006, although it's no longer available in its native Japan since the end of 2003.",
"http://www.zkoss.org/zkdemo/widgets/getting_started/img/car6.png",
58750));
carList.add(
new Car(id++,
"Civic",
"Honda",
"The eighth generation Honda Civic is produced since 2006. It is available as a coupe, hatchback and sedan. Models produced for the North American market have a different styling."+
" At the moment there are four petrol engines and one diesel developed for this car. The 1.4-liter petrol is more suitable for the settled driving around town. The 1.8-liter petrol, developing 140 hp is a willing performer. The 2.2-liter diesel is similar to the Accord's unit. It accelerates rapidly and is economical as well. The Honda Civic is also available with a hybrid engine. In this case engine is coupled with an automatic transmission only. The 2.0-liter model is available with the paddle shift gearbox.",
"http://www.zkoss.org/zkdemo/widgets/getting_started/img/car1.png",
17479));
carList.add(
new Car(id++,
"New Beetle",
"Volkswagen",
" The Volkswagen Beetle is produced since 1998. It is available as a coupe or convertible."+
" The VW Beetle is powered by a wide range of engines, including two 1.9-liter turbodiesels, and turbocharged 1.8-liter petrol. There is also a 3.2-liter RSI available for the range topper."+
" The new Beetle has nothing in common with the rear-engined original, except the 'retro' design. It is based on the VW Golf and has the same solid build quality.",
"http://www.zkoss.org/zkdemo/widgets/getting_started/img/car2.png",
67540));
carList.add(
new Car(id++,
"Golf V",
"Volkswagen",
"The Volkswagen Golf V is produced since 2003. There is a wide range of fine and reliable engines. The best choice would be 1.6-liter FSI direct injection petrol with 115 hp or 2.0-liter turbodiesel with 150 hp. The last mentioned features an outstanding fuel economy for it's capacity and acceleration speed, although is a bit noisy. The strongest performer is a 2.0-liter GTI, delivering 200 hp, which continues the Golf's hot hatch traditions."+
" Steering is sharp. The car is stable at speed and easily controlled as the power steering gets weightier with speed, unfortunately it does not give enough feedback to the driver. The ride is a bit firm in town, as the reliability of suspension was preferred to the comfort. It is a common feature of all VW Golf's.",
"http://www.zkoss.org/zkdemo/widgets/getting_started/img/car3.png",
78200));
carList.add(
new Car(id++,
"Neon",
"Chrysler",
" This car is sold as the Dodge Neon in the United States and as Chrysler Neon for export only. It is a second generation Neon produced since 2000."+
" There is a choice of three petrol engines. The basic 1.6-liter petrol is the same unit found on the MINI. The top of the range is a 2.0-liter engine, providing 133 hp, besides acceleration is a weak point of all Neons.",
"http://www.zkoss.org/zkdemo/widgets/getting_started/img/car4.png",
85400));
}
public List<Car> findAll(){
return carList;
}
public List<Car> search(String keyword){
List<Car> result = new LinkedList<Car>();
if (keyword==null || "".equals(keyword)){
result = carList;
}else{
for (Car c: carList){
if (c.getModel().toLowerCase().contains(keyword.toLowerCase())
||c.getMake().toLowerCase().contains(keyword.toLowerCase())){
result.add(c);
}
}
}
return result;
}
}