What is jQuery Mobile?
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.
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.
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.
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.
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.
- 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.
- 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.
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.