Name Default Type Description. id null String Unique identifier of the component.

Transcription

1 3.116 TabView PrimeFaces Userʼs Guide TabView is a tabbed panel component featuring client side tabs, dynamic content loading with ajax and content transition effects. Info Tag Component Class Component Type Component Family Renderer Type Renderer Class tabview org.primefaces.component. tabview.tabview org.primefaces.component.tabview org.primefaces.component org.primefaces.component.tabviewrenderer org.primefaces.component.tabview.tabviewrenderer Attributes Name Default Type Description id null String Unique identifier of the component. rendered TRUE Boolean Boolean value to specify the rendering of the component, when set to false component will not be rendered. binding null Object An el expression that maps to a server side UIComponent instance in a backing bean. widgetvar null String Variable name of the client side widget. activeindex 0 Integer Index of the active tab. effect null String Name of the transition effect. effectduration null String Duration of the transition effect. dynamic FALSE Boolean Enables lazy loading of inactive tabs. 418

2 Name Default Type Description cache TRUE Boolean When tab contents are lazy loaded by ajax togglemode, caching only retrieves the tab contents once and subsequent toggles of a cached tab does not communicate with server. If caching is turned off, tab contents are reloaded from server each time tab is clicked. ontabchange null String Client side callback to execute when a tab is clicked. ontabshow null String Client side callback to execute when a tab is shown. style null String Inline style of the main container. styleclass null String Style class of the main container. var null String Name of iterator to refer an item in collection. value null Object Collection model to display dynamic tabs. orientation top String Orientation of tab headers. PrimeFaces Userʼs Guide Getting started with the TabView TabView requires one more child tab components to display. Titles can also be defined by using title facet. <p:tabview> <p:tab title="tab One"> <h:outputtext value="lorem" /> <p:tab title="tab Two"> <h:outputtext value="ipsum" /> <p:tab title="tab Three"> <h:outputtext value="dolor" /> Dynamic Tabs There re two togglemodes in tabview, non-dynamic (default) and dynamic. By default, all tab contents are rendered to the client, on the other hand in dynamic mode, only the active tab contents are rendered and when an inactive tab header is selected, content is loaded with ajax. Dynamic mode is handy in reducing page size, since inactive tabs are lazy loaded, pages will load faster. To enable dynamic loading, simply set dynamic option to true. 419

3 <p:tabview dynamic="true"> Content Caching Dynamically loaded tabs cache their contents by default, by doing so, reactivating a tab doesn t result in an ajax request since contents are cached. If you want to reload content of a tab each time a tab is selected, turn off caching by cache to false. Effects Content transition effects are controlled with effect and effectduration attributes. EffectDuration specifies the speed of the effect, slow, normal (default) and fast are the valid options. <p:tabview effect="fade" effectduration="fast"> Ajax Behavior Events tabchange and tabclose are the ajax behavior events of tabview that are executed when a tab is changed and closed respectively. Here is an example of a tabchange behavior implementation; <p:tabview> <p:ajax event= tabchange listener= #{bean.onchange} /> public void onchange(tabchangeevent event) { //Tab activetab = event.gettab(); //... } Your listener(if defined) will be invoked with an org.primefaces.event.tabchangeevent instance that contains a reference to the new active tab and the accordion panel itself. For tabclose event, listener will be passed an instance of org.primefaces.event.tabcloseevent. 420

4 Dynamic Number of Tabs When the tabs to display are not static, use the built-in iteration feature similar to ui:repeat. <p:tabview value="#{bean.list}" var="listitem"> <p:tab title="#{listitem.propertya}"> <h:outputtext value= "#{listitem.propertyb}"/>...more content Orientations Tabview supports four different orientations mode, top(default), left, right and bottom. <p:tabview orientation="left"> Client Side Callbacks Tabview has two callbacks for client side. ontabchange is executed when an inactive tab is clicked and ontabshow is executed when an inactive tab becomes active to be shown. <p:tabview ontabchange="handletabchange(event, )"> function handletabchange() { // = Index of the new tab } 421

5 Client Side API Widget: PrimeFaces.widget.TabView. Method Params Return Type Description select() : Index of tab to display void Activates tab with given selecttab() : Index of tab to display void (Deprecated, use select instead) Activates tab with given disable() : Index of tab to disable void Disables tab with given enable() : Index of tab to enable void Enables tab with given remove() : Index of tab to remove void Removes tab with given getlength() - Number Returns the number of tabs getactiveindex() - Number Returns of current tab Skinning As skinning style classes are global, see the main theming section for more information. Following is the list of structural style classes. Class Applies.ui-tabs.ui-tabs-nav.ui-tabs-panel Main tabview container element Main container of tab headers Each tab container 422