Building a Lightning App with Angular Material Design

Building a Lightning App with Angular Material Design

• 1.
  Building a LightningComponent with Angular Material Design ​ Patricia Cifra ​ Senior Software Engineer ​ pncifra@spanning.com ​ @pncifra ​ 
• 2.
  ​ Lightning Component •  Whatis a Lightning Component •  Basics of creating a Lightning Component •  Anatomy of a Lightning Component •  Tools ​ Material Design •  What is Material Design? •  Where is it used? •  Sample patterns •  Using it in a Lightning App/Component Overview
• 3.
  •  Component Framework • Set of tools for developers and business analysts •  Build Apps •  Integrate Data •  Automate Business Processes What is Lightning?
• 4.
  •  Lightning Connect:access data from external sources •  Lightning Component: UI framework for developing web apps for mobile or desktop devices •  Lightning App Builder: build apps without coding •  Lightning Process Builder: workflow tool Overview of Lightning Tools
• 5.
  ​ Enable Lightning foryour Org. •  Click Develop à Lightning Components and select “Enable Lightning Components” and “Enable Debug Mode” ​ Option 1: Create a new Lightning Component via Sublime plugin ​ Option 2: Create a new component from Developer Console in Salesforce ​ View Lightning Components •  Click Develop à Lightning Components Setting Up Lightning
• 6.
  ​ Component or Application • File contains the declarative markup for the component or app Controller •  Contains the JavaScript controller methods to handle events fired and components CSS •  CSS styles scoped to the component ​ Helper •  Contains JavaScript methods that can be called from anywhere in the component’s bundle. (very helpful!) Lightning Files
• 7.
  •  Lightning Componentsdo not allow you to load JavaScript libraries from a source outside of your Salesforce domain. •  Upload your resources as a static resource •  Perform this in the setup view of the Salesforce organization •  Create a zip archive of those resources •  Create a package in your organization •  Verify you can access your resource file Third Party Dependencies
• 8.
  •  Resource isn’tloaded by the time the application renders •  New release Spring 15: <ltng: require /> tag allows you to load scripts. •  RequireJS to load dependencies for Lightning Components •  Add a Lightning Component dependency to your component that will load RequireJS then fire a Lightning event that will trigger a controller function in your code that calls a helper function where you specify third party dependencies Loading Dependencies - RequireJS
• 9.
  •  aura:id –The id tag enables you to assign a unique id to elements in your Lightning component. •  aura:attribute – The attribute tag is how you can define Salesforce data to be stored for a component. It has been very useful to use the Lightning infrastructure to call an apex controller that will populate an aura attribute. Then firing a Lightning event enables you to continue processing the data in your application with the third party library handlers. •  aura:handler – This tag wires a handler function in your Lightning controller to Lightning events. Lightning/Aura Attributes
• 10.
  ​ Environment •  3D World:material environment is 3D Space •  All Objects have x,y, z dimensions •  Light and Shadow •  Shadows cast by two light sources, indicate height, space and positioning Material Properties •  Physical properties •  Transforming properties Elevation and Shadows •  Shadows and Object relationships Material Design
• 11.
  Material Design inthe Wild
• 12.
  Depth – Placementand positioning Material Design
• 13.
  Depth – Useshadows Material Design
• 14.
  Color Palette Material Design
• 15.
  •  Create customToDo Objects •  Create Apex class to access custom objects •  Create Lightning event to notify when custom objects have been loaded •  Create and load static resources •  Create Lightning App •  Controller •  Helper •  CSS •  Component Putting it all together – ToDo List App Example
• 16.
  ​ Sublime Lightning Plugin • https://github.com/dcarroll/sublime-lightning Package Control for Sublime •  https://packagecontrol.io/installation ForceCli: work with force.com data from command line •  https://force-cli.herokuapp.com/ Fix MacPath plugin: Fixes path settings for Sublime •  In Package Control: Install Plugin: search for “FixMacPath” Developer Tools
• 17.
  ​ Lightning Apps/Components •  Controller– JavaScript controller methods •  Component – Declarative markup •  Helper – JavaScript methods available throughout component bundle •  Events - App or component level events that you can register and attach handlers for, pass parameters. Material Design https://www.google.com/design/spec/material-design/introduction.html https://material.angularjs.org/latest/#/ Recap
• 18.
  Thank you
• 19.
  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