How to Tango with Salesforce &jQueryMobile for HTML5 GoodnessBy Joshua Hoskins | @jhoskinsMoscone Center West, DevZone Unc...
All about Me               Joshua Hoskins               Technical Cloud Consultant at                   Customer since 20...
Agenda • Anatomy of a Visualforce Page • Exchanging Data with SFDC • Dynamically updating page content • Debug Javascript ...
Components • Static Resources • Visualforce • Apex • Javascript • CSS (LESS is more!)
Resources • jQuery Mobile - http://jquerymobile.com/ • jQuery - http://jquery.com/
Page Anatomy • Add head, references to jQuery, jQuery Mobile and the   mobile theme CSS are all required. • jQuery Mobile ...
Page Anatomy <apex:page showHeader="false" docType="html-5.0" standardStylesheets="false" cache="true" controller="ISG_Mai...
jQuery Mobile & Force.com • Initialize jQuery Mobile on the page • What is noConflict() on jQuery?         <script>       ...
Page Content and Transitions • DIV Containers are Mobile Pages • Page Transitions switch DIV show to user • Requests are d...
Page Content and Transitions <div id="splash-page" data-role="page" data-theme="a" data-position="fixed">   <div data-role...
@RemoteAction withApex
Javascript in Visualforce
Javascript Objects
Handling ApexExceptions
Updating Page ContentDynamically
Debugging
Lessons Learned • Coding can be Tedious • Apex vs. Javascript 50/50 • Create Branches for Dev & QA • 1 Controller, 1 VF Pa...
Joshua Hoskins    Speaker
Appirio Helps Enterprises Power Their Business with                    Public Cloud Solutions                             ...
How to Tango with Salesforce & jQueryMobile for HTML5 Goodness
Upcoming SlideShare
Loading in...5
×

How to Tango with Salesforce & jQueryMobile for HTML5 Goodness

2,233

Published on

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.

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,233
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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=&quot;external&quot; 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&apos; 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&apos; 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&apos; 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&apos; 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&apos; 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&apos; 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
  • How to Tango with Salesforce & jQueryMobile for HTML5 Goodness

    1. 1. How to Tango with Salesforce &jQueryMobile for HTML5 GoodnessBy Joshua Hoskins | @jhoskinsMoscone Center West, DevZone Unconference C
    2. 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. 3. Agenda • Anatomy of a Visualforce Page • Exchanging Data with SFDC • Dynamically updating page content • Debug Javascript Errors • Gracefully Handle Apex Exceptions
    4. 4. Components • Static Resources • Visualforce • Apex • Javascript • CSS (LESS is more!)
    5. 5. Resources • jQuery Mobile - http://jquerymobile.com/ • jQuery - http://jquery.com/
    6. 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.
    7. 7. Page Anatomy <apex:page showHeader="false" docType="html-5.0" standardStylesheets="false" cache="true" controller="ISG_MainApp_Ctrl" > <html> <head> <title>Page Title</title> <link rel="stylesheet" href="{!URLFOR($Resource.IBC_jQueryMobile_min_1_2_0, jquery.mobile-1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css)}" /> <link href="http://fonts.googleapis.com/css?family=Cantarell&subset=latin" rel="stylesheet" type="text/css" /> <apex:includeScript value="{!$Resource.IBC_jQuery_min_1_7_2}"/> <apex:includeScript value="{!URLFOR($Resource.IBC_jQueryMobile_min_1_2_0, jquery.mobile-1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js)}"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="expires" content="0"/> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" /> <link rel="apple-touch-icon" sizes="72x72" href="{!URLFOR($Resource.IBC_Resources, ibc/img/Quadmark-logo-home.png)}" /> </head> <body> ...page content goes here... </body> </html> </apex:page>
    8. 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. 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. 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>
    11. 11. @RemoteAction withApex
    12. 12. Javascript in Visualforce
    13. 13. Javascript Objects
    14. 14. Handling ApexExceptions
    15. 15. Updating Page ContentDynamically
    16. 16. Debugging
    17. 17. Lessons Learned • Coding can be Tedious • Apex vs. Javascript 50/50 • Create Branches for Dev & QA • 1 Controller, 1 VF Page • Less Custom CSS
    18. 18. Joshua Hoskins Speaker
    19. 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 cloud19

    ×