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. -->