Salesforce | Mobilizing a Visualforce page using jQuery Mobile

In today's mobile world, users today expect nearly the same, if not better, level of access to the same applications and data on their mobile devices, that they have on their stationary devices. Failure to provide this type of access can lead to a lack of adoption of an application, delays in business workflows, and even breakdowns of critical business processes.

An easy solution is to create mobile-friendly Visualforce pages and Visualforce apps that allow users access to data and business processes. In this post, we are going to take look at how we can create simple mobile friendly Visualforce pages using jQuery Mobile.

Mobilizing a Visualforce page using jQuery Mobile requires the use of jQuery Mobile stylesheets instead of the standard Salesforce stylesheets. This means that standard Visualforce components controlling layout, such as <apex:pageBlock /> and <apex:pageBlock />, cannot be used. Instead, the jQuery Mobile specific styles must be used to layout and organize data.

In this Example, we will create a mobile Visualforce page that displays the top 10 opportunities by value. This page will use a jQuery Mobile grid to lay out the information in two columns.

/******************************************************************* * Custom controller for the “Mobilizing a Visualforce Page” Example. * Manages a list of of the 10 top value opportunities. *******************************************************************/
public with sharing class MobileOppsCntr
{ 
    // the list of opportunities public List opps {get; set;}
    // constructor public MobileOppsCntr(){
    opps=[select Name, Amount from Opportunity where Amount != null order by Amount desc limit 10]; }
}

<apex:page docType=”html-5.0″ applyHtmlTag=”false” applyBodyTag=”false” controller=”MobileOppsCntr” sidebar=”false” showheader=”false” standardstylesheets=”false”>
    <HTML>
        <head>
            <title>Top 10 Opportunities</title>
            <meta name=”viewport” content=”initial-scale=1, maximum-scale=1, height=device-height, width=device-width” />
            <apex:styleSheet value=”https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.1/jquery.mobile-1.3.1.min.css” />
            <apex:includeScript value=”https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js”/>
            <apex:includeScript value=”https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.3.1/jquery.mobile-1.3.1.min.js”/>
        </head>
        <body>
            <div data-role=”page” id=”main”>
                <div data-role=”header”>
                    <h1>Opportunities</h1>
                </div>
                <!– /header –>
                <div data-role=”content”>
                    <h2>Top 10 by Value</h2>
                    <div class=”ui-grid-a”>
                        <div class=”ui-block-a”>
                            <strong>Amount</strong>
                        </div>
                        <div class=”ui-block-b”>
                            <strong>Name</strong>
                        </div>
                        <apex:repeat value=”{!opps}” var=”opp”>
                            <div class=”ui-block-a”>
                                <apex:outputField value=”{!opp.Amount}”/>
                            </div>
                            <div class=”ui-block-b”>
                                <apex:outputText value=”{!opp.Name}”/>
                            </div>
                        </apex:repeat>
                    </div>
                </div>
            </div>
        </body>
    </html>
</apex:page>

How it works…

Device browsers often assume that the user is viewing a desktop size page and size their display accordingly. Mobile Safari browser, for example, will assume a width of 980 px and zoom out to fit in all the content. To avoid this, we have to set a viewport through an HTML meta tag to match the dimensions of the device.

<meta name=”viewport” content=”initial-scale=1, maximum-scale=1, height=device-height, width=device-width” />

The initial-scale and maximum-scale tags ensure that the browser does not zoom out when initially rendering the page, and that the user cannot zoom the page in or out. It also allows the jQuery Mobile framework to scroll the page down by 60 pixels to hide the mobile Safari navigation bar.

A jQuery Mobile page is defined as a div with a data-role attribute of page.

<div data-role=”page” id=”main”>

Inside the page container, additional <div> elements are defined to specify the header bar (with a data-role attribute of header) and the main body of the page (with a data-role attribute of content).

<div data-role=”header”>
    <h1>Opportunities</h1>
</div>
<!– /header –>
<div data-role=”content”>
    <h2>Top 10 by Value</h2>
    …
</div>

Further, the <div> elements generate the grid layout, while a standard Visualforce <apex:repeat /> component iterates the opportunities from the controller and outputs them in individual grid cells.

<div class=”ui-grid-a”>
    <div class=”ui-block-a”>
        <strong>Amount</strong>
    </div>
    <div class=”ui-block-b”>
        <strong>Name</strong>
    </div>
    <apex:repeat value=”{!opps}” var=”opp”>
        <div class=”ui-block-a”>
            <apex:outputField value=”{!opp.Amount}”/>
        </div>
        <div class=”ui-block-b”>
            <apex:outputText value=”{!opp.Name}”/>
        </div>
    </apex:repeat>
</div>

Page-reference: http://www.slideshare.net/developerforce/visualforce-in-salesforce1-optimizing-your-user-interface-for-mobile