Modal search dialogs. Part 1: SimpleSearchListBox skeleton.

A modal searchBox/selectionList which returns an object.

part 2 AdvancedSearchListBox
part 3 ExtendedSearchListBox

Imagine you have a form with several data fields and one or more of it will get their data by selecting it from a list. Such a list is often called as a DropDownList. With the zk framework you can solve this by using a listbox with mold=”select” and rows=”1″. The outstanding feature of such a component is that the ‘starter’ is in most cases a little button direct at the end of the input field and eveybody knows that he must click on this button to drop down the list. If you need some more options for limiting the count of records when the list appears you need an other way to solve this issue.

One possibility is to take a so called bandbox component and place all needed data limiting functionality with the listbox on it.

The second way we will shown in this article is to build a searchBox class with a modal window. For having the same behaviour we place a little starter button right next the input field that we whish to fill with a selected item from our SearchListBox. The advantage of our solution is that we can easily extended the SearchListBox for needed limitation components and logic features and get back an object of the needed bean from a window in a modal state.

For this requirement we let our SimpleSearchListBox class created by a private constructor that we called in a static way.

  • calling in code:

         Bean bean =;
         if ( bean != null ) {
           // do something

    The classfile:

    * Copyright 2010 the original author or authors.
    * This file is part of Zksample2.
    * Zksample2 is free software: you can redistribute it and/or modify
    * it under the terms of the GNU General Public License as published by
    * the Free Software Foundation, either version 3 of the License, or
    * (at your option) any later version.
    * Zksample2 is distributed in the hope that it will be useful,
    * but WITHOUT ANY WARRANTY; without even the implied warranty of
    * GNU General Public License for more details.
    * You should have received a copy of the GNU General Public License
    * along with Zksample2.  If not, see .
    package de.forsthaus.webui.util.searchdialogs;
    import org.apache.log4j.Logger;
    import org.zkoss.spring.SpringUtil;
    import org.zkoss.util.resource.Labels;
    import org.zkoss.zk.ui.Component;
    import org.zkoss.zk.ui.SuspendNotAllowedException;
    import org.zkoss.zk.ui.event.Event;
    import org.zkoss.zk.ui.event.EventListener;
    import org.zkoss.zk.ui.sys.ComponentsCtrl;
    import org.zkoss.zkex.zul.Borderlayout;
    import org.zkoss.zkex.zul.Center;
    import org.zkoss.zkex.zul.South;
    import org.zkoss.zul.Button;
    import org.zkoss.zul.ListModelList;
    import org.zkoss.zul.Listbox;
    import org.zkoss.zul.Listcell;
    import org.zkoss.zul.Listhead;
    import org.zkoss.zul.Listheader;
    import org.zkoss.zul.Listitem;
    import org.zkoss.zul.ListitemRenderer;
    import org.zkoss.zul.Window;
    import de.forsthaus.backend.model.Branche;
    import de.forsthaus.backend.service.BrancheService;
    * This class creates a modal window as a dialog in which the user
    * can search and select a branch object. By onClosing this box <strong>returns</strong>
    * an object or null.
    * The object can returned by selecting and clicking the OK button or by
    * DoubleClicking on an item from the list.
    * This is a basic skeleton which can be extended for paging or additionally
    * textboxes for inserting searchparameters.
    * call: Branch branch =;
    * @author bbruhns
    * @author sgerth
    public class BranchSimpleSearchListBox extends Window {
    private static final long serialVersionUID = 8109634704496621100L;
    private static final Logger logger = Logger.getLogger(BranchSimpleSearchListBox.class);
    private Listbox listbox;
    // the windows title
    private String _title = Labels.getLabel("message.Information.Search") + " " + Labels.getLabel("common.Branch");
    // 1. Listheader
    private String _listHeader1 = Labels.getLabel("common.Description");
    // the windows height
    private int _height = 400;
    // the windows width
    private int _width = 300;
    // the returned bean object
    private Branche branche = null;
    // The service from which we get the data
    private BrancheService brancheService;
    * The Call method.
    * @param parent
    *            The parent component
    * @return a BeanObject from the listBox or null.
    public static Branche show(Component parent) {
    return new BranchSimpleSearchListBox(parent).getBranche();
    * Private Constructor. So it can only be created with the static show() method.
    * @param parent
    private BranchSimpleSearchListBox(Component parent) {
    * Creates the components, sets the model and show the window as modal.
    private void createBox() {
    // Window
    this.setWidth(String.valueOf(_width) + "px");
    this.setHeight(String.valueOf(_height) + "px");
    // Borderlayout
    Borderlayout bl = new Borderlayout();
    Center center = new Center();
    South south = new South();
    // Button
    Button btnOK = new Button();
    btnOK.addEventListener("onClick", new OnCloseListener());
    // Listbox
    listbox = new Listbox();
    listbox.setStyle("border: none;");
    listbox.setItemRenderer(new SearchBoxItemRenderer());
    Listhead listhead = new Listhead();
    Listheader listheader = new Listheader();
    // Model
    listbox.setModel(new ListModelList(getBrancheService().getAlleBranche()));
    try {
    } catch (SuspendNotAllowedException e) {
    logger.fatal("", e);
    } catch (InterruptedException e) {
    logger.fatal("", e);
    * Inner ListItemRenderer class.
    final class SearchBoxItemRenderer implements ListitemRenderer {
    public void render(Listitem item, Object data) throws Exception {
    Branche branche = (Branche) data;
    Listcell lc = new Listcell(branche.getBraBezeichnung());
    item.setAttribute("data", data);
    ComponentsCtrl.applyForward(item, "onDoubleClick=onDoubleClicked");
    * If a DoubleClick appears on a listItem.
    * This method is forwarded in the renderer.
    * @param event
    public void onDoubleClicked(Event event) {
    if (listbox.getSelectedItem() != null) {
    Listitem li = listbox.getSelectedItem();
    Branche branche = (Branche) li.getAttribute("data");
    * Inner OnCloseListener class.
    final class OnCloseListener implements EventListener {
    public void onEvent(Event event) throws Exception {
    if (listbox.getSelectedItem() != null) {
    Listitem li = listbox.getSelectedItem();
    Branche branche = (Branche) li.getAttribute("data");
    // +++++++++++++++++++++++++++++++++++++++++++++++++ //
    // ++++++++++++++++ Setter/Getter ++++++++++++++++++ //
    // +++++++++++++++++++++++++++++++++++++++++++++++++ //
    public Branche getBranche() {
    return branche;
    private void setBranche(Branche branche) {
    this.branche = branche;
    public BrancheService getBrancheService() {
    if (brancheService == null) {
    brancheService = (BrancheService) SpringUtil.getBean("brancheService");
    return brancheService;
    public void setBrancheService(BrancheService brancheService) {
    this.brancheService = brancheService;

    Samples are hostet in the Zksample2 project on

    Have fun with it.

    Stephan Gerth


    PS: Help to prevent the global warming by writing cool software

    Leave a Reply

    You must be logged in to post a comment.