Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Lightning Components Workshop

666 vues

Publié le

Slides for the hands on lightning component workshop that is accompanying the trailhead found https://developer.salesforce.com/trailhead/project/account-geolocation-app

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Lightning Components Workshop

  1. 1. Getting Started with Lightning Components Workshop
  2. 2. SSID: HANDSON_WORKSHOP pass: devzone_how Wifi Info
  3. 3. Unit 1: Setting Up Your Environment
  4. 4. 1. Sign up for a developer edition 2. Enable Lightning Components (required in pre-winter 16 orgs only) 3. Open a browser tab to the Trailhead project https://developer.salesforce.com/trailhead/project/account-geolocation-app Lab
  5. 5. Unit 2: Adding Location to Accounts
  6. 6. 1. Add a geolocation field to the Account object 2. Enter sample data Lab
  7. 7. Unit 3: Creating the AccountController Apex Class
  8. 8. 1. User requests a page 2. The server executes the page’s underlying, and sends the resulting page (HTML+data) back to the browser 3. The browser displays the HTML 4. Show different data? Back to 1 5. Show different view? Back to 1 Workflow Visualforce Page Centric Model
  9. 9. Pros • Proven model • Productivity. Easy to implement • Naturally splits large apps into small, manageable units (pages) Caveats • Limited interactivity • Higher latency Visualforce Page Centric Model
  10. 10. 1. The user requests a Lightning Component 2. Server returns component bundle to browser 3. JavaScript generates the UI 4. Component makes request for data (data only) [this unit] 5. Server returns data 6. Show different data? Back to 4 7. Show different view? Back to 3 Lightning Components App Centric Model
  11. 11. Pros • Enables highly interactive/immersive user experiences • Less page refreshes • Tightly integrated (no iframe) Caveats • Higher learning curve compared to vanilla Visualforce pages • Higher level of complexity. Building an app is generally more complex than building a page. Lightning Components App Centric Model
  12. 12. Lightning Components vs Aura Aura Lightning Components • Open Source framework (http://documentation.auraframework.org) • Vendor agnostic • Built on top of Aura • Salesforce-specific extensions
  13. 13. Use @AuraEnabled annotation to make methods available to Lightning Components (conceptually similar to JavaScript remoting) public with sharing class AccountController { @AuraEnabled public static List<Account> findAll() { return [SELECT id, name FROM Account]; } } Creating an Aura-Enabled Apex Controller
  14. 14. • Create an Aura-enabled Apex controller named AccountController • Add a findAll() method that returns accounts that have location information Lab
  15. 15. Unit 4: Creating the AccountLocator Component
  16. 16. <aura:component controller="AccountController"> <div> <div>AccountMap goes here</div> <div>AccountList goes here</div> </div> </aura:component> Anatomy of a Lightning Component
  17. 17. • Component HTML, nested Lightning Components, and Lightning tags (attribute, iteration, etc.) • Controller JavaScript: Event Handlers • Helper JavaScript: Shared code within the component • Style CSS: Encapsulated CSS styles • Design Component description for use in App Builder Lightning Component Parts
  18. 18. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS {} The root tag Styles: How to target these elements?
  19. 19. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS>div {} Any div that is an immediate child of .THIS (the root tag) Styles: How to target these elements?
  20. 20. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS div {} Any div within .THIS (the root tag) Styles: How to target these elements?
  21. 21. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS>div>ul {} ul that is immediate child of a div that is immediate child of .THIS .THIS ul {} ul anywhere within .THIS .THIS>div ul {} ul anywhere within a div that is immediate child of .THIS .THIS div ul {} ul anywhere within a div that's anywhere within .THIS Styles: How to target these elements?
  22. 22. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS>div>ul>li.selected {} li with "selected" class and that is immediate child of a ul that is immediate child of a div that is immediate child of .THIS (root tag) .THIS ul>li.selected {} li with "selected" class and that is immediate child a ul that is anywhere within .THIS .THIS li.selected {} li with "selected" class anywhere within .THIS .THIS .selected {} Any element with "selected" class anywhere within .THIS Styles: How to target these elements?
  23. 23. <aura:component> <div> <div class="disabled"></div> <div> <div></div> <ul> <li class="selected">item 1</li> <li class="disabled">item 2</li> </ul> </div> </div> </aura:component> .THIS .disabled {} Any element with the "disabled" class within .THIS (the root tag) Styles: How to target these elements?
  24. 24. 1. In the Salesforce1 app 2. In App Builder 3. In Lightning Applications Where can I use Lightning Components?
  25. 25. 1. Implement the force:appHostable interface <aura:component implements="force:appHostable"> 2. Create a Tab 3. Add the Tab to Mobile Navigation Using a Lightning Component in the Salesforce1 App
  26. 26. 1. Implement the flexipage:availableForAllPageTypes interface <aura:component implements="flexipage:availableForAllPageTypes"> 2. Create a component description in the Design part <design:component label="AccountList"> </design:component> 3. Drag the component from the component palette in App Builder Using a Lightning Component in App Builder
  27. 27. 1. Create a Lightning App File > New > Lightning Application 2. Embed the Lightning Component <aura:application > <c:AccountLocator /> </aura:application> Useful for creating fullscreen apps or for testing Lightning components during development Using a Lightning Component in a Lightning App
  28. 28. • Create the AccountLocator component • Add AccountLocator to the Salesforce1 App menu Lab
  29. 29. Unit 5: Creating the AccountList Component
  30. 30. • The data of the component • Available anywhere in the component • Examples: <aura:attribute name="price" type="Number"/> <aura:attribute name="title" type="String"/> <aura:attribute name="account" type="Account"/> <aura:attribute name="accounts" type="Account[]"/> Attributes
  31. 31. • {! } notation <aura:attribute name="account" type="Account"/> <li><a>{!v.account.Name}</a></li> • Bidirectional in ui: components <aura:attribute name="price" type="Number"/> <ui:inputNumber label="Principal:" value="{!v.price}" format="#"/> -> price attribute value is updated automatically when user types in input field Data Binding
  32. 32. • Getting the value of an attribute: var price = component.get("v.price"); • Setting the value of an attribute: component.set("v.price", price); Manipulating Attributes in JavaScript
  33. 33. • Component <aura:attribute name="counter" type="Number" default="0"/> <ui:button label="Click me" press="{!c.handleClick}"/> <div>{!v.counter}</div> • Controller ({ handleClick: function(component, event) { var counter = component.get("v.counter"); counter = counter + 1; component.set("v.counter", counter); } }) Example: Display how many times a button was clicked Event Handlers
  34. 34. • Component <aura:attribute name="accounts" type="Accounts[]"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> • Controller ({ doInit : function(component, event) { var action = component.get("c.findAll"); action.setCallback(this, function(a) { component.set("v.accounts", a.getReturnValue()); }); $A.enqueueAction(action); } }) Example: Retrieve data when component is initialized Event Handlers
  35. 35. <aura:attribute name="accounts" type="Account[]"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <ul> <aura:iteration items="{!v.accounts}" var="account"> <li>{!account.Name}</li> </aura:iteration> </ul> Iterating through a List
  36. 36. <aura:attribute name="accounts" type="Account[]"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <aura:iteration items="{!v.accounts}" var="account"> <c:AccountListItem account="{!account}"/> </aura:iteration> Using a Nested Component Iterating through a List
  37. 37. <aura:component> <aura:attribute name="account" type="Account"/> <li>{!v.account.Name}</li> </aura:component> AccountListItem
  38. 38. • Create the AccountList component responsible for displaying the list of accounts • Create the AccountListItem component that you nest inside AccountList to render individual accounts in the list Lab
  39. 39. Unit 6: Creating the AccountMap Component
  40. 40. • External JavaScript libraries and CSS style sheets must be loaded as static resources • Use the <ltng:require> tag to load them • Loading is asynchronous • afterScriptLoaded event is triggered after files have been succesfully loaded Loading External JavaScript Libraries and CSS Files
  41. 41. <ltng:require scripts="/resource/leaflet/leaflet.js"/> Loading External JavaScript Libraries
  42. 42. <ltng:require styles="/resource/leaflet/leaflet.css" /> Loading External CSS Style Sheets
  43. 43. <ltng:require scripts="/resource/leaflet/leaflet.js" styles="/resource/leaflet/leaflet.css" /> Loading JavaScript Libraries and CSS Style Sheets
  44. 44. <ltng:require scripts="/resource/leaflet/leaflet.js" styles="/resource/leaflet/leaflet.css" afterScriptsLoaded="{!c.renderMap}" /> Using the afterScriptLoaded Event
  45. 45. • Load leaflet JS library • Load Leaflet CSS • Render the map when files are loaded Lab
  46. 46. Unit 7: Using Events to add Markers to the Map
  47. 47. Flow • AccountMap can't show markers until AccountList has loaded accounts from the server • When AccountList has successfully loaded the accounts from the server, it fires a custom event named AccountLoaded providing the list of accounts as an event attribute • AccountMap registers as a listener for that event • When AccountMap gets the event, it adds the makers on the map Benefits of event-based communication: • Components don't know about each other (they don't have references to each other) • Components are more reusable Communicating with Events
  48. 48. <aura:event type="APPLICATION"> <aura:attribute name="accounts" Type="Account[]"/> </aura:event> Creating the AccountsLoaded Event
  49. 49. var event = $A.get("e.c:AccountsLoaded"); event.setParams({"accounts": accounts}); event.fire(); Firing the Event in AccountList
  50. 50. • Component <aura:handler event="c:AccountsLoaded" action="{!c.accountsLoaded}"/> • Controller accountsLoaded: function(component, event, helper) { // add markers using Map api } Handling the Event in AccountMap
  51. 51. • Create the AccountsLoaded Event • Trigger the AccountsLoaded Event in AccountList • Handle the AccountsLoaded Event in AccountMap Lab
  52. 52. Unit 8: Using Events to Center the Map
  53. 53. • Create the AccountSelected event • Trigger the AccountSelected event in AccountList • Handle the AccountSelected event in AccountMap and center the map on the selected account location Lab
  54. 54. Unit 9: Interacting with the Salesforce1 App
  55. 55. • Lightning Components enable you to extend standard features • Don't reinvent the wheel For example, if your component needs an account details view: use the standard one, don't create your own • Navigation between standard features and custom components should be smooth and feel integrated: users shouldn't notice they are switching between standard and custom features • Platform events allow you to integrate your custom components into the standard experience Salesforce1 Integration
  56. 56. var event = $A.get("e.force:navigateToSObject"); event.setParams({ "recordId": accountId }); event.fire(); This event will be handled be the Salesforce1 app which will then navigate to the account's details view Firing a Platform Event
  57. 57. Share Your Feedback, and Win a GoPro! 3 Earn a GoPro prize entry for each completed survey Tap the bell to take a survey2Enroll in a session1
  58. 58. Before you leave, get your Quest stamp! Attending this workshop earns you 1 hands-on activity stamp towards your DevZone Quest! Come up to the speaker podium at the end to stamp your Quest guide. Then go collect 3 more stamps to earn your Quest prize pack!
  59. 59. When a user clicks a marker on the map, load the default Salesforce1 details view for the selected account Lab

×