View Source

h2. Overview
_Since 4.0_

The mobi:viewManager component provides a way to display multiple views in a manner that is more suitable for mobile devices. It renders a list of titles of verious views, which the user can touch to load the corresponding view. A built-in back button allows the user to go back to the list of views, without reloading the page. The component also provides other features that make navigation more efficient on mobile devices.

h2. Getting Started

The basic use case of the ViewManager component consists of simply placing mobi:view tags with any arbitrary content inside the mobi:viewManager tag.

{code:xml}
<mobi:viewManager title="View Manager"
transitionType="#{bean.transitionType}"
selected="#{bean.selectedView}"
history="#{bean.history}">

<mobi:view id="view1" title="View 1">
<h:outputText value="View 1 content..." />
</mobi:view>
<mobi:view id="view2" title="View 2">
<h:outputText value="View 2 content..." />
</mobi:view>

</mobi:viewManager>
{code}

h2. Attributes

{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://res.icesoft.org/docs/v4_latest/mobi/tld/].{tip}

{panel}
The *title* in mobi:viewManager specifies the main header title.
{panel}

{panel}
The *selected* attribute stores the currently selected view. The value has to be an id of a child mobi:view component.
{panel}

{panel}
The *transitionType* attribute specifies the effect to be used when transitioning to a different view.
{panel}

{panel}
In the *history* property, the stack history will be stored (must resolve to Stack<String>).
{panel}

{panel}
The *title* in mobi:view specifies the view title in the list and in the header when such view is selected.
{panel}

{panel}
The *navBarGroup* specifies the group to which this view belongs. It's used to group related views.
{panel}

{panel}
The *divider* attribute specifies a title of a divider to insert before this view in the list and thus group different view in the list.
{panel}

{panel}
The *menuIcon* specifies the name of an icon to be used for this view in the main menu. It must correspond to a Font Awesome icon class (without the fa- prefix). Available names can be found here http://fortawesome.github.io/Font-Awesome/icons/ .
{panel}

h2. Event Listeners

None.

h2. Client Behavior Events

None.

h2. JavaScript API

None.

h2. Keyboard Support

None.

h2. Known Issues

None.

h2. Additional Resources

h4. External Links

* http://fortawesome.github.io/Font-Awesome/icons/

h4. Sample Applications

This component appears in the following ICEfaces sample applications:

* *[ICEfaces Mobile Showcase|http://icefaces-showcase.icesoft.org/showcase-mobile.jsf]*

h4. Tutorials

This component appears in the following ICEfaces tutorials:

*None*