asked 2016-09-09 10:02:22 +0800

jomir
0

Hi, 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>
       ....