Lightning components are used as new Salesforce user interface framework for developing dynamic web applications for desktop and mobile devices.

In this component JavaScript at the client-side and at the server-side is used in Apex to provide the data and business logic. In this new kind of app-centric model, JavaScript is used to modify, create, transform, and animate the user interface instead of completely replacing it in a tedious way of one page at a time. This model is fluid, exciting and interactive.

Lightning Design System

This is a CSS based framework for applying Lightning UI which helps custom components using this framework to work well with the standard  Lightning experience that Salesforce is coming up with. Using this framework will ensure the custom UI looks like standard Salesforce UI when lightning experience is turned on in Salesforce.

Advantages of Lightning Components/Design System

• Salesforce is promoting this as the next platform for building web and mobile apps which will work with mobile, Ipads etc.
• It is a good looking UI with the ability to use reusable components which are provided by Salesforce, 3rd parties and can also be custom developed by us.
• It currently provides the ability to create home page using drag and drop editor by end user without needing a developer.
• Once lightning experience is turned on, the UI will be seamless between standard Salesforce UI and custom developed components.
• If Salesforce peruses this way and lightning becomes standard for Salesforce apps, we need very little additional work to use the power of Lightning.
• It is built on metadata from the foundation, providing an integrated developer experience.
• The Developer Console supports Lightning components, so there’s an integrated developer experience.

Where Can you Use Lighting Components

• Lightning components can be used in Salesforce1 and Lightning Experience

We can customize and extend Lightning Experience and Salesforce1 with Lightning components.
Also these components can be used in Visualforce Pages. We can add Lightning components to existing Visualforce pages and Implement new functionality using both Lightning components and Visualforce pages.

• Any Application with Lightning Out (Beta) can have Lightning Components

We can use Lightning Out to run Lightning components applications outside of Salesforce servers. It can be a department server inside the firewall, or even SharePoint, Node.js app running on Heroku, build your custom app with Force.com and run it wherever your users are. You can also launch lightning components from tabs, apps, and actions.

• Lightning Pages can use Lightning Components

Custom Lightning components don’t work in the Lightning App Builder right out of the box or on Lightning Pages. To use a custom Lightning component in either of these places, configure the Lightning component and its component bundle so that it becomes compatible.

• Lightning Components can be easily added in Community Builder

You can configure the component to use a custom Lightning component in Community Builder.

• Lightning Components can be added to Applications

Before adding Lightning components to the application, first check the out-of-the-box components that come with the framework.

How to Create Lightning App using Lighting Component ?

Create Apex Class

In the Developer Console, click File > New > Apex Class. Specify ContactController as the class name and click OK.

————————————-Apex Controller—————————

public with sharing class ContactController {

@AuraEnabled

public static List<Contact> findAll() {

return [SELECT id, name, phone FROM Contact LIMIT 50];

}

@AuraEnabled

public static List<Contact> findByName(String searchKey) {

String name = ‘%’ + searchKey + ‘%’;

return [SELECT id, name, phone FROM Contact WHERE name LIKE :name LIMIT 50];

}

@AuraEnabled

public static Contact findById(String contactId) {

return [SELECT id, name, title, phone, mobilephone, Account.Name

FROM Contact WHERE Id = :contactId];

}

}

—————————————————————————————————

Above Code Highlights:

ContactController is a controller class with methods to receive contacts (findAll), or to search contacts by name (findByName) or by id (findById).

@AuraEnabled method annotation makes a method available to Lightning applications.

A. Create the ContactList Lightning component as below:

—————————–Lighting Component———————

<aura:component controller=”ContactController”>

<aura:attribute name=”contacts” type=”Contact[]”/>

<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}” />

<ul class=”list-group”>

<aura:iteration items=”{!v.contacts}” var=”contact”>

<li class=”list-group-item”>

<a href=”{! ‘#contact/’ + contact.Id }”>

<p>{!contact.Name}</p>

<p>{!contact.Phone}</p>

</a>

</li>

</aura:iteration>

</ul>

</aura:component>

————————————————————————-

Above Code Highlights:

The controller assigned to the component refers to the server-side controller (ContactController).

The contacts attribute is created to hold the list of Contact objects returned from the server.

The Init handler is used to execute code when the component is initialized. That code (doInit) is defined in the component’s client-side controller .

<aura:iteration> is used to iterate through the list of the contacts and to create an <li> for each contact in component

In component use <a href=”{! ‘#contact/’ + contact.Id }”> anchor tag to set the page hashtag to #contact/ followed by the contact id. ContactDetails component will use that hashtag to display details information every time user clicks a new contact.

B. Create the ContactList Lightning component Javascript Controller as below:

———————JSController———————

({

doInit : function(component, event) {

var action = component.get(“c.findAll”);

action.setCallback(this, function(a) {

component.set(“v.contacts”, a.getReturnValue());

});

$A.enqueueAction(action);

}

})

——————————————————-

Above Code Highlights:

This controller has a single function called doInit. This function calls the component when it is initialized.

First get a reference to the findAll() method in the component server-side controller (ContactController), and should store it in the action variable.

Call to the server’s findAll() method is asynchronous, and we can then register a callback function that is executed when the call returns back.

In the callback function, we can simply assign the list of contacts to the component’s contacts attribute.

$A.enqueueAction(action) sends the request the server. Also, it adds the call to the queue of asynchronous server calls.

C. Style the ContactList Lightning component

Click STYLE. Implement the following style:

————————CSS———————-

.THIS p {

margin: 0;

}

——————————————————————————————————————————

Create QuickContacts Lightning Application and use Bootstrap to define a basic layout for the application.  We Use can use any CSS like Salesforce Lightning Design System CSS, Bootstrap

1. In the Developer Console, click File > New > Lightning Application. Mention QuickContacts as the bundle name and click Submit

2. Implement the application by using the code below:

—————————–Lighting Application——————-

<aura:application>

<ltng:require styles={!$Resource. bootstrap}

<div class=”navbar navbar-default navbar-static-top” role=”navigation”>

<div class=”container”>

<div class=”navbar-header”>

<a href=”#” class=”navbar-brand”>Lightning Contacts</a>

</div>

</div>

</div>

<div class=”container”>

<div class=”row”>

<div class=”col-sm-12″>

<c:ContactList/>

</div>

</div>

</div>

</aura:application>

————————————————————————————

Above Code Highlights:

The application uses Bootstrap to implement basic layout for the application

Lightning applications can use Lightning components and regular HTML markup

The link tag refers to the bootstrap stylesheet which is uploaded as a static resource

Click on Preview:

Your application is now ready and  will look like this: