# load data of tab only when it is clicked in zk framework

asked 2022-12-21 14:55:26 +0800

AnkitIan
101 1

I have 4 tabs and i want to load the data of a particular tab only when it is clicked; like we have in angular lazy-loading but i want to achieve the same functionality in zk-framework I want to be able to tab1 when clicked : only contents of tab1 to get loaded tab2 when clicked : only contents of tab2 to get loaded tab3 when clicked : only contents of tab3 to get loaded tab4 when clicked : only contents of tab4 to get loaded

In zk framework the page is loaded at a time i want to load the contents of the page only when a tab is clicked

My code:

<?page cacheable="false" language="xul/html" zscriptLanguage="Java" contentType="text/html;charset=UTF-8"?>
<?taglib uri="/WEB-INF/brains-zk.tld" prefix="b"?>
<?component name="field-label" macroURI="/WEB-INF/macros/field-label.zul"?>

<tabbox id="tb" height="520px">
<tabs id="tabs">
<tab id="usergroup" label="${ b:l('str.workload.user_groups') }" selected="true" /> <tab id="usercustomer" label="${ b:l('str.workload.user_customer') }" />
<tab id="queues" label="${ b:l('str.workload.queues') }" /> <tab id="workload" label="${ b:l('str.workload_workload') }" />
</tabs>
<tabpanels>
<tabpanel >
<include src="/WEB-INF/jsp/app/workload/userGroups.zul"/>
</tabpanel>
<tabpanel fulfill="usercustomer.linkedTab.onSelect">
<include src="/WEB-INF/jsp/app/workload/userCustomer.zul"/>
</tabpanel>
<tabpanel fulfill="queues.linkedTab.onSelect">
<include src="/WEB-INF/jsp/app/workload/queues.zul"/>
</tabpanel>
<tabpanel fulfill="workload.linkedTab.onSelect">
<include src="/WEB-INF/jsp/app/workload/workload.zul"/>
</tabpanel>
</tabpanels>
</tabbox>


Any help will be highly appreciated as i am quite new to zk framework

Thanks in advance

delete retag edit

## 1 Answer

Sort by » oldest newest most voted

answered 2022-12-26 17:50:37 +0800

MDuchemin
2295 1 6

Hey there

There is two "loading stages" you can consider here.

First is the "render on demand" stage: https://www.zkoss.org/wiki/ZKDeveloper'sReference/PerformanceTips/ClientRenderonDemand#ClientROD:Tabbox

This feature in ZK EE will render the client-side content of a given tabpanel only once the tab has been shown (clicked on). All of the data is still sent to the client first, so it is rendered at server side.

The 2nd timing to consider is to build the content of the tabpanel "on demand" when a tab becomes selected. The tabbox will emit a "onSelect" event when a given tab is selected, so you can consider not pre-rendering the tab content at first, but only after the user has clicked (triggered onSelect) on the relevant tab.

In your case, you are using includes, so it can be as simple as not setting a url in the includes in the first place, but instead to fill the URL dynamically (if not already filled by another event) when the user trigger tab selection.

You'd want to do that in a composer, not in pure zul.

Composers are a great way to use java to control a page's components and change their states dynamically.

See more info about composers here: https://www.zkoss.org/wiki/ZKDeveloper'sReference/MVC/Controller/Composer

Essentially a composer is a Java class which is applied to a page, subscribe events listeners to user actions in the page (clicking on a control, selecting a tab, etc) and perform some action in response. In your use case, the action would be to set the URL of the relevant include when a tab is clicked.

Also as a side note, if you are using composer, you can consider using Executions.createComponents instead of include. Include is not a bad component, but it is on the older side, and there are better options currently (like createComponents and apply for example)

Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!
[hide preview]

## Stats

Asked: 2022-12-21 14:55:26 +0800

Seen: 4 times

Last updated: Dec 26 '22

Support Options
• Email Support
• Training
• Consulting
• Outsourcing
Learn More