<h3>
The build environment
</h3>


We used Netbeans 7 to create a regular Web/JSF project with Mojarra 2.1.3. We required no special libraries except for Mojarra itself and the MySQL database connectors. We only made sure we have included JQuery and JQuery mobile in the head section of each mobile page. See below. 



<pre class="brush: js">

 &lt;meta name="viewport" content="width=device-width, initial-scale=1" />

 &lt;link rel="stylesheet"
 href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />

 &lt;script type="text/javascript"
 src="http://code.jquery.com/jquery-1.6.4.min.js">
 &lt;/script>

 &lt;script type="text/javascript"
 src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">
 &lt;/script>

</pre>



<h4>
The Home Page
</h4>


A JQuery mobile page may contain several views. Our home page below has 2 views identified by data-role="page" in line 37 and 103. 

The default active visible view is the first view in the page. Our second view (id="about") is activated as modal dialog as seen in line 94 (data-rel="dialog").



Each view of our mobile pages contain 3 basic blocks, a header (data-role="header"), a content (data-role="content"), and a footer (data-role="footer"), lines 39, 46, and 81 respectively. We also used data-theme in each block to change the look and feel of the page. Please see the data attributes reference for the complete list of data attributes supported by JQuery Mobile 1 here (<a href="http://jquerymobile.com/test/" target="_blank" class="news_link" title="JQuery Mobile 1.0 Documentation">JQuery Mobile Documentation</a>).


The following uses multi page template with our About page (line 103) in the same XHTML document. A separate XHTML document may be created for single page templates.



<pre class="brush: xml;highlight: [37,94,103,39,46,81,86]">
&lt;?xml version='1.0' encoding='UTF-8' ?>
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html">
 &lt;h:head>
 &lt;title>The Kahimyang Project Mobile</title>

 &lt;link href="./images/favicon.ico" rel="shortcut icon" 
 type="image/x-icon"/>

 &lt;meta name="viewport" 
 content="width=device-width, initial-scale=1" />
 &lt;link rel="stylesheet"
 href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 &lt;script type="text/javascript"
 src="http://code.jquery.com/jquery-1.6.4.min.js">

 &lt;/script>
 &lt;script type="text/javascript"
 src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js">

 &lt;/script>

 &lt;script src="./js/jquery.timeago.js" 
 type="text/javascript">&lt;/script>
 &lt;script type="text/javascript">
 jQuery(document).ready(function() {
 jQuery("span.timeago").timeago();
 });
 &lt;/script>
 &lt;/h:head>

 &lt;body>
 &lt;div data-theme="b" data-role="page" id="main">

 &lt;div data-role="header">
 &lt;div data-theme="a" data-role="content">
 &lt;h:outputText style="font-style: italic;"
 value="The Kahimyang Project Mobile" />
 &lt;/div>
 &lt;/div>

 &lt;div data-theme="e" data-role="content">

 &lt;ui:repeat value="#{kmBean.blogsList}" var="blog">
 &lt;h:panelGrid 
 styleClass="left-text ui-corner-all ui-shadow"
 style="padding:10px;margin-bottom: 15px;width:100%;">

 &lt;a style="font-weight: bold;text-decoration: none;"
 href="/mobile/Blog.xhtml?id=#{blog.id}"
 data-transition="flip" data-theme="b">
 #{blog.title}
 &lt;/a>

 &lt;!-- Removed for clarity -->


 &lt;h:outputText escape="false"
 style="font-size: 11px;font-style: italic;"
 value="#{blog.first}" />


 &lt;a data-role="button"
 data-transition="flip"
 href="/mobile/Blog.xhtml?id=#{blog.id}"
 data-inline="true"
 data-theme="b"
 data-iconpos="notext"
 data-icon="arrow-r" >Continue reading&lt;/a>

 &lt;/h:panelGrid>

 &lt;/ui:repeat>

 &lt;/div>

 &lt;div data-position="fixed" data-role="footer">
 &lt;div data-role="navbar" >
 &lt;ul>
 &lt;li>
 &lt;a href="/mobile/Search.xhtml"
 rel="external" data-icon="search" >Search&lt;/a>
 &lt;/li>
 &lt;li>
 &lt;a data-icon="grid" rel="external"
 href="/mobile/Map.xhtml" >Locate Us&lt;/a>
 &lt;/li>
 &lt;li>
 &lt;a data-icon="info"
 data-rel="dialog" href="#about" >About Us&lt;/a>
 &lt;/li>
 &lt;/ul>
 &lt;/div>
 &lt;/div>
 &lt;/div>

 &lt;!-- About page -->

 &lt;div data-theme="e" data-role="page" id="about">

 &lt;div data-role="header">
 &lt;p style="float:right;font-size: medium">About Us&lt;/p>
 &lt;/div>

 &lt;div data-role="content">
 &lt;h:panelGrid style="width:100%;padding:10px;"
 styleClass="left-text ui-corner-all ui-shadow">

 &lt;p>
 Contact us at kahimyang@gmail.com for 
 any matters related to this site.
 &lt;/p>

 &lt;/h:panelGrid>
 &lt;/div>

 &lt;div data-role="footer">
 &lt;p style="float:left;font-size: small;">
 Copyright 2011,&nbsp;&nbsp;The Kahimyang Project
 &lt;/p>
 &lt;/div>
 &lt;/div>
 &lt;/body>
