It’s so much easier when you have to actually build something FOR REAL and you have a guided visual introduction to the technology, the gotchas, different design patterns and how things are connected. In 30-45 minutes I’ll share with you my lessons learned over the last month while building a mobile application which includes -- the anatomy of a Visualforce Page, How to exchange data with SFDC, dynamically update content, debug your code and gracefully handle exceptions. Enabling you dive into Mobile Development with some level of comfort with you’re ready.
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
How to Tango with Salesforce & jQueryMobile for HTML5 Goodness
1. How to Tango with Salesforce &
jQueryMobile for HTML5 Goodness
By Joshua Hoskins | @jhoskins
Moscone Center West, DevZone Unconference C
2. All about Me
Joshua Hoskins
Technical Cloud Consultant at
Customer since 2006 Twitter: @jhoskins
User Group Leader since 2009 Email: jhoskins@CRMified.com
Currently in Singapore
LinkedIn:
Process Engineering http://www.linkedin.com/in/jhoskins
Implementation/Solution Delivery Blog: CRMified.com
Data & Integrations Architect
3. Agenda
• Anatomy of a Visualforce Page
• Exchanging Data with SFDC
• Dynamically updating page content
• Debug Javascript Errors
• Gracefully Handle Apex Exceptions
6. Page Anatomy
• Add 'head', references to jQuery, jQuery Mobile and the
mobile theme CSS are all required.
• jQuery Mobile 1.1.1 and 1.7.1 versions of jQuery core.
• Keep the jQuery libraries as static resources.
• A Single Visualforce page will contain multiple mobile pages.
8. jQuery Mobile & Force.com
• Initialize jQuery Mobile on the page
• What is noConflict() on jQuery?
<script>
var $j = jQuery.noConflict();
$j(document).ready(init);
function init() {
// Initialization code goes here
}
</script>
9. Page Content and Transitions
• DIV Containers are Mobile Pages
• Page Transitions switch DIV show to user
• Requests are done by Ajax by default
• Form Submissions & Data Requests
• Set tag rel="external" on the form tag for standard HTML submit
action
• For best user experience include all Mobile Pages in One
Visualforce Page
10. Page Content and Transitions
<div id="splash-page" data-role="page" data-theme="a" data-position="fixed">
<div data-role="header" data-position="fixed">
<h1>Initiating Business Conversations</h1>
</div>
<!-- /header -->
<div data-role="content" align="center”>
..... page content, input components etc. goes here
</div>
Example:
<a href="#close-conversation-page" data-role="button" data-icon="check" data-transition="slideup">Close</a>
19. Appirio Helps Enterprises Power Their Business with
Public Cloud Solutions
Helping Enterprises Become:
Efficient Effective Agile
Social Mobile
Technology-enabled professional services, supported by
500 cloud experts and a 50,000+ cloud developer community
5 years, 300 enterprises, 1.5M users moved to the cloud
19
Notas do Editor
Customer since 2006 User Group Leader since 2009 Currently in Singapore Companies I’ve worked for are listed.
Many libraries including SF own make use of $ as function or variable name call noConflict method to prevent conflict with other libraries
Single page serves as container for multiple mobile pages represented as div elements. Number of different page transitions are available typically jQuery simply switches div that is visible on mobile device to show a new page. Requests are done as ajax by default, things such as form submit for example The standard form submit or use of apex:form tag is possible only by turning OFF default ajax processing for the page segment (set tag rel="external" on the form tag for standard HTML submit action) For best user experience and application performance it is best to have all pages in same HTML Open IDE
Call remote Controller methods from jQuery, JavaScript Visual Force with Winter 12' release introduced remote methods. Simple annotation @RemoteAction makes any controller method remote and can be called from page JavaScript can pass methods parameters as primitive types, sObjects and collections of primitives and sObjects Controller methods must be global static to be remote NOTE: Documentation states global or public but public methods do not work NOT visible some bug in APEX or VFP
Call remote Controller methods from jQuery, JavaScript Visual Force with Winter 12' release introduced remote methods. Simple annotation @RemoteAction makes any controller method remote and can be called from page JavaScript can pass methods parameters as primitive types, sObjects and collections of primitives and sObjects Controller methods must be global static to be remote NOTE: Documentation states global or public but public methods do not work NOT visible some bug in APEX or VFP
Call remote Controller methods from jQuery, JavaScript Visual Force with Winter 12' release introduced remote methods. Simple annotation @RemoteAction makes any controller method remote and can be called from page JavaScript can pass methods parameters as primitive types, sObjects and collections of primitives and sObjects Controller methods must be global static to be remote NOTE: Documentation states global or public but public methods do not work NOT visible some bug in APEX or VFP
Call remote Controller methods from jQuery, JavaScript Visual Force with Winter 12' release introduced remote methods. Simple annotation @RemoteAction makes any controller method remote and can be called from page JavaScript can pass methods parameters as primitive types, sObjects and collections of primitives and sObjects Controller methods must be global static to be remote NOTE: Documentation states global or public but public methods do not work NOT visible some bug in APEX or VFP
Call remote Controller methods from jQuery, JavaScript Visual Force with Winter 12' release introduced remote methods. Simple annotation @RemoteAction makes any controller method remote and can be called from page JavaScript can pass methods parameters as primitive types, sObjects and collections of primitives and sObjects Controller methods must be global static to be remote NOTE: Documentation states global or public but public methods do not work NOT visible some bug in APEX or VFP
Call remote Controller methods from jQuery, JavaScript Visual Force with Winter 12' release introduced remote methods. Simple annotation @RemoteAction makes any controller method remote and can be called from page JavaScript can pass methods parameters as primitive types, sObjects and collections of primitives and sObjects Controller methods must be global static to be remote NOTE: Documentation states global or public but public methods do not work NOT visible some bug in APEX or VFP
Appirio helps enterprises power their business with cloud solutions like Salesforce, Google, Workday and Amazon By adopting, connecting and extending these and other cloud platforms, we can help customers to become more efficient, agile and effective than ever before We do this with professional services that are delivered by our 500+ cloud experts and supported by a 40,000 person developer community and unique technology built from over 1000 projects We ’ve been in business for 5 years, have worked with 300 enterprises and have moved more than 1.5M users to the public cloud We ’ve been privileged to work with many of the world’s largest and most forward thinking companies – Genentech, Dell, Home Depot, DeVry, PayPal, Facebook, Japan Post and many more