Last week, Eugene Oksman and I presented a webinar on the new Salesforce Mobile SDK. The SDK lets you develop mobile applications for Force.com and Database.com and the webinar included a high-level overview of the current mobile landscape, our mobile strategy going forward, and how to use the Mobile SDK to develop web and hybrid mobile applications. A recording of the webinar is now available. We’ve also posted the slides and compiled an FAQ based on the questions we received during the webinar. The only missing piece is the code that I demoed during the webinar. The code is available on GitHub and I’d like to highlight some of it here. I’ll organize my code walkthrough in the same order that I demoed the application during the webinar and so here goes. I’ve also included links to the points in the webinar recording that correspond to the respective demos.
Developing Web (HTML5) Mobile Applications Using Visualforce
Using Visualforce for Mobile Development
Here’s a small code snippet from the MerchandiseMobile Visualforce page.
Looking Like a Native Mobile App
Responding to Mobile Device Orientation Changes
Next up, how to respond to orientation changes in your mobile web application.
As you can see from the above snippet, it is as simple as using jQuery Mobile to bind to the ‘orientationchange’ event and taking appropriate action (e.g., with the CSS display property) when the user changes the device orientation. The advantage of using jQuery Mobile is that it automatically binds to the ‘resize’ event if the mobile browser does not support the standard ‘orientationchange’ event. Note that during the webinar I demoed a simple ‘split-view’ on the Merchandise detail page in Landscape mode (and hid the split-view in Portrait mode). This split-view design and code is for demo purposes only and if you’re interested in implementing something similar in your mobile app, you should look at something more robust and comprehensive like this jQuery plugin.
Responding to Mobile Touch Gestures
One of the advantages of using HTML5 is the ability to respond to touch gestures like ‘swipe right’, ‘double tap’, ‘pull down’ etc.
Testing and Debugging Mobile Web Apps
During the webinar, I demoed a great debugging tool for web mobile applications – Weinre. You can use Weinre to debug web (Visualforce) pages as they’re being rendered on an actual mobile device (or on an emulator/simulator) and is an invaluable tool for mobile developers. No code to share here – just watch the recording and get further details from the Weinre website.
Using HTML5 Offline Features
As you can see, the ‘manifest’ attribute is simply pointing to another Visualforce page. For further details on how to use the application cache, check out this excellent article by my colleague Josh Birk. In that article, you’ll also find pointers on how to use other HTML5 offline features like Web Storage and Web SQL Database to store dynamic data (like a list of Merchandise records).
Another thing that I demoed during the webinar was how to detect when you page has gone offline. Here’s the relevant code:
You can check navigator.onLine (caveat: apparently this does not work consistently across all browsers/devices) to determine if the device is currently online. You can also bind to the ‘offline’ event in order to be notified if the device goes offline while the user is viewing your web page.
Developing Hybrid Mobile Applications
If you’ve made it this far in the post, congratulations (and go get some water!). Apologies for the lengthy post, but hopefully this sample gives you a good starting point for your own mobile adventures. As always, questions and comments are welcome.