Lightning Component

After Lighting connect one of previous blog now I would like to share some thoughts on lightning component. So what is lightning component?
"The Lightning Component framework is a UI framework for developing dynamic web apps for mobile and desktop devices".

Salesforce has provided us Lightning App Builder to build lighting different Apps using components. The Lightning Component framework is built on the open-source Aura framework available at http://github.com/forcedotcom/aura.

So let me come to the practical example:
There are simple steps to build any lighting components:
Step1: You Name> Developer Console > File > New > Lightning Component. Here Provide Name of Component and click on Submit button.

Step2: For developing lightning component we need to understand below parts mainly as lightning bundle.

a) component
b) controller
c) Helper
d) Style

A component contains the UI part aura tags are being used along with other html tags and it is tightly coupled with Apex controller but here the interesting thing to understand is properties of component are not directly bounded with apex controller while there are two extra layers controller and helper which pays as middle layer. while Style plays role of providing CSS features.

Here I have built lighting application

Component :
 <aura:component access="global" controller="ShowRecordClass" implements="flexipage:availableForAllPageTypes">
 <aura:attribute name="myAccounts" type="Sobject[]">
    <aura:handler action="{!c.getAccRecords}" default="Account" name="init" value="{!this}">
    <aura:attribute name="ObjectApiName" type="String">
    <aura:attribute name="ObjectLabel" type="String">
    <aura:attribute default="5" name="maximum_NoOfRecordstofetch" required="true" type="integer">
    <aura:handler action="{!c.getobjectLabel}" name="init" value="{!this}">
    Here are {!v.maximum_NoOfRecordstofetch}(or less) most recent created Records for Object : {!v.ObjectLabel}
    </aura:handler></aura:attribute></aura:attribute></aura:attribute></aura:handler></aura:attribute></aura:component><br />
<div class="RecordTable">
<div>
<aura:iteration items="{!v.myAccounts}" var="obj">
                        </aura:iteration><br />
<table class="imagetable">
                   <tbody>
<tr>
                       <th class="thcls">{!v.ObjectLabel} Id
                       </th>
                       <th class="thcls">{!v.ObjectLabel} Name
                       </th>
                   </tr>
<tr>
                         <td class="tdcls"><ui:outputtext value="{!obj.Id}"></ui:outputtext></td>
                            <td class="tdcls"><ui:outputtext value="{!obj.Name}"></ui:outputtext></td>                                                      
                        </tr>
</tbody></table>
</div>
</div>

Controller:

({
 getAccRecords : function(component, event, helper) {
  helper.fetchrecords(component);
 },
    getobjectLabel : function(component, event, helper) {
  helper.fetchobjectLabel(component);
 }
})

Helper

({
    fetchobjectLabel : function(component) {
  var action = component.get("c.returnObjectLabel");
         action.setParams({
         sobjeApi : component.get("v.ObjectApiName")            
      });
            action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === 'SUCCESS') {
            component.set("v.ObjectLabel", response.getReturnValue());                
            }
            });
            $A.enqueueAction(action);
 },
 fetchrecords : function(component) {
  var action = component.get("c.fetchRecord");
         action.setParams({
         sobjeApi : component.get("v.ObjectApiName"),
            numberofRecords : component.get("v.maximum_NoOfRecordstofetch")
      });
            action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === 'SUCCESS') {
                console.log('=**=');
            component.set("v.myAccounts", response.getReturnValue());      
            }
            });
            $A.enqueueAction(action);
 }
    
})

Apex Controller

Public Class ShowRecordClass{

@AuraEnabled
Public Static List fetchRecord(String sobjeApi, Integer numberofRecords)
{
    List LstOfAcc = new List();
    LstOfAcc  = Database.query('select id, Name from '+sobjeApi+' Order by CreatedDate DESC limit '+numberofRecords);
    return LstOfAcc  ;
}
@AuraEnabled
Public Static String returnObjectLabel(String sobjeApi)
{
   String finalString  = Schema.getGlobalDescribe().get(sobjeApi).getDescribe().getLabel();
   if(finalString  != null && finalString  !='')
       return finalString  ;
   else
        return sobjeApi;
}
}

Style:

.THIS table.imagetable{
    font-family: verdana,arial,sans-serif;
 font-size:11px;
 color:#333333;
 border-width: 1px;
 border-color: #999999;
 border-collapse: collapse;
}
.THIS th.thcls {
    background:#b5cfd2 ;
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #999999;
}
.THIS td.tdcls {
    background:#dcddc0 ;
 border-width: 1px;
 padding: 8px;
 border-style: solid;
 border-color: #999999;
}

Now we can use this component in lightning Apps or lightning App builder.
<aura:application>
    <c:showrecentcreatedrecords maximum_noofrecordstofetch="6" objectapiname="Account">
</c:showrecentcreatedrecords></aura:application>
Here I am using it in lightning App. Here is the Lightning App preview. To preview go to App and click on preview in right hand side bar. There is one benefit that we can show more than 1000 items of single list on UI which just over come the limit of visualforce page.