Salesforce Lightning Components Development Tutorial

In this Lecture We will set up and get ready for creating the Lightning Components

1. •Developer Edition
2. •Enable Lightning Experience
3. •Custom Domain
4. •Salesforce1 Simulator
5. •Salesforce Lightning Inspector

Note : You can skip this Lecture, if you already have a "Developer Edition".

visit : "developer.salesforce.com/signup" and subscribe a life-time free Developer Edition.

In this Lecture, we will understand enabling the Lightning Experience

In this Lecture, we will understand, 

1. What a Custom Domain is,
2. The advantages of the Custom Domain.
3. Why it is important for "Salesforce Lightning Components".
4. Adding a Custom Domain to our Training Org, Rolling it Our, Deploying it.

The very main objective of the Lightning Components is to develop Force.com Apps for "Lightning Experience" and "Salesforce1 Mobile".

When it comes to testing, we can easily test the "Lightning Experience" in our PC. But coming to the "Salesforce1", we actually need a mobile device with Salesforce1 App installed. As a developer, we need to test it in the mobile device. It consumes unnecessarily lot of time with the mobile device for "refreshing and testing", "refreshing and testing". 

The other way is to install any of our favorite android EMULATORS on our PC, installing "Salesforce1 Mobile App" in the Emulator. Again it is "Time and Hardware Resource" consumption process, which can be an embarassing for a developer like me.

So, the best option I personally practice and strongly recommend is, installing "Salesforce1 Simulator" chrome app offered by kylpo.com, which is very developer friendly, easy and fast to launch, refresh and test, login and logout.

In this Lecture, we will learn how to install the "Saleforce1 Simulator Plugin" and also, we will learn

1. what is this "Salesforce Lightning Inspector" Plugin for Chrome.
2. installing it.

Note: Please install both of them and keep them ready. We will start using them after the development of the lightning components

In this lecture, we will learn to deploy the Custom Domain to the Users.

Go to Setup ==> Administer Setup ==> Domain Management ==> My Domain ==> Click on "Deploy to Users".

In this Lecture, we will see, to create our first Lightning Component.

I have also briefly explained about the INTERFACEs.

In the Dev Console ==> File ==> New ==> Lightning Component.

I have used the external image from my site:

http://www.salesforce-online-training.com/images/twinklestar.gif

You can download the source code from the downloadable files here.

In this Lecture, we will create the Lightning Application.

In Dev Console. File ==> New ==> Lightning Appliation.

I have used the image from my site:

http://www.salesforce-online-training.com/wp-content/uploads/2013/11/sales-force-online-favicon.jpg

You can also download the source code for this lecture from the downloadable resources.

In this Lecture, we will enhance the App and Component.

html in App and Component.

Component RE-usability.

In this Lecture, we will learn, what the attributes and the expressions are, the TYPES can be used, 

Practical demo of the concept.

You can download the code resources in the last part.

Use  the component <aura:attribute> to define the attributes.

The types can be primitive like string, integer, boolean, collections. And, at the advance level,"action".

use expression syntax {!expression} to access the attributes on the same component. You can 'SET' the attribute values on the instance of the component

In this Lecture, we will have a overview of the AUTO-WIRED resources in the Component Bundle.

In this Lecture, we will create a new component to work out on each Resource.

click on each RESOURCE in the right bar ie resource bundle to observe the names and extensions of the resources.

"STYLE" resource in the Component Bundle
In this Lecture, we will learn how to define the custom styles and customize the default styles.

In this Lecture, we will learn how to document our components. How to see the documentation of the components.

<aura:documentation> </aura:documentation> are the outer components.

You can provide description, examples of the components.

In this Lecture,  we will learn to give custom icon resource for the component and observed the same in the Lightning App Builder (to understand how the Admins design and configure)

We have seen how we can give custom icon resource in SVG resource. 

In this Lecture, we will understand how 

we can reLABEL the component to be visible in Lightning App Builder or Community Builder.

In this Lecture, we will understand how 

we can allow the Admins to configure the ATTRIBUTES at DESIGN time.

Use <design:attribute > component in the DESIGN resource to allow the "COMPONENT ATTRIBUTES" for Lightning App Builder.

CLIENT-SIDE CONTROLLER is the important resource in the Bundle. Whatever the events occured via events on the components with user interactions, to handle those events, we write the handlers/methods in this controller. 

In this Lecture, we will understand the very important info about the controller.

In the demo,

we observe the flow from the Markup to the Controller to the Helper.

we observe how to pass the String Parameters to the Helper.

We have taken an example of calculating First Name and the Last Name by providing the static text.

In this Lecture, we will do a mini project.

On the VIEW, we will have 2 attributes to capture the user's first name and the last name.

1 more attribute for assigning the result.

On clicking the button, client-side controller function gets invoked and executes the logic.

we also observe, how to debug, to the little extent.

In this Lecture, we will enhance our project with

styles in STYLE resource

external CSS with Static Resources - Global Value Provider

In this Lecture, we will understand how to access the Zipped Resources from the Zipped Archive Static Resource.

I have demonstrated you 2 styles of using the Static Resources. You can follow iwhich is convenient for you.

You can download the resources that I have used in the demo, from, the downloadable resources.

In this Lecture, we will learn how to use the Custom Labels in the Salesforce Lightning Components.

In the demo, I have shown you how to create the custom labels in the salesforce org quickly for your ref.

You can create of your choice and use them using;  $Label.<nameSpace>.<labelName>. For Example: 

<ui:inputText label="$Resource.c.label_in_hebrew" value="{!v.first_name}" />

In this Lecture, we will understand how we do the composition of the components.

In this Lecture, we will understand the What are Nested Components and how to use them.

In this Lecture, we will observe how to use the nested components for the iteration.