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

Question

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

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

Thanks in advance

Answer 1

fulfill attribute can create components after a specific event fired.

    <tabbox>
        <tabs>
            <tab selected="true">tab 1</tab>
            <tab>tab 2</tab>
        </tabs>
        <tabpanels>
            <tabpanel>
            1st tab
            </tabpanel>
            <tabpanel fulfill="self.linkedTab.onSelect">
                <window title="In tab 2" border="normal" 
                 onCreate="System.out.println(self.title)">
                 a heavy cost component
                </window>
            </tabpanel>
        </tabpanels>
    </tabbox>

See On-demand Evaluation for details.