Load Tab box Content on Demand Using MVVM

ZK Version : 6.5.0 CE

In this post, let us see how we can load individual ZUL File on each tab box content
Step : 1
First let us create individual files.

Product1.zul file

   1: <?page title="Main Menu" contentType="text/html;charset=UTF-8"?>

   2: <zk>

   3:     <label value="Product 1 Information goes here" style="color: #696569; font-size : 24px; font-weight: bold;" />

   4: </zk>

Product2.zul file

   1: <?page title="Main Menu" contentType="text/html;charset=UTF-8"?>

   2: <zk>

   3:     <label value="Product 2 Information goes here" style="color: #696569; font-size : 24px; font-weight: bold;" />

   4: </zk>

Product3.zul file

   1: <?page title="Main Menu" contentType="text/html;charset=UTF-8"?>

   2: <zk>

   3:     <label value="Product 3 Information goes here" style="color: #696569; font-size : 24px; font-weight: bold;" />

   4: </zk>

Product4.zul file

   1: <?page title="Main Menu" contentType="text/html;charset=UTF-8"?>

   2: <zk>

   3:     <label value="Product 4 Information goes here" style="color: #696569; font-size : 24px; font-weight: bold;" />

   4: </zk>

Step : 2Now let us create our main page as follows

   1: <zk>

   2:     <window id="mainpage" title=" " width="47%" height="78%"

   3:         border="normal" minimizable="false" mode="modal" maximizable="false"

   4:         viewModel="@id('vm') @init('appVMS.mainPageVM')" closable="true"

   5:         apply="org.zkoss.bind.BindComposer">

   6:         <separator />

   7:         <tabbox width="100%" sclass="mainmenu">

   8:             <tabs id="tabs">

   9:                 <tab label="Product 1" id="product1" />

  10:                 <tab label="Product 2" id="product2"

  11:                     onSelect="@command('showzulfile', zulFileName='product2.zul', target=self.linkedPanel)" />

  12:                 <tab label="Product 3" id="product3"

  13:                     onSelect="@command('showzulfile', zulFileName='product3.zul', target=self.linkedPanel)" />

  14:                 <tab label="Product 4" id="product4"

  15:                     onSelect="@command('showzulfile', zulFileName='product4.zul', target=self.linkedPanel)" />

  16:             </tabs>

  17:             <tabpanels>

  18:                 <tabpanel>

  19:                     <include mode="defer" src="product1.zul" />

  20:                 </tabpanel>

  21:                 <tabpanel></tabpanel>

  22:                 <tabpanel></tabpanel>

  23:                 <tabpanel></tabpanel>

  24:             </tabpanels>

  25:         </tabbox>

  26:     </window>

  27: </zk>

Step : 3Now let us create our main page View Model file  as follows

   1: package appVMS;

   2:  

   3: import org.zkoss.bind.annotation.AfterCompose;

   4: import org.zkoss.bind.annotation.BindingParam;

   5: import org.zkoss.bind.annotation.Command;

   6: import org.zkoss.bind.annotation.ContextParam;

   7: import org.zkoss.bind.annotation.ContextType;

   8: import org.zkoss.zk.ui.Component;

   9: import org.zkoss.zk.ui.Executions;

  10: import org.zkoss.zk.ui.select.Selectors;

  11: import org.zkoss.zul.Tabpanel;

  12:  

  13: public class mainPageVM {

   

  15:     @AfterCompose

  16:     public void initSetup(@ContextParam(ContextType.VIEW) Component view) {

  17:         Selectors.wireComponents(view, this, false);

  18:     }

  19:  

  20:     @Command

  21:     public void showzulfile(@BindingParam("zulFileName") String zulFileName,

  22:             @BindingParam("target") Tabpanel panel ) {  23:  

  24:         if (panel != null && panel.getChildren().isEmpty())

  25:         {

  26:             Executions.createComponents(zulFileName, panel, null);

  27:         }

  28:     }

  29: }

Now you can run the mainpage.zul and check the output