Are you a mobile app developer? If you answered no, then here’s another question – do you know JavaScript? If you answered yes, then whether or not you realize it, you already have the skills to be a mobile developer. There are many excellent native apps out there that are written for specific mobile platforms like iOS (Objective-C) and Android (Java). However, a significant percentage of mobile apps are web apps that use technologies like HTML5, CSS3 and yes, JavaScript. Any developer experienced with these web languages and standards can build compelling mobile apps without having to learn new languages like Objective-C (not that there is anything wrong with that).

Our newly announced Mobile Packs are meant to ease the process of developing JavaScript and HTML5 web mobile apps that connect to Salesforce data, all while using popular frameworks like jQuery Mobile, AngularJS and Backbone.js. I’d like to discuss the Mobile Pack for jQuery Mobile in more detail in this post.

 

What is jQuery Mobile?

jQuery Mobile (aka jQM) is a touch-optimized web framework that lets you develop mobile web applications using HTML5, JavaScript and CSS3 for a wide variety of smartphones and tablets. As the name implies, it’s built on top of the famous jQuery library, but adds UI widgets/elements (like List Views), page transitions (like flip and slidefade) and interactions models (like responding to swipe events) that are optimized for a mobile device. The framework also supports responsive widgets that render according to the form factor of the viewing device.

Its also important to remember what jQuery Mobile is not. Unlike AngularJS, Backbone.js and other JavaScript frameworks, jQuery Mobile does not provide an MV* abstraction for your JavaScript code. In fact, jQuery Mobile has no native data bindings and its the app’s responsibility to manage the data model, sync. data between the front-end and the server and then update the page DOM. In that sense, jQuery Mobile is complimentary to MV* frameworks and many mobile apps combine jQM with a framework like Backbone.js to implement complex UI/logic. jQuery Mobile provides the mobile optimized UI framework while something like Backbone.js provides the modular organization and separation of concerns for your JavaScript code.

 

What is the Mobile Pack for jQuery Mobile?

The Mobile Pack is a set of sample apps that demonstrate the use of jQuery Mobile to build mobile HTML5 apps that interact with Salesforce data. The pack includes samples and quick starts that cover both options for deploying such web apps – on Force.com (via Visualforce) or externally (e.g. Heroku). In either case, the sample is a simple contact management app that provides basic CRUD access to the standard Contact object. Lets dive deeper into each of those two options.

 

Using jQuery Mobile in a Visualforce page

The jQuery Mobile in Visualforce sample is available as an unmanaged package (follow the quick start to install and test it) as well as on GitHub. The MobileSample_jQueryMobile Visualforce page forms the heart of that application. Here is a small snippet from that page.

        <div data-role="page" data-theme="b" id="listpage">
            <div data-role="header" data-position="fixed">
                <h2>Contacts</h2>
	            <a href='#' id="add" class='ui-btn-right' data-icon='add'
                           data-theme="b">Add</a>
            </div>
            <div data-role="content" id="contactList">
                <ul id="cList" data-filter="true" data-inset="true" data-role="listview"
                    data-theme="c" data-dividertheme="b">
                </ul>
            </div>
        </div>

The jQM framework uses <div> tags with special attributes like ‘data-role’ and ‘data-theme’ for the basic page structure. You can learn more about the structure of a jQuery Mobile page here. Another distinguishing feature of the jQuery Mobile framework is the ability to include multiple ‘pages’ of a mobile web app in a single HTML source. The MobileSample_jQueryMobile Visualforce page includes both the initial ‘list view’ (<div… id=”listpage”>) and the subsequent ‘detail view’ (<div… id=”detailpage”>) for the Contact records. jQuery Mobile manages the navigation between these two views via calls to the jQuery.mobile.changePage method.

Next, lets review how to bind Salesforce data with your jQM + Visualforce app. There are a couple of options to choose from. I’ve also covered these options and their respective pros and cons in greater detail before.

ForceTK

This is the option that the sample uses. ForceTK is a simple JavaScript abstraction for the Force.com REST API. Here is a small snippet from the MobileSample_jQueryMobile page that shows the use of ForceTK to query Contact records via JavaScript.

<script type="text/javascript">
    var restAPIClient = new forcetk.Client();
    restAPIClient.setSessionToken('{!$Api.Session_ID}');

    function getAllContacts(){
        $j.mobile.showPageLoadingMsg();
        var q = "select id, firstName, lastName, phone
                 from Contact order by FirstName";
        restAPIClient.query(q ,
                  function(response) {
                        showContacts(response.records);
                  });
    }
