TornadoFaces - Modern JSF Component Framework

Star Wars: Episode I

Star Wars: Episode II

Star Wars: Episode III

Two Jedi Knights escape a hostile blockade to find allies and come across a young boy who may bring balance to the Force, but the long dormant Sith resurface to reclaim their old glory.

Ten years after initially meeting, Anakin Skywalker shares a forbidden romance with Padmé, while Obi-Wan investigates an assassination attempt on the Senator and discovers a secret clone army crafted for the Jedi.

As the Clone Wars near an end, the Sith Lord Darth Sidious steps out of the shadows, at which time Anakin succumbs to his emotions, becoming Darth Vader and putting his relationships with Obi-Wan and Padme at risk.

Star Wars: Episode I

Star Wars: Episode II

Star Wars: Episode III

Two Jedi Knights escape a hostile blockade to find allies and come across a young boy who may bring balance to the Force, but the long dormant Sith resurface to reclaim their old glory.

Example

Documentation


<t:tabView>
    <t:tab title="Star Wars: Episode I - The Phantom Menace">
        Two Jedi Knights escape a hostile blockade...
    </t:tab>
    <t:tab title="Star Wars: Episode II - Attack of the Clones">
        Ten years after initially meeting...
    </t:tab>
    <t:tab title="Star Wars: Episode III - Revenge of the Sith">
        As the Clone Wars near an end...
    </t:tab>
</t:tabView>
   
<!-- Advanced -->
<t:tabView dynamic="true" styleClass="advancedTabView" contentsStyleClass="advancedTabViewContent">
    <t:tab title="Star Wars: Episode I - The Phantom Menace">
        Two Jedi Knights escape a hostile blockade...
    </t:tab>
    <t:tab title="Star Wars: Episode II - Attack of the Clones">
        Ten years after initially meeting...
    </t:tab>
    <t:tab title="Star Wars: Episode III - Revenge of the Sith">
        As the Clone Wars near an end...
    </t:tab>
</t:tabView>

The TabView presents contents in vertical or horizontal tabs.

Info

Tag name	tabView
Component type	io.tornadofaces.component.TabView
Renderer type	io.tornadofaces.component.TabViewRenderer

Attributes

Name	Description	Required
orientation	Orientation for the tab view. Possible values are "horizontal" (default) and "vertical"
activeIndex	Index to open by default. If multi=true, activeIndex can be a comma separated list of indexes to open. Default 0.	false
onItemChange	JavaScript callback to be executed when a user opens an item.	false
widgetVar	Widget variable name, accessible via TW('widgetVar') and TornadoFaces.widgets.widgetVar.	false
cache	If tab items are lazy loaded, cache=true will make sure each item content is only retrieved once. cache=false will retrieve and refresh the content every time the item is shown. Default true.	false
autoOpen	AutoOpen will open the items denoted in activeIndex when the component is rendered. Default true.	false
dynamic	Dynamic items will have it's contents lazy loaded when the item is actived. Default false.	false
styleClass	Styles to apply to the tab view div.	false
contentsStyleClass	Styles to apply to the content div.	false
rendered	Should this component be rendered?	false

Client Side Callbacks

onItemChange is called as a tab is activated and the content is loaded. The callback receives the item element representing the activated item.

function itemChanged(item) {
    // item is the new active element
}

Ajax Behavior Events

itemChange will be called when an item is toggled.

<t:tabView>
    <f:ajax event="itemChange" listener="#{controller.onChange}">
</t:accordion>

public void onChange(ItemChangeEvent event) {
    TabView tabView = event.getTabView();
    Tab activeTab = event.getTab();
}

The listener will be called with an instance of io.tornadofaces.component.tab.ItemChangeEvent that contains a reference to the new active item and the tab view.

Client Side API

Widget: TornadoFaces.widget.TabView

Method	Params	Return type	Description
select(index)	index: Index of the tab item to select	void	Activate or toggle the selected tab item

TabView

Basic

AJAX Loading, Custom CSS