ZK ID Conflict and Component IdSpace

Introduction

From official site:
An ID space is a subset of components of a desktop. The uniqueness is guaranteed only in the scope of an ID space. Thus, developers could maintain the subset of components separately without the need to worry if there is any conflicts with other subsets.
...
Window is a typical component that is an ID space. ... Thus, you could use a window as the topmost component to group components. This way developers only need to maintain the uniqueness of each subset separately.

This article will present the ID conflict problem and how to prevent it by ID space

Pre-request

Regarding setting up the environment to run ZK, please refer to http://ben-bai.blogspot.tw/2012/06/zk-quick-start.html

Test Code and Result

id_conflict_in_zul_page.zul

There are two textbox with id "tbx" in this page, this will cause ID conflict

<zk>
    <button label="test">
        <attribute name="onClick">
            tbx.setValue("button 'test' is clicked");
        </attribute>
    </button>
    <textbox id="tbx" />
    <button label="test2">
        <attribute name="onClick">
            tbx.setValue("button 'test2' is clicked");
        </attribute>
    </button>
    <!-- the id "tbx" already used in previous textbox,
        will throw an org.zkoss.zk.ui.UiException
        with respect to "Not unique in ID space" -->
    <textbox id="tbx" />
</zk>

The result of this page:

use_idspace_to_prevent_id_conflict.zul

There are also two textbox with id "tbx" in this page, but they are under different window component so will not cause ID conflict.

<zk>
    <!-- both buttons call tbx.setValue(...) when clicked,
            they will set the value into the component with id "tbx"
            under the same IdSpace -->
    <window>
        <button label="test">
            <attribute name="onClick">
                tbx.setValue("button 'test' is clicked");
            </attribute>
        </button>
        <textbox id="tbx" />
    </window>
    <window>
        <button label="test2">
            <attribute name="onClick">
                tbx.setValue("button 'test2' is clicked");
            </attribute>
        </button>
        <!-- the id "tbx" already used in previous textbox,
            but the previous textbox is in different IdSpace
            (under different window), the page will be
            rendered correctly -->
        <textbox id="tbx" />
    </window>
</zk>

The result of this page after buttons clicked:

Reference

ZK Developer's Reference/UI Composing/ID Space
http://books.zkoss.org/wiki/ZK_Developer's_Reference/UI_Composing/ID_Space

Download

Files at github
https://github.com/benbai123/ZK_Practice/tree/master/Components/projects/Components_Practice/WebContent/folders/idspace_test