Force.com Mobile Web with Sencha Touch

Size: px

Start display at page:

Download "Force.com Mobile Web with Sencha Touch"

Kory Morgan
6 years ago
Views:

1 Force.com Mobile Web with Sencha Touch Don Robins Outformations, Inc.

2 Who Am I? 1. Technical Instructor (since 2009) 2. Developer (since 1984) 3. Community Activist

3 My Goals 1. Provide an overview of Force.com Touch Platform Sencha Touch with Force.com 2. You will build a mobile app using my tutorial

4 Agenda 00:30:00 Mobile App Demo Force.com Touch Mobile 60,000 ft view Visualforce & Sencha for Mobile Web High Level Architecture Tutorial Show and Tell QA

5 Agenda 00:30:00 Mobile App Demo Force.com Mobile options 60,000 ft Visualforce & Sencha for Mobile Web High Level Architecture Tutorial Show and Tell QA

6 Steps: Launch Safari Login to SFDC Launch PocketCRM in new windows

7 Agenda Mobile App Demo Force.com Mobile options 60,000 ft Visualforce & Sencha for Mobile Web High Level Architecture Tutorial Show and Tell QA

8 WHAT IS IT? Services and Features to support mobile application development on Force.com (this is NOT touch.salesforce.com!)

9 Force.com for Touch Mobile REST APIs for Data and Social Services Mobile Policy Management (Connected Apps) Geolocation fields and functions Mobile Container Native platform services Secure offline storage SmartStore Client oauth authentication Identity Single Sign On Touch Platform Features Trusted Identify and Consumer Identity Providers

10 Touch Client Options Native ios Build for Iphone and Ipad with Xcode Native Android Build for Android devices with Java HTML5 Hybrid Host HTML5 in an ios/java Mobile Container HTML5 Visualforce Build in native Visualforce pages

11 Agenda Mobile App Demo Force.com Mobile options 60,000 ft Visualforce & Sencha for Mobile Web High Level Architecture Tutorial Show and Tell QA

12 Why Visualforce? ONE development platform and environment Dynamic HTML5, JavaScript, CSS Force.com Apex and Visualforce JavaScript Remoting No API Limits uses methods() No oauth needed Uses standard Salesforce.com login No updates needed Dynamic web views and interpreted logic Can wrap in Cordova (PhoneGap) For device access, oauth, local storage, AppStores, etc..

13 Why Sencha? MVC JavaScript Class System Framework tames JavaScript Fully featured and very complete (see the KitchenSink) But extendable if needed plugins, prototypes, etc. Cross platform AND form factor Integrates easily with Force.com Direct proxy to JavaScript Remoting Can use API calls too Sencha Architect Drag and Drop App Dev IDE Build Tools Minifies and obfuscates code Deploy as cached Static Resource Device based patch updates

14 Agenda Mobile App Demo Force.com Mobile options 60,000 ft Visualforce & Sencha for Mobile Web High Level Architecture Tutorial Show and Tell QA

15 Hello World As Standard Web Project

16 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello World</title> <script src="lib/touch/sencha-touch-all.js" type="text/javascript"></script> <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> Ext.application({ launch: function () { Ext.create('Ext.Panel', { fullscreen: true, html: 'Hello World!' }); } }); </script> </head> <body></body> </html> Sencha Touch Hello World

17 Hello World on Safari Desktop

18 Hello World on iphone

19 Hello World on Tablets

20 <html > <head > <script src= sencha-touch.js /> <script > Sencha Touch MVC Application List View Edit View Data Model Controller Data Store Data Proxy </script > Sencha Web HTML Architecture

21 <apex:page > <apex:component > <script src= sencha-touch.js /> <script > Sencha Touch MVC Application List View Edit View Data Model Controller Data Store Data Proxy </script > Sencha Visualforce Component Architecture

22 Force.com Apex methods(){} View Controller Model Store Proxy sobjects Two (not one) MVC Architectures: Force.com + Sencha

23 Agenda Mobile App Demo Force.com Mobile options 60,000 ft Visualforce & Sencha for Mobile Web High Level Architecture Tutorial Show and Tell QA

24 Part 1 & 2 Originally on Sencha BLOG Now on wiki.developerforce.com Applications_With_Force.com_And_Sencha_Touch (Search for Sencha on the developer portal/wiki)

25 Agenda Mobile App Demo Force.com Mobile options 60,000 ft Visualforce & Sencha for Mobile Web High Level Architecture Tutorial Show and Tell QA

26 More Questions? Stay after Talk at lunch Find me on Chatter (or LinkedIn) me at My website I will post follow-up links and info in Chatter Talk at the break LinkedIn DonaldRobins Post your questions on the Chatter Feed Twitter - DonRobins me don@forcementor.com

Roy Lawson. Introduction to Office 365 Development Presented By. SDS pays for referrals!

Roy Lawson. Introduction to Office 365 Development Presented By. SDS pays for referrals! Introduction to Office 365 Development Presented By Roy Lawson Partner & Consultant Software Development Services, LLC (SDS) relawson@sdselite.com www.sdselite.com 866-888-2586 ext 101 SDS pays for referrals!