</script>

Once the REST API returns the SOQL query result, the showContacts callback method uses basic DOM manipulation to add <li> elements to the jQM list view for each of the Contact records.

Tip: If you manipulate a jQM listview via JavaScript (like adding new <li> elements as above), you must call the ‘refresh’ method on it to update the visual styling. Look at line 61 of the VF page for a sample.

The JavaScript code to update, add and delete Contact records using the ForceTK library is similarly succinct and straightforward. Refer to the addUpdateContact and deleteContact JavaScript functions in the Visualforce page for a sample.

RemoteTK

Since ForceTK uses API calls for every server-side interaction, another alternative is to use the RemoteTK variant of that library in your jQM Visualforce app.

JS Remoting

Somewhat similar to actionFunction, JavaScript Remoting lets you invoke methods in your Apex controller via JavaScript on the Visualforce page. You can refer to the Cloud Hunter scavenger hunt application for an example of using JS Remoting in a jQuery Mobile Visualforce app.

 

Using jQuery Mobile in an externally hosted web page

The mobile pack also includes samples of developing a jQuery Mobile web app that is hosted outside the Force.com platform, but sources its data from Salesforce. There is a Node.js sample and a PHP sample, both hosted on Heroku. It is important to remember that you can deploy such web apps on any platform/app server. Heroku is used as the deployment target in the sample apps included in the pack, but the patterns (and code) can be used on any web hosting environment. The basic structure and organization of the Heroku sample apps is nearly identical to the Visualforce jQM sample discussed earlier. In all cases, the app provides CRUD access to the Contact object via list and edit/add views. There are however three things that are unique to externally hosted jQM apps that need to source Salesforce data.

  1. Authentication: Unlike Visualforce, an external web app won’t have valid Salesforce credentials by default. The app therefore needs some additional OAuth 2.0 scaffolding code to acquire a valid session token that can used for subsequent API calls. Here’s a small snippet from the Node.js sample that does this OAuth ‘dance’ with Salesforce.
    var client = new forcetk.Client(clientId, loginUrl, proxyUrl);
    $j(document).ready(function() {
       if(client.sessionId == null) {
    	  var oauthResponse = {};
    	  if (window.location.hash && window.location.href.indexOf('access_token') > 0){
    			var message = window.location.hash.substr(1);
    			var nvps = message.split('&');
    			for (var nvp in nvps) {
    			    var parts = nvps[nvp].split('=');
    				oauthResponse[parts[0]] = unescape(parts[1]);
    			}
    			if(oauthResponse['access_token']) {sessionCallback(oauthResponse);}
    	    } else {
    			url = getAuthorizeUrl(loginUrl, clientId, redirectUri);
    			window.location.href = url;
    	    }
       }
    });
  2. Data binding: An externally hosted web app has to use the Force.com REST API for binding Salesforce data to a jQM app (JS Remoting is not an option). The ForceTK wrapper is therefore the perfect compliment for such an app and both the Node.js and PHP samples use it to query, update and add Contact records. Check out the mobileapp.js script in the Node.js sample for an example of how to use ForceTK to bind Salesforce data to an externally hosted jQM application.
  3. Proxy: Due to the same origin policy, JavaScript running on any host other than *.salesforce.com cannot use XmlHttpRequest to directly invoke the REST API via ForceTK. This requires the use of a small proxy in our Heroku samples and you can see an example of the proxy code in the app.js script of the Node.js sample. We’ve also created a separate GitHub repo to host samples of such proxy apps for Node.js and PHP. Feel free to fork and reuse those snippets in your own app.

 

Next Steps

The Visualforce and Heroku quick starts for the jQuery Mobile Mobile Pack list some specific next steps to take your nascent jQM skills to the next level. You can also convert a pure HTML5 jQM application into a hybrid one using the Salesforce Mobile SDK and get access to device features like the camera, microphone and more. The simplicity of the jQM framework makes it an ideal entry point for web developers looking to build their first mobile app and I highly encourage you to try it. Let me know how you do with the Mobile Pack and ways for us to improve it. Till then, happy coding.

tagged , , , Bookmark the permalink. Trackbacks are closed, but you can post a comment.