tabView: Load different page in each tab

[burnchar]

I am trying to build a page using tabView in which each tab loads its own document with a left and center layoutUnit. It is also fine if I don't use layouts within the tab if that would be simpler, but I can't find a way to make the form controls on the left collapsible unless I use a layout with collapsible="true".
I tried nesting putting layout units inside of a tabView, but this doesn't allow the tab content to resize itself (even using width:100%) as discussed here. I don't know how wide the tab content will be, so this is important.

It is my understanding that this can be accomplished using tabView's client-side API, but I am new to JSF and PrimeFaces and cannot find any documentation of this API because it is so new (I am using 2.2M1). I would like to avoid directly talking to JQuery to keep things as simple and maintainable as possible.

The following code is more or less what I would really, really like to be able to do:

Code: Select all

<h:body>
<p:layout fullPage="true" id="masterLayout">
    <!--  "top" layout for header...  -->
    <p:tabView> <!-- Note: Needn't be dynamic. I'd like all tables to load at once so new tab selections are instantaneous -->
        <p:tab title="Tab 1">
            <p:layout fullPage="true"> <!-- Doesn't have to be fullPage=true, just needs to grow for large charts/graphs  -->
                <p:layoutUnit position="left" width="200" header="FORM GOES HERE" collapsible="true">
                    <!-- When submitted, will generate a table in center pane. -->
                </p:layoutUnit>                        
                <p:layoutUnit position="center" header="CENTER PANE">
                    <!-- This will have a chart or table based on form options
                         set in the left pane. -->
                </p:layoutUnit>
            </p:layout>
        </p:tab>
        <p:tab title="Tab 2">
            <!-- A different form on the left and graph in the right -->
        <p:tab title="Tab N...">
            <!-- More tabs   -->
        </p:tab>
    </p:tabView>
<!-- ...etc.    -->

If you can show me an example of how to either display, within each tab, a collapsible form on the left and an area in the center in which to put a dataTable generated by that form, I would much appreciate it. if there is a way to do this without even using the client-side tabView API or nested layouts all the better.

[burnchar]

If I might get a sample of, or a link to documentation for, using any PrimeFaces tabView API at all (just so I can see and play with the syntax), that would be very helpful, too.