Dynamic Tab Panels

From ZKDesktop

Jump to: navigation, search

Depreciated. Dynamic loading is now directly supported by ZK.

[edit]

Overview

Loading complex user interfaces and data-rich pages into multiple tabs can dramatically increase the time it takes for your application to start. To improve application responsiveness, you can dynamically load content into tabs the first time they are accessed. The ZK Desktop makes this process painless!


[edit]

Usage

To add dynamic tab loading, you simple move your tabpanel contents to their own ZUL files and specify the filename to load into the tabpanel when it's clicked. Example (from dynatab.webapp): 

<tabbox use="DynamicTabs" id="tbxTest" width="100%">
  <tabs>
    <tab label="Static Tab"/>
    <tab label="Dynamic Tab"/>
  </tabs>
  <tabpanels>
    <tabpanel>This content is static.</tabpanel>
    <tabpanel><custom-attributes dynamic="dynamic.zul"/></tabpanel>
  </tabpanels>
</tabbox>

Just specify use="DynamicTabs" in the tabbox tag and add the custom-attributes tag inside the tabpanels you wish to dynamically load. It's that easy!


[edit]

Potential "Gotchas"

Two things to be aware of when using dynamic tabs:

  • If you try to dynamically load the first tab, or you programmatically switch the visible tab, you may need to trigger the tabpanel's onClick event to force it to load.
  • The ZUL files that make up the tabpanel's content must be in your webapp's chrome directory. You cannot place them in the resources directory. (They belong under chrome anyway!)
Retrieved from "http://zkdesktop.sourceforge.net/wiki/index.php/Dynamic_Tab_Panels"
Personal tools