showcase.xhtml - primefaces - Next Generation Component Suite

Source path: svn/ examples/ trunk/ showcase/ src/ main/ webapp/ mobile/ showcase.xhtml

‹r7166

r7521

<f:view xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pm="http://primefaces.org/mobile"
	contentType="text/html">

    <pm:page title="Components">

        <!-- Main View -->
        <pm:view id="main">
            <pm:header title="Mobile" swatch="b">
            </pm:header>

            <pm:content>

                <p:dataList type="inset">
                    <f:facet name="header">Components</f:facet>
                    <h:outputLink value="#forms">Forms</h:outputLink>
                    <h:outputLink value="#buttons">Buttons</h:outputLink>
                    <h:outputLink value="#lists">Lists</h:outputLink>
                    <h:outputLink value="#navbar">NavBar</h:outputLink>
                    <h:outputLink value="#panels">Panels</h:outputLink>
                </p:dataList>
                
                <p:dataList type="inset">
                    <f:facet name="header">Framework</f:facet>
                    <h:outputLink value="#ajaxStatus">Ajax Status</h:outputLink>
                    <h:outputLink value="#ajaxUpdate">Ajax Updates</h:outputLink>
                </p:dataList>
                
                <p:dataList type="inset">
                    <f:facet name="header">Navigation</f:facet>
                    <h:outputLink value="#navHandler">Navigation Handler</h:outputLink>
                    <h:outputLink value="#transitions">Transitions</h:outputLink>
                </p:dataList>

            </pm:content>

        </pm:view>

        <!-- Forms -->
        <pm:view id="forms">
            <pm:header title="Forms">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>

                <p:inputText label="Input:" />
                
                <p:inputText label="Search:" type="search"/>
                
                <p:inputText label="Phone:" type="tel"/>
                
                <p:inputTextarea id="inputTextarea" label="Textarea:"/>
                
                <pm:field>
                    <h:outputLabel for="selectOneMenu" value="Dropdown: "/>
                    <h:selectOneMenu id="selectOneMenu">
                        <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </h:selectOneMenu>
                </pm:field>

                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />

                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />
                
                <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>
               
                <p:selectManyCheckbox id="checkbox" label="Checkboxes: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectManyCheckbox>
                
                <p:selectOneRadio id="radio" label="Radios: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectOneRadio>

            </pm:content>

        </pm:view>


        <!-- Buttons -->
        <pm:view id="buttons">
            <pm:header title="Buttons">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>

                <h3>Basic</h3>
                <p:commandButton value="Default" type="button"/>
                <p:commandButton value="With Icon" type="button" icon="check"/>
                <p:commandButton value="Icon Position" type="button" icon="refresh" iconPos="right"/>
                <p:commandButton value="Inline" type="button" icon="delete" inline="true" />

                <h3>Themes</h3>
                <p:commandButton value="Default" type="button" swatch="a"/>
                <p:commandButton value="With Icon" type="button" icon="check" swatch="b"/>
                <p:commandButton value="Icon Position" type="button" icon="refresh" iconPos="right" swatch="e"/>

                <h3>Grouping</h3>
                <pm:buttonGroup>
                    <p:commandButton value="Yes" type="button" icon="check"/>
                    <p:commandButton value="No" type="button" icon="delete"/>
                </pm:buttonGroup>
                
                <pm:buttonGroup orientation="horizontal">
                    <p:commandButton value="Yes" type="button" icon="check" />
                    <p:commandButton value="No" type="button" icon="delete" />
                </pm:buttonGroup>

            </pm:content>

        </pm:view>

        <!-- Lists -->
        <pm:view id="lists">
            <pm:header title="Lists">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>

                <h3>Read-Only</h3>
                <p:dataList>
                    <h:outputText value="Item 1" />
                    <h:outputText value="Item 2" />
                    <h:outputText value="Item 3" />
                </p:dataList>

                <p:spacer height="10em" />

                <h3>Links</h3>
                <p:dataList>
                    <h:outputLink value="#main">Item 1</h:outputLink>
                    <h:outputLink value="#main">Item 2</h:outputLink>
                    <h:outputLink value="#main">Item 3</h:outputLink>
                    <p:separator>Divider</p:separator>
                    <h:outputLink value="#main">Item 4</h:outputLink>
                    <h:outputLink value="#main">Item 5</h:outputLink>
                    <h:outputLink value="#main">Item 6</h:outputLink>
                </p:dataList>

                <p:spacer height="10em" />

                <h3>Inset</h3>
                <p:dataList type="inset">
                    <h:outputLink value="#main">Item 1</h:outputLink>
                    <h:outputLink value="#main">Item 2</h:outputLink>
                    <h:outputLink value="#main">Item 3</h:outputLink>
                </p:dataList>
                
                <h3>Filter</h3>
                <p:dataList>
                    <f:attribute name="filter" value="true" />
                    <h:outputText value="Barcelona" />
                    <h:outputText value="Istanbul" />
                    <h:outputText value="New York" />
                    <h:outputText value="Paris" />
                </p:dataList>

                <p:spacer height="10em" />

                <h3>Custom Content</h3>
                <p:dataList value="#{ringBean.players}" var="player">
                    <p:graphicImage value="/images/barca/#{player.photo}" />
                    <h3><h:outputLink value="#main">#{player.name}</h:outputLink></h3>
                    <p>#{player.position}</p>
                    <h:outputText styleClass="ui-li-count" value="#{player.number}" />
                </p:dataList>
            </pm:content>

        </pm:view>

        <!-- NavBar -->
        <pm:view id="navbar">
            <pm:header title="NavBar">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
                <pm:navBar>
                    <p:button value="Home" icon="home" href="#main?reverse=true" styleClass="ui-btn-active"/>
                    <p:button value="Info" icon="info" href="#main?reverse=true" />
                    <p:button value="Search" icon="search" href="#main?reverse=true" />
                </pm:navBar>
            </pm:header>

            <pm:content>
                <pm:navBar>
                    <p:button value="Home" icon="home" href="#main?reverse=true" styleClass="ui-btn-active"/>
                    <p:button value="Info" icon="info" href="#main?reverse=true" />
                    <p:button value="Search" icon="search" href="#main?reverse=true" />
                    <p:button value="Favs" icon="star" href="#main?reverse=true" />
                    <p:button value="Setup" icon="gear" href="#main?reverse=true" />
                </pm:navBar>
            </pm:content>
        </pm:view>

        <!-- Panels -->
        <pm:view id="panels">
            <pm:header title="Panels">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                <h3>Panel</h3>
                <p:panel header="Expanded">
                    Toggle panel content
                </p:panel>

                <p:panel header="Collapsed" collapsed="true">
                    Initially collapsed content
                </p:panel>
                
                <h3>Accordion Panel</h3>
                <p:accordionPanel>
                    <p:tab title="Title 1">
                        Content 1
                    </p:tab>
                    <p:tab title="Title 2">
                        Content 2
                    </p:tab>
                    <p:tab title="Title 3">
                        Content 3
                    </p:tab>
                </p:accordionPanel>

                <h3>Grid Layout</h3>

                <h4>2 Column</h4>
                <h:panelGrid columns="2">
                    <h:outputText value="Cell 1" />
                    <h:outputText value="Cell 2" />
                </h:panelGrid>

                <h4>3 Column</h4>
                <h:panelGrid columns="3">
                    <p:button value="Home" icon="home" href="#main?reverse=true" />
                    <p:button value="Info" icon="info" href="#main?reverse=true" />
                    <p:button value="Search" icon="search" href="#main?reverse=true" />
                </h:panelGrid>

                <h4>4 Column</h4>
                <h:panelGrid columns="4">
                    <h:outputText value="Cell 1" />
                    <h:outputText value="Cell 2" />
                    <h:outputText value="Cell 3" />
                    <h:outputText value="Cell 4" />

                    <h:outputText value="Cell 5" />
                    <h:outputText value="Cell 6" />
                    <h:outputText value="Cell 7" />
                    <h:outputText value="Cell 8" />
                </h:panelGrid>
                
            </pm:content>
        </pm:view>

        <pm:view id="target">
            <pm:header title="Target">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>

                <h1>Target View</h1>

            </pm:content>
        </pm:view>
        
        <pm:view id="transitionTarget">
            <pm:header title="Transition">
                <f:facet name="left"><p:button value="Back" icon="back" href="#transitions?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>

                <h1>Displayed with a transition.</h1>

            </pm:content>
        </pm:view>

        <!-- Ajax Status -->
        <pm:view id="ajaxStatus">
            <pm:header title="Ajax Status">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                Core PrimeFaces Ajax implementation is integrated with jQuery Mobile's built-in ajax loading dialog indicator.

                <h:form>
                    
                    <p:commandButton value="Count" actionListener="#{counterBean.increment}" update="txt_count" process="@this"/>
                    <h3><h:outputText id="txt_count" value="Counter: #{counterBean.count}" /></h3>
                    
                </h:form>

            </pm:content>
        </pm:view>

        <!-- Ajax Update -->
        <pm:view id="ajaxUpdate">
            <pm:header title="TODO">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                jQuery Mobile uses progressive enhancement on page elements to optimize them for mobile environment. This happens
                on page load and elements lose styles/behaviors attached after an ajax update. PrimeFaces fixes this mismatch
                by providing extensions whereas client side ajax of a JSF implementation causes various problems.

                <h:form>

                    <pm:field>
                        <h:outputLabel for="txt" value="Text:" />
                        <h:inputText id="txt" value="#{showcaseView.text}" />
                    </pm:field>

                    <h:panelGrid columns="2">
                        <p:commandButton value="PrimeFaces" actionListener="#{showcaseView.add}" update="txt txts" process="@form"/>
                        <h:commandButton value="JSF Impl" actionListener="#{showcaseView.add}">
                            <f:ajax render="txt txts" execute="@form"/>
                        </h:commandButton>
                    </h:panelGrid>

                    <p:dataList id="txts" var="text" value="#{showcaseView.texts}" type="inset">
                        <f:facet name="header">Values</f:facet>
                        #{text}
                    </p:dataList>

                </h:form>
            </pm:content>
        </pm:view>
        
        <!-- Navigation Handler -->
        <pm:view id="navHandler">
            <pm:header title="Navigation">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                View Navigation is integrated with JSF Navigation Model. Prepending the action outcome with "pm:" enables
                mobile view-to-view navigations.

                <h:form>
                    
                    <p:commandButton value="Go to Target" action="#{showcaseView.navigate}" />
                    
                </h:form>

            </pm:content>
        </pm:view>
        
        <!-- Transitions -->
        <pm:view id="transitions">
            <pm:header title="Transitions">
                <f:facet name="left"><p:button value="Back" icon="back" href="#main?reverse=true"/></f:facet>
            </pm:header>

            <pm:content>
                Various animation types are supported in view navigations.
 
                <p:button value="Fade" href="#transitionTarget?transition=fade" />

                <p:button value="Pop" href="#transitionTarget?transition=pop" />
                
                <p:button value="Flip" href="#transitionTarget?transition=flip" />
                
                <p:button value="Turn" href="#transitionTarget?transition=turn" />
                
                <p:button value="Flow" href="#transitionTarget?transition=flow" />
                
                <p:button value="Slide" href="#transitionTarget?transition=slide" />
                
                <p:button value="SlideUp" href="#transitionTarget?transition=slideup" />
                
                <p:button value="SlideDown" href="#transitionTarget?transition=slidedown" />
                
                <p:button value="None" href="#transitionTarget?transition=none" />
                    
            </pm:content>
        </pm:view>

    </pm:page>

</f:view>

Show details Hide details

Change log

r7194 by cagatay.civici on Mar 17, 2012 Diff

Sample update

Go to:

Project members, sign in to write a code review

Older revisions

r7166 by cagatay.civici on Mar 14, 2012 Diff

Sample update

r7163 by cagatay.civici on Mar 14, 2012 Diff

Sample update

r7161 by cagatay.civici on Mar 14, 2012 Diff

Sample update

All revisions of this file

File info

Size: 16119 bytes, 395 lines

View raw file