Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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
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)
Asked: 2022-12-21 14:55:26 +0800
Seen: 5 times
Last updated: Dec 26 '22
