VF Pages as Tabs with in a Main VF Page (Including Multiple VF Pages)

Question

I am looking at a robust & scalable approach to include multiple (~10) VF Pages as Tabs into the Main VF Page. Each of these will have its own controllers (heterogeneous controllers overall). What approach do you recommend? What Governor Limits to Watch Out For?

Answer 1

I would break each page into a VisualForce Component, and then embed each component into its own tab. You can use standard visualforce tabs (apex:tab) or a third party javascript library.

There's no major gotchas with this technique. This doesn't use any extra governor limits, however you will need to take into account that each of those ten components will run their constructors on page load, and governor limits for these will be accumulative.

For Example:

Tab1.component

<apex:component controller="Controller1">
    Content Here
</apex:component>

Tab2.component

<apex:component controller="Controller2">
    Content Here
</apex:component>

YourPage.page

<apex:page>
    <apex:tabPanel switchType="client">
        <apex:tab label="One"><c:Tab1></apex:tab>
        <apex:tab label="One"><c:Tab2></apex:tab>
    </apex:tabPanel>
</apex:page>

If you need to share data between components, you can instead create a root controller on the page, and use it as a factory to create constructors for the child components.

i.e.

Tab1.component

<apex:component>
    <apex:attribute name="Controller" type="MyController" description="The controller to pass to this component" required="true">

    <apex:inputField value="{!Controller.FirstName}"/>
</apex:component>

RootController.cls

class RootController {
    public MyController getTabOneController(){
        return new MyController(this);
    }
}

YourPage.page

<apex:page>
    <apex:tabPanel switchType="client">
        <apex:tab label="One"><c:Tab1 Controller="{!TabOneController}"></apex:tab>            
    </apex:tabPanel>
</apex:page>