Skip to main content

Components as a data source

The listbox component has a dual role, as a data consumer and as a data source. We've seen how listbox component can act as a data consumer in the previous pages. No we'll see how is it acting as a data source.

Any zul component can use the listbox path as the left handside member of a bind expression. In such a case, the result would be the same than binding such components to the xpath relative to the listitem currently selected at the list box. When no listbox element is selected, the resulting XPath will be void, and thus the component will be disabled. When the selected listitem changes, automatically the listbox bound components will c

As an example, the following code will show the name of the selected country, allowing the user to modify it.

<?xml version="1.0" encoding="UTF-8"?>
<?page title="ZKIB Demo" ?>
<zk>
    <xmldatasource id="mydata" src="/my-data.xml" />
        <vbox>
        <form dataPath="/mydata:/title">
            <label bind="/@name"/>
            <textbox bind="/@name"/>
        </form>
        <listbox id="countries" dataPath="/mydata:/country">
            <listhead>
                <listheader label="Abbr"/>
                <listheader label="Name"/>
            </listhead>
            <dataitem bind="/@abbreviation">
                <listcell bind="/@abbreviation" />
                <listcell bind="/@name"/>
            </dataitem>
        </listbox>
        <hbox>
            <label value="Active country:"/>
            <textbox bind="/countries:/@name"/>
        </hbox>
        <button label="Update"/>
    </vbox>
</zk>

Additionally, you can display a grid with the names of the cities of the selected country. Using the previous listbox as the data source, the component synchronization is automatic:

<?xml version="1.0" encoding="UTF-8"?>
<?page title="ZKIB Demo" ?>
<zk>
    <xmldatasource id="mydata" src="/my-data.xml" />
        <vbox>
        <form dataPath="/mydata:/title">
            <label bind="@name"/>
            <textbox bind="@name"/>
        </form>
        <listbox id="countries" dataPath="/mydata:/country">
            <listhead>
                <listheader label="Abbr" />
                <listheader label="Name"/>
            </listhead>
            <dataitem bind="@abbreviation">
                <listcell bind="@abbreviation" />
                <listcell bind="@name" />
            </dataitem>
        </listbox>
        <hbox>
            <label value="Active country:"/>
            <textbox bind="/countries:/@name"/>
        </hbox>
        <grid dataPath="/countries:/city">
            <columns>
                <column label="City"/>
            </columns>
            <datarow>
                <label bind="@name" />
            </datarow>
        </grid>                      
        <button label="Update"/>
    </vbox>
</zk>

 

Back to top