• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
How to Tango with Salesforce & jQueryMobile for HTML5 Goodness
 

How to Tango with Salesforce & jQueryMobile for HTML5 Goodness

on

  • 2,459 views

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 ...

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.

Statistics

Views

Total Views
2,459
Views on SlideShare
1,798
Embed Views
661

Actions

Likes
2
Downloads
0
Comments
0

4 Embeds 661

http://tyoshikawa1106.hatenablog.com 654
http://feedly.com 3
http://www.verious.com 2
http://plus.url.google.com 2

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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

How to Tango with Salesforce & jQueryMobile for HTML5 Goodness How to Tango with Salesforce & jQueryMobile for HTML5 Goodness Presentation Transcript

  • How to Tango with Salesforce &jQueryMobile for HTML5 GoodnessBy Joshua Hoskins | @jhoskinsMoscone Center West, DevZone Unconference C
  • 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
  • Agenda • Anatomy of a Visualforce Page • Exchanging Data with SFDC • Dynamically updating page content • Debug Javascript Errors • Gracefully Handle Apex Exceptions
  • 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 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.
  • 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>
  • 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>
  • 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
  • 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>
  • @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 Page • Less Custom CSS
  • Joshua Hoskins Speaker
  • 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