Zk how to reach included .zul page component by id

Question

I can't reach component by id in the included .zul page. I have one main.zul with a controller and I need to get a component in included zul page through the java controller class, but it returns null.

I know the included method creates new id space but is there any way to get this component?

UPDATE

Here is my code:

the main zul page

<?page title="DealerVizard.zul"?>

<?page id="main" ?>

<?taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c"?>
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="./Dealer" ?>
<zk>
    <style src="/resources/css/default.css" />
    <window id="Dealer" class="index" 
        apply="com.i2i.prm.controller.IndexController">


        <div class="content" width="100%">

            <tabbox id="tb" forward="onSelect=onSelect">
                <tabs id="tabs">
                    <tab id="info" label="INFO" />
                    <tab id="create" label="CREATE" />
                    <tab id="edit" label="EDIT" />
                    <tab id="test" label="TEST PANEL(LIST BOX)" />

                </tabs>
                <tabpanels>
                    <tabpanel id="DealerInfo">
                        <include id="DealerInfoContent"
                            src="View/Dealer/DealerInfo.zul" />
                    </tabpanel>
                    <tabpanel id="DealerCreate">
                        <include id="DealerCreateContent"
                            src="View/Dealer/DealerCreate.zul" />
                    </tabpanel>
                    <tabpanel id="DealerEdit">
                        <include id="DealerEditContent"
                            src="View/Dealer/DealerEdit.zul" />
                    </tabpanel>

                    <tabpanel id="PagingListBox">
                        <include  id="PagingListBoxContent"  // Included here
                            src="View/TEST/PagingListBox.zul" />
                    </tabpanel>
                </tabpanels>
            </tabbox>
        </div>
    </window>

</zk>

PagingListBox.zul (Included page)

<?page id="list" ?>

<zk>

    <grid width="100%">

        <columns>
            <column label="" />

        </columns>
        <rows>
            <row>
                <listbox id="listModel" width="100%" height="100%"
                    visible="true" span="true" pagingPosition="top" rows="20"
                    selectedItem="@{DealerController.selected}"
                    model="@{DealerController.userList}"
                    forward="onSelect=//main/Dealer.onSelect">
                    <auxhead>
                        <auxheader colspan="1">
                            <textbox
                                value="@{DealerController.searchUser.name}" maxlength="9"
                                id="searchCO_ID" forward="onChanging=//main/Dealer.onSearch"
                                width="100%">
                            </textbox>
                        </auxheader>
                        <auxheader colspan="1">
                            <textbox
                                value="@{DealerController.searchUser.surname}" maxlength="21"
                                id="searchMSISDN" forward="onChanging=//main/Dealer.onSearch"
                                width="100%">
                            </textbox>
                        </auxheader>
                        <auxheader colspan="1">

                        </auxheader>

                    </auxhead>

                    <listhead>
                        <listheader label="Name"
                            sort="auto(UPPER(name))" />

                        <listheader label="Surname"
                            sort="auto(UPPER(surname))" />


                        <listheader label="Delete ?" />
                    </listhead>


                    <listitem self="@{each=USERLIST}">

                        <listcell>
                            <label value="@{USERLIST.user.name}" />
                            <textbox
                                value="@{DealerController.tmpUser.name}" visible="false" />
                        </listcell>
                        <listcell>
                            <label value="@{USERLIST.user.surname}" />
                            <textbox
                                value="@{DealerController.tmpUser.surname}" visible="false" />
                        </listcell>

                        <listcell>
                            <button label="Update"
                                forward="onClick=//main/Dealer.onUpdate" visible="false" />
                            <button image="icons/edit-delete.png"
                                label="Delete" forward="onClick=//main/Dealer.onDelete"
                                width="100%" disabled="true" />
                            <button label="Save"
                                forward="onClick=//main/Dealer.onSave" visible="false" />
                            <button label="Cancel"
                                forward="onClick=//main/Dealer.onCancel" visible="false" />
                        </listcell>
                    </listitem>
                </listbox>
                <paging id="pagingData" pageSize="20" />
            </row>

        </rows>
    </grid>
</zk>

IndexCOntroller.java

public class IndexController extends  GenericForwardComposer  {

    private List<User> userList = new ArrayList<User>() ;
    AnnotateDataBinder binder;
    Tabbox tb;
    Window Dealer;
    private int pageCount=0;

    @Override
    public void doAfterCompose(Component comp) throws Exception {
        // TODO Auto-generated method stub
        super.doAfterCompose(comp);
        comp.setVariable(comp.getId() + "Controller", this, true);
        binder = (AnnotateDataBinder) Dealer.getVariable("binder", true);


    System.out.println(Path.getComponent("//list/listModel"));
    }


    public IndexController() {
        // TODO Auto-generated constructor stub
    }
}

Answer 1

You can add in your IndexController.java:

...
   private Include DealerInfoContent;
...

this way you can access the included component within the parent composer.

(I would suggest to use camelCase ids for it, though).

Answer 2

Normally I wouldn't recommend using Path.getComponent() way to access other components as your application code becomes tightly coupled with your component structure in your view page. In your case you simplest way is to use AbstractComponent#getFellow(String compId) method so for eg.

Include inc = (Include) Dealer.getFellow("PagingListBoxContent");
Listbox listModel = (Listbox) inc.getFellow("listModel");
System.out.println(listModel);

So in future even if you insert any other component in your ZUML page before your listbox your code will still work.

UPDATE: BTW there was an interesting blogpost on this very topic on ZK blog recently

Answer 3

You can access any component in any other id space using zscript or java. if it is on the same page, but different window then (component B in window A):

Path.getComponent("/A/B");

if it is on a different page then (component B in window A on page P):

Path.getComponent("//P/A/B");

You can find documentation here: http://books.zkoss.org/wiki/ZK%20Developer%27s%20Reference/UI%20Composing/ID%20Space

Answer 4

if your include have id, you can use dollar sign to get the inner components

  <zk>
  <include id="inc" src="test.zul />

  </zk>

test.zul

    <zk>
    <label id="lab1" value="test1" />
    </zk>

you can use "inc$lab1" get the label in test.zul