&lt;/html>

</pre>



rel="external" (and ajax="false") cause an anchor page to be refreshed and date-transition to "none". See line 86 in our home page.



<h4>
The backing bean
</h4>


Below is the backing bean of the page above. This is used primarily as the value of ui:repeat tag of our main content block. 



<pre class="brush: java">
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package org.kahimyang.mobile;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;


@ManagedBean
@RequestScoped
public class KmBean {

 public KmBean() {
 }

 private List&lt;Blogs> blogsList=null;

 public List&lt;Blogs> getBlogsList() {

 if (blogsList != null) {
 return blogsList;
 }

 Database db = new Database();
 Connection conn = null;

 try {
 conn = db.dbconnect();
 } catch (Exception e) {

 }

 final String q = "query string";

 try (
 Statement stmt = conn.createStatement();
 ResultSet set = stmt.executeQuery(q)) {
 if (set.first()) {

 blogsList = new ArrayList<>();
 String id;
 String title;
 String link;
 while (!set.isAfterLast()) {
 
 // Some lines removed for clarity

 Blogs b = new Blogs(id, title, f.format(D),F);
 b.setTimeAgo(timeago);
 blogsList.add(b);

 set.next();
 }

 }

 } catch (Exception e) {

 }

 return blogsList;

 }

 public class Blogs {

 String id;
 String title;
 String date;
 String first;

 public Blogs(String id, String title, 
 String date, String first) {
 this.id = id;
 this.title = title;
 this.date = date;
 this.first = first;
 }

 public String getId() {
 return id;
 }

 public void setId(String s) {
 id = s;
 }

 public String getTitle() {
 return title;
 }

 public void setTitle(String s) {
 title = s;
 }

 public String getDate() {
 return date;
 }

 public void setDate(String s) {
 date = s;

 }

 public String getFirst () {
 return first;
 }


 public void setFirst (String s){
 first = s;
 }
 }

}

</pre>



Our JSF/JQuery website uses the default configuration. Here is the <a href="http://jquerymobile.com/test/docs/api/globalconfig.html" target="_blank" 

class="news_link" title="Configuration">configuration parameters</a> if you want to change the default behaviour of your website.



*Below is a sample configuration that overrides touchOverflowEnabled to enable smoother page transitions and true fixed toolbars and defaultDialogTransition. 



<pre class="brush: js">
 &lt;script type="text/javascript">
 $(document).bind("mobileinit", function(){
 $.extend( $.mobile , {
 touchOverflowEnabled: true,
		defaultDialogTransition: 'slide' 
 });
 }); 
 &lt;/script> 
</pre>



*The configuration above is an update to our website on December 12, 2011 inserted in the head section just after the JQuery mobile include.




That's it. Good luck.

Building a mobile website with JSF 2 core and JQuery Mobile 1.0