Load-on-Demand for Tab Panels

Like many other components, you can load the content of the tab panel only when it becomes visible. The simplest way is to use the fulfill attribute to defer the creation of the children of a tab panel.

<tabbox>
    <tabs>    
        <tab label="Preload" selected="true"/>        
        <tab id="tab2" label="OnDemand"/>        
    </tabs>    
    <tabpanels>    
        <tabpanel>        
    This panel is pre-loaded since no fulfill specified    
        </tabpanel>        
        <tabpanel fulfill="tab2.onSelect">        
    This panel is loaded only tab2 receives the onSelect event    
        </tabpanel>        
    </tabpanels>    
</tabbox>

If you prefer to create the children manually or manipulate the panel dynamically, you could listen to the onSelect event, and then fulfill the content of the panel when it is selected, as depicted below.

<tabbox id="tabbox" width="400" mold="accordion">
    <tabs>    
        <tab label="Preload"/>        
        <tab label="OnDemand" onSelect="load(self.linkedPanel)"/>        
    </tabs>    
    <tabpanels>    
        <tabpanel>        
    This panel is pre-loaded.    
        </tabpanel>        
        <tabpanel>        
        </tabpanel>        
    </tabpanels>    
    <zscript><![CDATA[    
    void load(Tabpanel panel) {    
        if (panel != null && panel.getChildren().isEmpty())        
            new Label("Second panel is loaded").setParent(panel);            
    }    
    ]]></zscript>    
</tabbox>