Add quick, dynamic tab functionality to transition through panes of local content. You can also have complex content in your tabs like the thumbnail in the third tab:
In the example above the active tab index is defined by an attribute of a Java bean: activeIndex="# {testBean.index}".
BootsFaces updates the value of the attribute of the Java bean on any request. However, BootsFaces can't do that if you
use a method or a constant to define the active index, such as activeIndex="# {testBean.getIndex()}" or activeIndex="1".
In this case, the default value is overriden by the user's click, and the connection between the back-end and the active tab index is lost.
By default, the first tab is opened, or the tab defined by
activeIndex
. This also holds true after a postback (i.e. after clicking a
command button that shows the current JSF page again), unless you put
the
<b:tabView />
into the same form as the button.
After a page reload (
F5
or
CTRL+R
) the initial state is always shown. That's because JSF considers
page reloads as a sort of a reset. Everything that's stored in the
ViewScope
is lost.
You can use add some CSS commands to convert the tab into a more traditional tab with borders:
If you attach a list of values to the tab, multiple tabs are rendered, one for each entry
of the list. Basically, this functionality is derived from <ui:repeat />,
so you can use the same attributes. In particular, the list is stored in the
attribute value and the current entry is stored in the attribute var.
Caveat: The tabs consist of two parts which are rendered independently. So the array is iterated twice. Please don't implement any time-consuming algorithms in the getter. Otherwise, this algorithm is called multiple times, resulting in mediocre performance.
The example below also demonstrate how to use a facet to simulate the "close" button.
The facets don't work with AJAX, so a <b:remoteCommand /> fills the gap.
You can use the pills setting to render pills instead of tabs:
You can also set the tab position to 'top', 'left', 'right' and 'bottom'. The left and right setting, force the use of pills to manage also the nav-stacked style when the page resize.
You can use the attribute rendered="false" to hide both the entire TabView or an individual tab. Similarly, you can use the attribute
disabled="true" to gray out the entire TabView or an individual tab.
That's a pretty radical step. You can't activate any of the tabs. Nor is the content of any of the tabs ever shown.
Inactive tabs can't be activated by clicking. If the currently active tab is disabled, the next tab is activated, until an enabled tab is found. In the example below, the first tab is initially active. However, it's disabled, so the next tab is activated. It's an enabled tab, so it's rendered as active. If none of the tabs were enabled, there's no active tab - just like in the example above.
If the active index is defined by an bean attribute, such as activeIndex="# {testBean.index}, the bean attribute value
if updated to the real index during the rendering phase. If every tab is disabled, the bean attribute is set to Integer.MAX_VALUE.
This demo is sort of hard to demonstrate, but we included it for testing purposes nonetheless. Below you see (or rather: you don't see)
a tabView with rendered="false".
This demo is sort of hard to demonstrate, but we included it for testing purposes nonetheless. Below you see (or rather: you don't see)
a tabView with rendered="false".
<b:tabView >
and
<b:tab >
support many JavaScript and AJAX events, as described in the description of AJAX in BootsFaces.
Basically, each of the many JavaScript callback handlers (the
on[event]
attributes) also supports AJAX. To get familiar with BootsFaces AJAX,
try the BootsFaces
AJAX demo project.
| Attribute | Default value | Description |
|---|---|---|
| active-index activeIndex (alternative writing) |
0 | Optional attribute to define which tab is active initially. |
| ajax | false | Whether the Button submits the form with AJAX. |
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| content-class contentClass (alternative writing) |
(none) | Style class of the div surrounding the panes. |
| content-disabled contentDisabled (alternative writing) |
false | Enables or disables every child element of this container. By default, child elements are enabled. |
| content-style contentStyle (alternative writing) |
(none) | Inline CSS style of the div surrounding the panes. |
| delay | (none) | Delays the AJAX request. |
| dir | (none) | Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content). |
| disabled | false | Disables the input element, default is false. |
| id | (none) | Unique identifier of the component in a namingContainer. |
| immediate | false | Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false. |
| onclick | (none) | The onclick attribute. |
| oncomplete | (none) | JavaScript to be executed when ajax completes. |
| onerror | (none) | JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions). |
| onhidden | (none) | JavaScript and/or AJAX code to be executed just after pushing a tab to the back |
| onhide | (none) | JavaScript and/or AJAX code to be executed just before pushing a tab to the back |
| onshow | (none) | JavaScript and/or AJAX code to be executed just before bringing a tab to the front |
| onshown | (none) | JavaScript and/or AJAX code to be executed just after bringing a tab to the front |
| onsuccess | (none) | JavaScript to be executed when ajax completes with success (i.e. there's neither a network error nor a Java exception). |
| pills | false | Change the rendering of tab to pills mode. Default false |
| process | (none) | Comma or space separated list of ids or search expressions denoting which values are to be sent to the server. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| role | (none) | The role can be used to provide information to screenreaders. |
| style-class styleClass (alternative writing) |
(none) | Style class of the div surrounding this element. |
| tabPosition | (none) | Position of tabs. Legal values are: left, right, top, bottom. Default is top |
| tooltip | (none) | The text of the tooltip. |
| tooltip-container tooltipContainer (alternative writing) |
body | Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body. |
| tooltip-delay tooltipDelay (alternative writing) |
0 | The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-hide tooltipDelayHide (alternative writing) |
0 | The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-show tooltipDelayShow (alternative writing) |
0 | The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-position tooltipPosition (alternative writing) |
(none) | Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom". |
| update | (none) | Component(s) to be updated with ajax. |
| Attribute | Default value | Description |
|---|---|---|
| ajax | false | Whether the Button submits the form with AJAX. |
| auto-update autoUpdate (alternative writing) |
false | Setting this flag updates the widget on every AJAX request. |
| content-disabled contentDisabled (alternative writing) |
false | Enables or disables every child element of this container. By default, child elements are enabled. |
| content-style contentStyle (alternative writing) |
(none) | Inline CSS of the div surrounding the tab pane. |
| delay | (none) | Delays the AJAX request. |
| dir | (none) | Direction indication for text that does not inherit directionality. Legal values: ltr (Default. Left-to-right text direction), rtl (Right-to-left text direction) and auto (let the browser figure out the direction of your alphabet, based on the page content). |
| disabled | false | Disables the input element, default is false. |
| id | (none) | Unique identifier of the component in a namingContainer. |
| immediate | false | Flag indicating that, if this component is activated by the user, notifications should be delivered to interested listeners and actions immediately (that is, during Apply Request Values phase) rather than waiting until Invoke Application phase. Default is false. |
| offset | (none) | Read-write property setting the offset from the beginning of the collection from which to start the iteration. If not set, this offset is not considered and iteration will start at the beginning of the collection. |
| onclick | (none) | The onclick attribute. |
| oncomplete | (none) | JavaScript to be executed when ajax completes. |
| onerror | (none) | JavaScript to be executed when ajax results on an error (including both network errors and Java exceptions). |
| onsuccess | (none) | JavaScript to be executed when ajax completes with success (i.e. there's neither a network error nor a Java exception). |
| process | (none) | Comma or space separated list of ids or search expressions denoting which values are to be sent to the server. |
| rendered | false | Boolean value to specify the rendering of the component, when set to false the component will not be rendered. |
| size | (none) | Read-write property setting the size of the collection to iterate. The value of this attribute must be less than or equal to the actual size of the collection, or a FacesException must be thrown. |
| step | (none) | Iteration will only process every step items of the collection, starting with the first one. |
| style | (none) | Inline CSS of the tab. |
| style-class styleClass (alternative writing) |
(none) | Style class of the div surrounding the tab pane. |
| title | (none) | Caption of the tab. |
| tooltip | (none) | The text of the tooltip. |
| tooltip-container tooltipContainer (alternative writing) |
body | Where is the tooltip div generated? That's primarily a technical value that can be used to fix rendering errors in special cases. Also see data-container in the documentation of Bootstrap. The default value is body. |
| tooltip-delay tooltipDelay (alternative writing) |
0 | The tooltip is shown and hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-hide tooltipDelayHide (alternative writing) |
0 | The tooltip is hidden with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-delay-show tooltipDelayShow (alternative writing) |
0 | The tooltip is shown with a delay. This value is the delay in milliseconds. Defaults to 0 (no delay). |
| tooltip-position tooltipPosition (alternative writing) |
(none) | Where is the tooltip to be displayed? Possible values: "top", "bottom", "right", "left", "auto", "auto top", "auto bottom", "auto right" and "auto left". Default to "bottom". |
| update | (none) | Component(s) to be updated with ajax. |
| value | (none) | The name of a collection of items that this tag iterates over. The collection may be a List, array, java.sql.ResultSet, or an individual java Object. If the collection is null, this tag does nothing. |
| var | (none) | Name of the exported scoped variable for the current item of the iteration. This scoped variable has nested visibility. Its type depends on the object of the underlying collection |
| varStatus | (none) | Name of the exported request scoped variable for the status of the iteration. Object is a POJO with the following read-only JavaBeans properties: begin, end, index, step, even, odd, first, and last. This scoped variable has nested visibility. |
<b:tabView> and <b:tab> use the standard Bootstrap CSS classes as defined by the Bootstrap documentation:
The entire tab (tab strip and content area) is surrounded by a div
bearing the CSS class
tab-panel
.
The tab area bears the CSS classes
nav
and
nav-tabs
.
The content area bears the CSS class
tab-content
.
The individual tab panes in the content area bear the CSS class
tab-pane
.