Lists

outputList

The outputList component can be used to generate navigation hierarchies or simple display a list of data. Perhaps one on the most widely used constructs for mobile applications.

Note outputList renders it's own children which must be of class outputListItem. The outputListItem can contain have any type of child.

Usage (basic and backwards compatible)

<mobi:outputList inset="false">
    <mobi:outputListItem group="true">
        Common Link Structure
    </mobi:outputListItem>
    <mobi:outputListItem>
        <h:link>Link to this page</h:link>
    </mobi:outputListItem>
    <mobi:outputListItem>
        <h:commandLink action="#{navigationController.navigateBack}">
            Link back to main menu</h:commandLink>
    </mobi:outputListItem>
</mobic>

Usage with lists of items (new!).


   <h:form id="layoutform">
    <h5>this list has list of commandLinks</h5>
        <mobi:outputList id="commandLinkList" inset="true">
            <mobi:outputListItem type="group">commandLinks List</mobi:outputListItem>
            <mobi:outputListItems value="#{list.linksList}" var="cmdLnk">
                <h:commandLink  value="#{cmdLnk.title}" action="#{cmdLnk.getAction}"/>
            </mobi:outputListItems>
        </mobi:outputList>
    </h:form>

this corresponds to a list of links from a backing bean which contain urls. Lists of anything can be used and the formatting of the original outputListItem is propagated for each item in the list.

Theming

OutputList supports device theming by providing default styles for Apple, Android and Blackberry. CSS class names are as follows:

mobi-list
- mobi-list-item mobi-fieldset-row | (mobi-list-item-group )

Component Documentation

outputList
outputListItem
outputListItems