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

image




 


Labels: