ZK Generic Tree Event Handler - model-view-controller

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/