jQuery Mobile in Visualforce pages

I am going to come right out and say I heart jQuery Mobile; it just makes creating a mobile device friendly page a snap. Yesterday, I was in Boston at one of our Developer Workshops where we spend a day with a bunch of developers talking about the Force.com platform. Typical me decided mid-morning that I wanted to change up some of the content for one of the afternoon sessions. The session I was going to present was covering Force.com Sites. My fear was that the session didn’t highlight how well the cloud and mobile development can go together. In particular, how the folks in the room could leverage their new found Visualforce and Apex awesomeness that we covered in the morning sessions.

Long story short, I threw together some very quick Visualforce pages which used jQuery Mobile to render the pages nicely on any mobile device. Here is all you need to do:

1. Add the jQuery Mobile libraries and CSS as static resources (or you can also refer directly to the libraries on the jQuery Mobile home page) under Setup –> Develop –> Static Resources. I like to bundle all my dependencies in a zip and refer to that bundle going forward. (see below)

2. Create my listings page. I was demoing the Big Cloud Realty Sites app (you can see it live here) which uses a real estate example. My goal was to show the current listings in a nice mobile friendly way.  Here is my listings Visualforce page with jQuery Mobile markup. Note the references to my jQuery Mobile bundles from step one. The rest of the jQuery Mobile magic is handled by the data-role divs and additional data-xxx attributes.

<apex:page standardController="Listing__c" recordSetvar="listings" showHeader="false" sidebar="false" standardStylesheets="false">
<head>
<apex:stylesheet value="{!URLFOR ($Resource.jquerymobile, '/jquery.mobile-1.0b1/jquery.mobile-1.0b1.css')}" />

<script src="{!URLFOR($Resource.HTML5Util, 'jquery.min.js')}" ></script>
<script src="{!URLFOR($Resource.HTML5Util, 'jquery.mobile.min.js')}" ></script>
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.11.custom.min.js')}" />
<link rel="stylesheet" href="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.11.custom.min.css')}" />

    <script>
        jQuery.noConflict();
    </script>

</head>

<body>
<div data-role="page" data-theme="b">
    <div data-role="header" data-add-back-btn="false">
         Big Cloud Mobile
    </div>

    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
          <li data-role="list-divider">For Sale</li>
          <apex:repeat var="a" value="{!listings}" id="list">
            <li><a href="/apex/MobileListingDetails?id={!a.id}" data-transition="flip">
                    <apex:outputField value="{!a.Tag_Line__c}"/>&nbsp;<apex:outputField value="{!a.Asking_Price__c}"/></a></li>
          </apex:repeat>
        </ul> 

     </div>

     <div data-role="footer" >
        Where Clouds find a home.
    </div>

</div>
</body>
</apex:page>

3. A listings page without a detail page isn’t very exciting, so I added quick details page:

<apex:page standardController="Listing__c" showHeader="false" sidebar="false" standardStylesheets="false">
<head>
<apex:stylesheet value="{!URLFOR ($Resource.jquerymobile, '/jquery.mobile-1.0b1/jquery.mobile-1.0b1.css')}" />

<script src="{!URLFOR($Resource.HTML5Util, 'jquery.min.js')}" ></script>
<script src="{!URLFOR($Resource.HTML5Util, 'jquery.mobile.min.js')}" ></script>
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-ui-1.8.11.custom.min.js')}" />
<link rel="stylesheet" href="{!URLFOR($Resource.jQuery, 'css/ui-lightness/jquery-ui-1.8.11.custom.min.css')}" />

    <script>
        jQuery.noConflict();
    </script>

</head>

<body>
<div data-role="page" data-theme="b">
    <div data-role="header" data-add-back-btn="false">
        <a href="/apex/MobileListings" data-icon="home" data-iconpos="notext" data-role="button" data-theme="b" data-transition="flip"/><br/>
         &nbsp;
    </div>

    <div data-role="content">

        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
          <li data-role="list-divider">Listing Details</li>
            <li>Agent: <apex:outputField value="{!Listing__c.Agent__c}"/></li>
            <li>Tag Line: <apex:outputField value="{!Listing__c.Tag_Line__c}"/></li>
            <li>Asking Price: <apex:outputField value="{!Listing__c.Asking_Price__c}"/></li>
            <li>Description: <apex:outputField value="{!Listing__c.Description__c}"/></li>
        </ul> 

     </div>

     <div data-role="footer" >
         <a href="/apex/MobileListings" data-icon="arrow-l" data-iconpos="notext" data-role="button" data-theme="b" class="ui-btn-left"/>
         <a href="/apex/MobileListings" data-icon="arrow-r" data-iconpos="notext" data-role="button" data-theme="b" class="ui-btn-right"/>

    </div>

</div>
</body>
</apex:page>

And, that’s it. As you can see from the code examples, 90% of everything is standard Visualforce, the rest is HTML markup.

With my funky new mobile page, I added an additional link to the Big Cloud Sites template, and we were good to go in less than an hour. But the proof is in the pudding, as they say. Go ahead and try it for yourself. Go to the Big Cloud Sites page, and click on the mobile link on your mobile device.

Published
July 15, 2011

Leave your comments...

jQuery Mobile in Visualforce pages