A couple weeks ago, I was working on a customer’s support about how to reduce memory footprint of a ZUL page. At the time, I found it odd that the ZUL page was pretty simple but it retains plenty of ZK components on the server. After some research, we found the issue was caused by a form that requires user to fill out his/her contact information, such as address, phone, age, account, and so on. The page contains a lot of dropdown lists for the form and the dropdown lists are implemented using ZK’s full featured Listbox, which includes Listitem and Listcell for each row. Thus, an idea came up that we should implement a lightweight dropdown list to fulfill such business requirement and make it support Databinding and Renderer features.

Version: 0.8.0

ZK Version: applicable to 5.0.4 later

Usage:

Here is a normal example with a onSelect event.

As you can see, we don’t provide a set of child components for the selectbox, so we can only retrieve the selection index from event.getData() and put a ListModel(model) for the seletbox to render the data. By default, the renderer only renders the string value from its data object(so-called toString()).

With Databinding:

Here is a sample snippet,

	org.zkoss.zul.OptionRenderer render = new org.zkoss.zul.OptionRenderer() {
		public String render(Object data) throws Exception {
			return ((org.zkoss.zkdemo.test2.BizService.Repository)data).getName();
		}
	}

As you can see, here we use the selectedIndex to bind the data object for the databinding and implement a simple OptionRenderer to render the text from the data object for each row.

Download:

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

25 Responses to “A Lightweight Dropdown List – Selectbox”

  1. matteo respogliati says:

    Great solution to avoid waste of server memory!

  2. Madruga says:

    What is the difference between using this new component and listbox with select mold?

  3. Jumper Chen says:

    For example in Listbox with select mold.
    If you have 50 items to show the dropdown list. And it will create 101 Java Objects. 1 (Listbox) + 50 (Listitems) + 50 (Listcells) = 101 (Java Objects).

    But if you use the selectbox, then it will only create ONE Java Object at server side.

  4. Jumin says:

    Would it be made available in standard ZK libraries? If yes, when?

  5. Jumper Chen says:

    It will be part of ZK 6.

  6. Darius says:

    Would this also speed up the rendering of the page?

  7. Jumper Chen says:

    Yes, it will.

  8. xyu says:

    Great!!!

  9. Darius says:

    We’ve used it to replace many simple drop down lists, and it works great. Thanks!

    One question: it looks like it does not support multiple selection. Is that true?

  10. Jumper Chen says:

    Yes, so far it doesn’t support yet.

  11. sowmiya says:

    listModel.get(event.getData()) in a class file (.java) shows error, cannot find symbol event.

    If i change “event” to “Event” shows, non-static method getData() cannot
    be used from a static context. But the method am using is non-static only

    Am using zk 5.0.5

  12. sowmiya says:

    Do combobox too will create more number of JAVA objects w.r.t the number of comboitems appended?

  13. Jumper Chen says:

    @sowmiya,

    The event is passed by the event listener. For example,
    public void onEvent(Event event) {

    }

    and the combobox has the same issue too.

  14. Nick says:

    Is there an ETA for implementing multiple selection for Selectbox?
    Thank you,
    Nick.

  15. Jumper Chen says:

    Hi Nick,

    What’s the ETA meaning?

    Regards,
    Jumper

  16. Sundar says:

    Hi Jumper,

    Somehow I couldn’t get an example for Selectbox adding option – id and name. Both id and name need to have different values like below.

    Could you give a example for that?

    Thanks,
    Sundar

  17. Sundar says:

    Hello Jumper,

    Somehow I couldn’t get an example for Selectbox adding option – id and name. Both id and name need to have different values like below.

    Could you give a example for that?

    Thanks,
    Sundar

  18. drivasab says:

    Hello Jumper and Sundar,

    I love this component but I had some problems with it. I’m using ZK 5.0.11

    setDisabled doesn’t work for me, so I’m using Clients.evalJavaScript to disable/enable the HTML select element

    getSelectedItem only work if the composer implements onSelect, even if it’s empty, like “public void onSelect$selectbox() { }”

    These days I’ve downloaded the source code from trunk and I’ve been modifying it. Is the first time that I see the code of a component, but I’ve fixed the problems and, by chance, I’ve also implemented multiple selection, size and added a Zclass “z-selectbox” (z-selectbox-disd when is disabled)

    Is there any way to upload it to somewhere so it can be tested?

    Sorry for my English, I’m Spanish 😛

  19. Neil Lee says:

    Hello Sundar,

    selectbox requires a ListModel for the options. You could define another class to contain the data for each option like below.

    import org.zkoss.zul.*;

    class Item {
    private int _id;
    private String _name;

    Item() {
    }

    Item(int id, String name) {
    this._id = id;
    this._name = name;
    }

    public int getId() {
    return _id;
    }

    public void setId(int id) {
    this._id = id;
    }

    public String getName() {
    return _name;
    }

    public void setName(String name) {
    this._name = name;
    }

    public String toString() {
    return _id + “: ” + _name;
    }
    }

    ListModel model = new SimpleListModel(new Item[] {
    new Item(1, “One”), new Item(2, “Two”), new Item(3, “Three”)
    });

  20. Neil Lee says:

    Way to go, drivasab.

    No need to upload the code for testing. Just compile your modifications into a jar, and include that in a ZK Application.

  21. drivasab says:

    I know, Neil.

    I’ve compiled and added the dependency into my project (Maven). Even I also use a item similar to yours (String label + Object value, in my case).

    I said to upload the modification for if someone wants to use it (Or test it, I’m not using multilpe selection in my application)

  22. Sundar says:

    Thanks a bunch, Neil, I’ll give a shot today.

  23. Sundar says:

    It worked fine. Thanks so much, Neil

  24. Sundar says:

    I am trying to get Selected Value of selectbox in javascript. Even though I get handle and get selected index, I don’t know how to get the selected-value based on the index from the model.

    Below is the code.

    import att.raptor.system.fusion.zk.model.Item;
    Item[] userIdName = {new Item(“1”, “Dog”), new Item(“2”, “Cat”), new Item(“3”, “Cow”) };
    ListModelList modelA = new ListModelList(userIdName);

    function selectFn() {
    var select = zk.Widget.$(‘$listSelect’);
    alert(select.getSelectedIndex());
    }

    Any help is appreciated,

    Thanks,
    Sundar

  25. Sundar says:

    I have figured out. Want to share to the folks who are interested in.

    function selectFn() {
    var select = zk.Widget.$(‘$listSelect’);
    alert(select.getSelectedIndex());
    alert(select.items[select.getSelectedIndex()]);
    }

Leave a Reply