TabbedPane |
|||||||||||||||||||||||||||||||||||
|
Key Features
Specifying Tabs ContentTo add the TabbedPane component to a page, use the <q:tabbedPane> tag. There are two ways to define the tabs and the page contents within them:
The following example shows a two-tab TabbedPane component: <q:tabbedPane> <q:tabbedPaneItem> <f:facet name="tab"> <h:outputText value="First tab"/> </f:facet> <h:outputText value="Some text on the first tab" /> </q:tabbedPaneItem> <q:tabbedPaneItem> <f:facet name="tab"> <h:outputText value="Second tab"/> </f:facet> <h:outputText value="Some text on the second tab"/> </q:tabbedPaneItem> </q:tabbedPane>
Here's an example of how you can do it: <q:tabbedPane>
<q:tabbedPaneItems
value="#{TabbedPaneBean.tabbedPaneItems}"/>
</q:tabbedPane>
You can combine these two approaches by placing the <q:tabbedPaneItem> and <q:tabbedPaneItems> tags in any order you need. By using the selectedIndex integer attribute of the <q:tabbedPane> tag, you can set a currently selected tab. By default, it is "0", which means that the first tab will be selected on page load. The selectedIndex attribute can be specified as a constant or a value-binding expression. In the example below, the third tab of the TabbedPane is selected when the page is loaded. <q:tabbedPane selectedIndex="2"> <q:tabbedPaneItems value="#{TabbedPaneBean.tabbedPaneItems}"/> </q:tabbedPane> Note, that TabbbedPane tabs are indexed regardless of the rendered attribute. It means that the selectedIndex attribute refers to the tabs specified in the TabbedPane component, not only visible tabs. Loading ModesThe way the data in the TabbedPane component is loaded depends on the loadingMode attribute, which can take one of the following values:
The example below uses the "client" loading mode. <q:tabbedPane loadingMode="client"> <q:tabbedPaneItems value="#{TabbedPaneBean.tabbedPaneItems}"/> </q:tabbedPane> Customizing the AppearanceBy default, the tabs appear at the top of the TabbedPane, but they can be displayed on any of the four sides of the component. To specify the placement of the tabs, set the tabPlacement attribute to one of these values: "top" (default), "left", "bottom" and "right". Also, by setting the tabAlignment attribute to "topOrLeft" (default) or "bottomOrRight", you specify along which edge the tabs will be aligned. For example, you can place the tabs on the left side of the TabbedPane and align them along the bottom of the component. The interval between the tabs is defined in pixels by the tabGapWidth attribute. By default, it is set to "2". The size of the tabs depends on what is displayed in them. By default, the TabbedPane component is adjusted to accommodate the content of a currently selected page. The following example shows a fixed-sized TabbedPane with the tabs located on the left and aligned to the bottom of the component, and spaced at 5 pixels apart. <q:tabbedPane tabGapWidth="5" tabPlacement="left" tabAlignment="bottomOrRight"> <q:tabbedPaneItems value="#{TabbedPaneBean.tabbedPaneItems}"/> </q:tabbedPane> Customizing StylesWith the TabbedPane, you can define styles for the entire component as well as it individual parts in the normal and rollover states. The style-related attributes are given in the table below.
Note For example: frontBorderStyle="2px solid red" backBorderStyle="2px solid blue" And here is the result: | ![]() Note Client-Side EventsThe TabbedPane component supports a set of standard client-side events such as onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress. In addition, the TabbedPane provides a component-specific onselectionchange event which occurs when the user selects a tab. Server-Side Event ListenersTo enable you to handle tab selection change on the server side, the TabbedPane component provides the selectionChangeListener attribute. This attribute is MethodBinding that must point to the method that accepts a teamdev.jsf.event.SelectionChangeEvent. SelectionChangeEvent extends javax.faces.event.FacesEvent and adds the oldIndex and newIndex properties to it. The specified method will be called during the Process Validations phase of the request processing lifecycle, when a selected tab in the TabbedPane is changed. The following example shows the use of the selectionChangeListener attribute: <q:tabbedPane selectionChangeListener="#{TPBean.selectionChanged}"> <q:tabbedPaneItems value="#{TPBean.tabbedPaneItems}"/> </q:tabbedPane> You can also add a selection change listener (which is the implementation of the teamdev.jsf.event.SelectionChangeListener interface) to the TabbedPane component by using the <q:selectionChangeListener> tag: <q:tabbedPane> <q:tabbedPaneItems value="#{TPBean.tabbedPaneItems}"/> <q:selectionChangeListener type="teamdev.testapp.customEvents.MySelectionChangeListener"/> </q:tabbedPane> There is also immediate attribute that is used to specify whether or not selectionChangeListener should be executed immediately (during the Apply Request Values phase of the request processing lifecycle instead of Process Validations phase). Client-Side APIAll client-side API methods of the TabbedPane component are listed in the following table:
|
||||||||||||||||||||||||||||||||||
© 2007 TeamDev Ltd. | ![]() |