ZK Generic Tree Event Handler

Question

I have an application that using MVC pattern, ZK 8 version and Tree component as a menu. The application itself using border layout and Tabbox as a dynamic container. The menu tree code is adding tab when it is clicked. I have successfuly do this, but in an inefficient manner. Is there an efficient alternatives or ways to refactor?

The codes are:

<zk>
<style src="css/style.css" />
<borderlayout>
    <north>
        <div height="120px"
            style="background:#3461b2
            url('images/banner.jpg')no-repeat;" />

    </north>

    <west title="Selamat Datang - ${sessionScope.userCredential.name}"
    size="22%" autoscroll="true" splittable="true" collapsible="true"
    vflex="max">
    <tree id="menuTree">
    <treechildren>
        <treeitem label="Daily">
        <treechildren>
        <treeitem label="Report 1">
         <attribute name="onClick">
<![CDATA[
Tab newTab;
if (mainTabbox.getTabs().hasFellow("Report 1")) {
    newTab = (Tab) mainTabbox.getTabs().getFellow("Report 1");
    mainTabbox.setSelectedTab(newTab);
} else {
    newTab = new Tab("Report 1");
    newTab.setId("Report 1");
    newTab.setClosable(true);
    newTab.setSelected(true);
    Tabpanel tb = new Tabpanel();
    Executions.createComponents("daily/report1.zul", tb, null);
    mainTabbox.getTabs().appendChild(newTab);
    mainTabbox.getTabpanels().appendChild(tb);
}
     ]]>
      </attribute>
    </treeitem>
    <treeitem label="Logs">
            <attribute name="onClick">
        <![CDATA[
Tab newTab;
if (mainTabbox.getTabs().hasFellow("Logs")) {
    newTab = (Tab) mainTabbox.getTabs().getFellow("Logs");
    mainTabbox.setSelectedTab(newTab);
} else {
    newTab = new Tab("Logs");
    newTab.setId("Logs");
    newTab.setClosable(true);
    newTab.setSelected(true);
    Tabpanel tb = new Tabpanel();
    Executions.createComponents("Logs.zul", tb, null);
    mainTabbox.getTabs().appendChild(newTab);
    mainTabbox.getTabpanels().appendChild(tb);
}
      ]]>
      </attribute>
    </treeitem>
     ...
     ...
     <center vflex="min" autoscroll="true">
       <div height="100%">
    <tabbox id="mainTabbox">
    <tabs id="tabs">
    <tab id="mainTab" label="Main" />
    </tabs>
    <tabpanels>
        <tabpanel>
        <include src="/charts/mainChart.zul" />
        </tabpanel>
                </tabpanels>
            </tabbox>
        </div>
    </center>
       ....

Answer 1

I found the solution by using onSelect listener attribute:

    <tree id="menuTree">
            <attribute name="onSelect">
            <![CDATA[
    Treeitem item = self.getSelectedItem();
    if (item != null) {
    Tab newTab;
        if (mainTabbox.getTabs().hasFellow(item.getLabel())) {
            newTab = (Tab) mainTabbox.getTabs().getFellow(item.getLabel());
            mainTabbox.setSelectedTab(newTab);
        } else {
            newTab = new Tab(item.getLabel());
            newTab.setId(item.getLabel());
            newTab.setClosable(true);
            newTab.setSelected(true);
            Tabpanel tb = new Tabpanel();
            Executions.createComponents(item.getValue().toString(), tb, null);
            mainTabbox.getTabs().appendChild(newTab);
            mainTabbox.getTabpanels().appendChild(tb);
        }
    }
        ]]>
    </attribute>
            <treechildren>
                <treeitem label="Daily">
                    <treechildren>
                        <treeitem label="Tab Label" value="somepage.zul" />

                        <treeitem label="Other Tab Label" value="otherpage.zul" />

....

reference from: http://forum.zkoss.org/question/3675/tree-onselect-eventlistener/