Chapter 7. Using RichFaces for Mobile Applications

7.1. Configuring a RichFaces Application for Mobile Devices

Procedure 7.1. Configuring a RichFaces Application for Mobile Devices

  1. Important

    Ensure you copy the physical .js and .css files locally before developing your application.
    To combine the out-of-the-box JavaScript and CSS code into a few files, add the following code to your project's web.xml file:
    <context-param>
       <param-name>org.richfaces.resourceOptimization.enabled</param-name>
       <param-value>true</param-value>
    </context-param>
  2. To initialize the JavaScript and CSS which allows RichFaces to function on a mobile device, add the following code to your template:
    <link rel="stylesheet" href="https://raw.github.com/richfaces/components/develop/mobile-compatibility/slidfast.css" />
     
    <script type="text/javascript" src="https://raw.github.com/richfaces/components/develop/mobile-compatibility/slidfast.js"></script>
     
    <script type="text/javascript">
    slidfast({
                   defaultPageID:'home-page',
                   defaultPageHash: 'home',
                   backButtonID: 'back-button'
               });
    </script>
    The snippet sets up the mandatory default parameters to get your application running.
    defaultPageID
    The actual ID of the HTML element (div) surrounding your code for the home page.
    defaultPageHash
    This can be any valid URL character set and is the bookmark and identifier for your home page.
    backButtonID
    The ID attribute of the application’s back button. This parameter is optional since the mobile JavaScript (slidfast) already accounts for use of the browser back and forward buttons.
  3. After initializing the mobile front end, you must ensure your markup is in proper order. At a minimum, you are required to adhere to the following markup structure. This provides the framework used for testing and debugging the RichFaces mobile showcase.
    <h:body>
       <!--Include the CSS code after the body tag to ensure you overwrite dynamic styles-->
       <link rel="stylesheet" href="https://raw.github.com/richfaces/components/develop/mobile-compatibility/rf-mobile-skin.css" />
             <div id="browser">
                <header>...</header>
                <h:form>
                   <div id="page-container">
                      <div id="home-page">
                         … JSF and HTML markup
                      </div>
                   <div id="component-page">
                         … JSF and HTML markup
                   </div>
                </div>
          </h:form>
       </div>
    </h:body>

    Note

    For a complete working example and to see how the page is setup, see the source of the RichFaces Mobile Showcase application template here. Alternatively, run the RichFaces simpleapp archetype with the mobile-optimized switch set to true:
    mvn archetype:generate \
    -DarchetypeGroupId=org.jboss.archetype.wfk \
    -DarchetypeArtifactId=richfaces-archetype-simpleapp \
    -DarchetypeVersion=2.7.0.Final \
    -Dmobile-optimized=true