ICEfaces EE Composite Components
Tag tabView

The Tab View Composite Component

Features

• The Tab View composition component offers a more simplified and flexible mechanism for creating a tab-based layout, using the ICEfaces ACE tabset component
• Unlike the <ice:panelTabSet>, the <ice-cc:tabView> component does not need to be included in a form, so tab content can be broken into multiple forms for performance
• The Tabs component can include any other content, images, and components within the header

How To Use

1. Add the <ice-cc:tabView/> tag to your page.
2. Set the id attribute
3. Nest <ice-cc:tab/> tags for each tab you would like
4. Add the appropriate styleClass to the h:body tag: styleClass="ice-skin-rime" or styleClass="ice-skin-sam"
5. Add the CSS file for the chosen theme to the bottom of the page (after closing h:body tag): <h:outputStylesheet library="org.icefaces.component.skins" name="rime.css" />
6. If you would like to nest forms within the tab content, set outsideForm='true' on the tag

<ice-cc:tabView id="myTabs" orientation="#{tabViewExampleBean.orientation}" outsideForm="false"> <ice-cc:tab tabId="tab1" label="Tab 1"> <div style="background: #FFF;padding: 8px;"> <h2>This is tab 1 content</h2> <ice:graphicImage value="/images/icesailor.jpg"/> </div> </ice-cc:tab> <ice-cc:tab tabId="tab2" label="Tab 2"> <div style="background: #FFF;padding: 8px;"> <h2>This is tab 2 content</h2> <ice:graphicImage value="/images/icecar.jpg"/> </div> </ice-cc:tab> <ice-cc:tab tabId="tab3" label="Tab 3"> <div style="background: #FFF;padding: 8px;"> <h2>This is tab 3 content</h2> <ice:graphicImage value="/images/icebreaker.jpg"/> </div> </ice-cc:tab> </ice-cc:tabView>