Using and Creating Visualforce Mobile Components

My Dreamforce 2012 presentation as a Developer Zone breakout session.

Transcript

1. Using and Creating Visualforce Mobile Components Alex Berg, Sundog Interactive, Software Engineer @alex_berg
2. Safe harbor Safe harbor statement under the Private Securities Litigation Reform Act of 1995: This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions. If any such uncertainties materialize or if any of the assumptions proves incorrect, the results of salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking statements we make. All statements other than statements of historical fact could be deemed forward-looking, including any projections of product or service availability, subscriber growth, earnings, revenues, or other financial items and any statements regarding strategies or plans of management for future operations, statements of belief, any statements concerning new, planned, or upgraded services or technology developments and customer contracts or use of our services. The risks and uncertainties referred to above include – but are not limited to – risks associated with developing and delivering new functionality for our service, new products and services, our new business model, our past operating losses, possible fluctuations in our operating results and rate of growth, interruptions or delays in our Web hosting, breach of our security measures, the outcome of intellectual property and other litigation, risks associated with possible mergers and acquisitions, the immature market in which we operate, our relatively limited operating history, our ability to expand, retain, and motivate our employees and manage our growth, new releases of our service and successful customer deployment, our limited history reselling non-salesforce.com products, and utilization and selling to larger enterprise customers. Further information on potential factors that could affect the financial results of salesforce.com, inc. is included in our annual report on Form 10-Q for the most recent fiscal quarter ended July 31, 2012. This documents and others containing important disclosures are available on the SEC Filings section of the Investor Information section of our Web site. Any unreleased services or features referenced in this or other presentations, press releases or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make the purchase decisions based upon features that are currently available. Salesforce.com, inc. assumes no obligation and does not intend to update these forward- looking statements.
3. Project summary Force.com Labs project - released April '12  Library of new components  Framework for JS-rendered pages  Patterns reference
4. Website user channels Various channels to access a website  Desktop • Heavy utilization and exploring  Mobile • Light utilization and quick info retrieval
5. Website user channels
6. Website user channels
7. Website user channels
8. Website user channels
9. Website user channels
10. Website user channels
11. Website user channels
12. Website user channels
13. Website user channels ?
14. Project goal Why component library? Two mindsets  Salesforce = Clicks not Code  Mobile Apps = Code, code, code Bridge two worlds
15. How do we use Mobile Components?
16. How do we use Mobile Components? Demo  List all Leads you follow on Chatter >
17. How do we use Mobile Components? Demo  List all Leads you follow on Chatter >  Link to Detail page >
18. How does this work?
19. How does this work? Three main pieces  jQuery Mobile • Mobile view  Javascript Remoting • Data  Custom JS Framework • Render requested JQM page
20. jQuery Mobile
21. jQuery Mobile With standard HTML, get  Mobile style  Mobile behavior
22. jQuery Mobile This code...
23. jQuery Mobile ...renders as this with plain HTML.
24. jQuery Mobile ...renders as this with JQM-enhanced HTML.
25. jQuery Mobile Great tool - let's dig deeper  Built-in complex views  listview • Example >
26. Dynamic jQuery Mobile pages Two ways to build page with dynamic data  Build on server – Apex and VF  Build in browser – JS and HTML We want to build in browser  Feels more native
27. Dynamic jQuery Mobile pages Two ways to build page with dynamic data  Visualforce-rendered page  But what does a JavaScript-rendered page look like? • Example >
28. Dynamic jQuery Mobile pages Separate data source from static markup  HTML-data list → JSON-data list and template  Let's see how to do this successfully • Example >
29. Dynamic jQuery Mobile pages Define markup source  Template string works great
30. Dynamic jQuery Mobile pages Define data source  Replace static HTML with JSON & template
31. Dynamic jQuery Mobile pages Combine data and template  Template engine works great, such as Mustache
32. Dynamic jQuery Mobile pages Insert into DOM  JQM embellishes HTML on document ready  Must instruct JQM to re-apply itself
33. Dynamic jQuery Mobile pages Dynamic JQM pages are manual, but not too complex 1. Get data from server 2. Generate HTML fragment 3. Insert HTML into DOM 4. Tell JQM we updated
34. Mobile Components for VF Framework  See: MobileVisualforceSDKjs.resource  To use a component, we need framework
35. Mobile Components for VF Framework Component  Purpose is to render HTML when requested • User requests page • Framework asks component for its HTML  Component is rooted in JavaScript  Component is JavaScript
36. Mobile Components for VF Framework Component  Register Component • $V.App.registerComponent('{!$Component.list}', {!configAsJson});  Define JS controller • $V.ListComponent = $V.Component.extend({ /* Method definitions */});  $V.Component • this.$me – jQuery reference to component's root element • this.config – component constructor parameters • prepare and render methods
37. Mobile Components for VF Framework App  $V.App methods • registerComponent – will instantiate JS controller when its page is requested  $V.App.log methods • info, debug, error  $V.App.config properties • user • fields
38. Mobile Components for VF Framework Apex classes  BaseConfigController • Intended to be extended • Has 'config' property of 'BaseConfig' type  BaseConfig • Intended to be extended • elemId, jsCtlrName properties
39. Mobile Components for VF Mobile Component solution composed of several files  VF Component holds HTML  JavaScript builds JQM page  Apex controller prepares data  Other resource files – JS library, JS templates, Apex helpers
40. Mobile Components for VF Thumbnail list component  Code >
41. Mobile Components for VF Thumbnail list component 1. Root list element 2. Build HTML – get template and data Build Apex to pass data to JS 3. Insert HTML into root element 4. Re-apply JQM
42. Resources Session artifacts  https://github.com/chexxor/DF12-MobileComponents-Artifacts Helpful links  https://github.com/forcedotcom/MobileComponents/tree/master/Visualf orce  http://jquerymobile.com/demos
43. All about Sundog Sundog is a collaboration of marketing and technology experts that delivers measurable results with bold ideas, innovative implementation and enough coffee to convince you it’s Y3K. We’re passionate about our work and our fun. We challenge ourselves to think big and demonstrate the power and effectiveness of our creativity and innovation. Sundog is headquartered in Fargo, ND. We also have offices in Minneapolis and Denver and each location offers great people and great views. sundoginteractive.com
44. Alex Berg Software Engineer, @alex_berg