What is Lightning.
1. Lightning is a SPA (Single Page Application)
2. In Lightning once we submit a page then AJAX will call to server and server will give the response in the form of JSON, and json will replacing only the element whose data is changing .
3. In Classic once we submit the page then HTTP POST will call to server and server will give the response in the form of HTML.
4. In it entire page is not reloaded only refresh the element but in classic whole page is reloaded.
5. In lightning visual force page nature is asynchronous But in classic visual force page by default nature is synchronous
6. With the help of AJAX functionality we can improve the performance of page and make it asynchronous in classic we use some Ajax functionality like as (render, rerender, action support, action function,action region,Remote action ) .
7. The major terms is changing in the lightning and classic is UI.
8. In both server side operation 90% or 95 % remain same .
9. In Lightning if you want to call direct to server side apex class method or database you can not call so firstly you have to make the request client side controller then java script call the server side apex class method.
10. In lightning we don't build page we build some visualforce component and join them
so if we change in one component then all the page which have that component will change automatically so load time is reduce,
11. In lightning everything design in custom component only.
12. In it framework enforce developer to break the application into no of component.
13. Lightning is used to build responsive application for any device.
14. Lightning used following technologies.
a. Lightning component
b. Lightning App builder
15. Lightning component :
These are reusable unit of an app
These give you a client -sever framework that accelerates development
17. Lightning App builder
a. It empower you to build apps visually , without code.
b. It include standard components and custom components.
18. Some features are available in Lightning but not in classic.
Lightning Classic
a. Performance chart Yes No
b. Assistant Yes No
c. News Yes No
d. Account Logo Yes No
e. Path Yes No
f. Notes Yes No
g. Reference Page layout Yes No
h. Similar Opportunities No Yes
i. Big deal alert No Yes
j. Solution No Yes
k. SOS No Yes
l. Follow reports No Yes
m. Report Notification No Yes
n. Schedule dashboard No Yes
refresh
o. Partner portal No Yes
p. Work.com No Yes
Hence above i see that lightning don't some functionality but classic have so for getting these functionality we have to use custom functionality by using custom component
19. If you want to run or create lightning component then It is must that you should have domain.
without domain you can not run lightning component.
.Q- If we already have Ajax functionality in classic then why should i go for lightning ?
A- Because in classic if we have to use group of Ajax functionality for every component then performance will be reduce. and Lightning have pre-built Ajax functionality .
In the above fig. both (lightning & classic ) send the request to server then server send the response page in the form of HTML first time but in second time when we submit the data then .....
( in lightning it send the request in the form of AJAX by default then server send the response in the form of JSON and then it will refresh the only that component or field whose data change ....)
(But in classic second time when we submit the request it will go in the form of HTTP POST and server send the response in the form of HTML page or it will refresh whole page ..)
Q- What is the MVC model of classic and lightning
A- In Classic MVC
a.Model== Database,object
b. View== Visualforce page
c. Controller== Apex class, Any event, salesforce controller
In Lightning MVC
a. Model===== Database,Object
b. View====== HTML,( Controller(js), Storage(js) ) client side controller
c. Controller== Apex class, Any event
IN the above fig. when we click on submit button than Ajax call to client side controller then controller send the request to server then server send the response to client side controller then controller send the response to the page. so its means server do not send the response to directly to page AS classic experience.
storage(js) == on client side the data will store in the form of attribute.
controller(js)== any client side operation
NOTE: The main difference of classic and lightning MVC is that , classic don't have server side controller but lightning have. And in lightning, server send the response to client controller then client controller send to page And in classic , server send the response direct to page.
========================================================================
1. Lightning Application is a collection of lightning component.
2. It have an (.app )extension
3. It start with and end with <aura:application> tag.
4. Attribute = Access, controller, description, extends, extensible,implements
5 Application bundle : 7
a. application
b. controller
c. helper
d. style
e. documentation
f. renderer
g. svc
5. Lightning application body consist with ( HTML element )and ( lightning component).
========================================================================
LIGHTNING COMPONENT
1. Lightning component is a functional unit of aura
2. It is re-usable entity of lightning framework.
3. It also consist with HTML element and lightning component
4. Attribute = Access, controller, description, extends, extensible,implements.
5. It have the extension (.CMP).
6. Component bundle:(8)
a. component
b. controller
c. helper
d. style
e. documentation
f. renderer
g. svg (Scalable Vector Graphics)
h. design
7. How to invoke the controller in the Lightning application
point 1: If there is no Namespace then we use it as <C:ComponentName />
point 2: If there is Namespace then we use it as <Namesapce name: Component Name />
8. We can invoke multiple component in single application and in single component we can also invoke multiple component
========================================================================
Aura :Attribute type= It is used to define the property of component
Access:Define the scope like Public or Global
Name: Define the name of attribute ( string).
Type: Define the data type of attribute ( primitive,non primitive),list,set,map,class,integer,string,etc.
Default: Define the default value of attribute
Required: make the value Required.
Description: define the information of attribute.
Attribute define in the component like as {!V.AttributeName}
Example 1:
-------------------------------------------------------------------
a. Component Name : Attribute_Example_1 :
<aura:component >
<aura:attribute name="empName" type="String" />
<aura:attribute name="age" type="Integer" required="true" />
<aura:attribute name="Salary" type="Decimal" default="10000" />
<aura:attribute name="City" type="String" description="Home town" />
Name : {!v.empName} <br/>
Age :{! v.age} <br/>
Salary:{!v.Salary} <br/>
City :{!v.City}
</aura:component>
b.Application Name : Attribute_Example_App_1
<aura:application >
<c:Attribue_Example_1 empName="First App" age="53" City="Hyd" />
</aura:application>
1. Lightning is a SPA (Single Page Application)
2. In Lightning once we submit a page then AJAX will call to server and server will give the response in the form of JSON, and json will replacing only the element whose data is changing .
3. In Classic once we submit the page then HTTP POST will call to server and server will give the response in the form of HTML.
4. In it entire page is not reloaded only refresh the element but in classic whole page is reloaded.
5. In lightning visual force page nature is asynchronous But in classic visual force page by default nature is synchronous
6. With the help of AJAX functionality we can improve the performance of page and make it asynchronous in classic we use some Ajax functionality like as (render, rerender, action support, action function,action region,Remote action ) .
7. The major terms is changing in the lightning and classic is UI.
8. In both server side operation 90% or 95 % remain same .
9. In Lightning if you want to call direct to server side apex class method or database you can not call so firstly you have to make the request client side controller then java script call the server side apex class method.
10. In lightning we don't build page we build some visualforce component and join them
so if we change in one component then all the page which have that component will change automatically so load time is reduce,
11. In lightning everything design in custom component only.
12. In it framework enforce developer to break the application into no of component.
13. Lightning is used to build responsive application for any device.
14. Lightning used following technologies.
a. Lightning component
b. Lightning App builder
15. Lightning component :
These are reusable unit of an app
These give you a client -sever framework that accelerates development
17. Lightning App builder
a. It empower you to build apps visually , without code.
b. It include standard components and custom components.
18. Some features are available in Lightning but not in classic.
Lightning Classic
a. Performance chart Yes No
b. Assistant Yes No
c. News Yes No
d. Account Logo Yes No
e. Path Yes No
f. Notes Yes No
g. Reference Page layout Yes No
h. Similar Opportunities No Yes
i. Big deal alert No Yes
j. Solution No Yes
k. SOS No Yes
l. Follow reports No Yes
m. Report Notification No Yes
n. Schedule dashboard No Yes
refresh
o. Partner portal No Yes
p. Work.com No Yes
Hence above i see that lightning don't some functionality but classic have so for getting these functionality we have to use custom functionality by using custom component
19. If you want to run or create lightning component then It is must that you should have domain.
without domain you can not run lightning component.
.Q- If we already have Ajax functionality in classic then why should i go for lightning ?
A- Because in classic if we have to use group of Ajax functionality for every component then performance will be reduce. and Lightning have pre-built Ajax functionality .
( in lightning it send the request in the form of AJAX by default then server send the response in the form of JSON and then it will refresh the only that component or field whose data change ....)
(But in classic second time when we submit the request it will go in the form of HTTP POST and server send the response in the form of HTML page or it will refresh whole page ..)
Q- What is the MVC model of classic and lightning
A- In Classic MVC
a.Model== Database,object
b. View== Visualforce page
c. Controller== Apex class, Any event, salesforce controller
In Lightning MVC
a. Model===== Database,Object
b. View====== HTML,( Controller(js), Storage(js) ) client side controller
c. Controller== Apex class, Any event
storage(js) == on client side the data will store in the form of attribute.
controller(js)== any client side operation
NOTE: The main difference of classic and lightning MVC is that , classic don't have server side controller but lightning have. And in lightning, server send the response to client controller then client controller send to page And in classic , server send the response direct to page.
========================================================================
1. Lightning Application is a collection of lightning component.
2. It have an (.app )extension
3. It start with and end with <aura:application> tag.
4. Attribute = Access, controller, description, extends, extensible,implements
5 Application bundle : 7
a. application
b. controller
c. helper
d. style
e. documentation
f. renderer
g. svc
5. Lightning application body consist with ( HTML element )and ( lightning component).
========================================================================
LIGHTNING COMPONENT
1. Lightning component is a functional unit of aura
2. It is re-usable entity of lightning framework.
3. It also consist with HTML element and lightning component
4. Attribute = Access, controller, description, extends, extensible,implements.
5. It have the extension (.CMP).
6. Component bundle:(8)
a. component
b. controller
c. helper
d. style
e. documentation
f. renderer
g. svg (Scalable Vector Graphics)
h. design
7. How to invoke the controller in the Lightning application
point 1: If there is no Namespace then we use it as <C:ComponentName />
point 2: If there is Namespace then we use it as <Namesapce name: Component Name />
8. We can invoke multiple component in single application and in single component we can also invoke multiple component
========================================================================
Aura :Attribute type= It is used to define the property of component
Access:Define the scope like Public or Global
Name: Define the name of attribute ( string).
Type: Define the data type of attribute ( primitive,non primitive),list,set,map,class,integer,string,etc.
Default: Define the default value of attribute
Required: make the value Required.
Description: define the information of attribute.
Attribute define in the component like as {!V.AttributeName}
Example 1:
-------------------------------------------------------------------
a. Component Name : Attribute_Example_1 :
<aura:component >
<aura:attribute name="empName" type="String" />
<aura:attribute name="age" type="Integer" required="true" />
<aura:attribute name="Salary" type="Decimal" default="10000" />
<aura:attribute name="City" type="String" description="Home town" />
Name : {!v.empName} <br/>
Age :{! v.age} <br/>
Salary:{!v.Salary} <br/>
City :{!v.City}
</aura:component>
b.Application Name : Attribute_Example_App_1
<aura:application >
<c:Attribue_Example_1 empName="First App" age="53" City="Hyd" />
</aura:application>
========================================================================
Client_Side_Controller:
1. Client side controller is defined using javascript.
2. When any event occurs on the component corresponding client side controller is invoked.
3. 'on' action events
onclick ,onchange,onfocus,onblur,.......
4. Every component will have corresponding client side controller
5. If the component name is 'abc' then corresponding client side controller is abccontroller.js
6. syntax :
functionName : function( component, event,helper){
}
7 .Param1 : Component :
a. This will reffere to component on which this controller is defined
8. Param2 : event :
a. This will handle the action that is fired on the component .
9. Param3 : helper :
a. This is a optional parameter .
b. In case if you have any resuable javascript code ,that is reffered as helper .
Note : Javascript is a case-sensitive
Note : Javascript doesnt have compiler
Note : Javascript is interpreted langugate.
({
functionName : function(component,event,helper){
logic,
}
})
10. Client side-Controller is invoked when a event occurs on the component.
11. whenever we load any component then firstly aura:Handler will call then component data will load as same as when we load VF page constructor call firstly.
11.But Aura :Handler is optional
========================================================================
Aura:handler :
--------------
1. This is a pre-defined component is the lightning .
2. This will be automatically fired when a component is invoked.
3. If the component has aura:handler defined init ,first aura:hadler action is performed then
the body of the component is loaded.
4. This is used to perform initialisation action.
5. aura:handler:
name : This is set as init
value : This is set this
action : This will refer to the action that need to be invoked when component is loaded.
--------------------------------------------------------------------------------------------------------------------------
<!--
Component : Handler_Example_1:
<aura:component >
<aura:handler name="init" value="{!this}" action="{!c.show}" />
</aura:component>
Client Side Controller : Handler_Example_1Controller.js
({
show : function(component, event, helper) {
console.log('This is line one ');
console.log('This is line two');
}
})
Application :
<aura:application >
<c:Handler_Example_1 />
</aura:application>
--------------------------------------------------------------------------------------------------------------------------
11. whenever we load any component then firstly aura:Handler will call then component data will load as same as when we load VF page constructor call firstly.
11.But Aura :Handler is optional
========================================================================
Aura:handler :
--------------
1. This is a pre-defined component is the lightning .
2. This will be automatically fired when a component is invoked.
3. If the component has aura:handler defined init ,first aura:hadler action is performed then
the body of the component is loaded.
4. This is used to perform initialisation action.
5. aura:handler:
name : This is set as init
value : This is set this
action : This will refer to the action that need to be invoked when component is loaded.
--------------------------------------------------------------------------------------------------------------------------
<!--
Component : Handler_Example_1:
<aura:component >
<aura:handler name="init" value="{!this}" action="{!c.show}" />
</aura:component>
Client Side Controller : Handler_Example_1Controller.js
({
show : function(component, event, helper) {
console.log('This is line one ');
console.log('This is line two');
}
})
Application :
<aura:application >
<c:Handler_Example_1 />
</aura:application>
--------------------------------------------------------------------------------------------------------------------------
Lightning_Button :
------------------
1. This is used to create a button on the VF page ,with Lightning look and feel
2. Properties :
a. title : When we keep the cursor tool tip on the button message that should be displayed is called title.
b. label : Message that should be displayed on the button
c. value : when an event occurs on the button what is the client side action that should be performed is defined
as value .
d. name : If you want to define a name for the button ,we can use this .
5. variant : The variant changes the appearance of the button.
: Possible values are base, neutral, brand, destructive, inverse and success.
: This value defaults to neutral.
6.iconName : This defines the iconName that should be used from Lightning Design system ( Action: ,Standard ,utitlity)
7.iconPosition : This will specify the position of the icon with respect to the body of the button
: Possible values are left and right,
: Default values are left .
you can run your lightning component inside a container app. this containers would be the Lightning Experience, Salesforce1 apps, Lightning App builder or Lightning Application Bundle. You can add your lightning component to one of these containers, and then access it within that container
you can run your lightning component inside a container app. this containers would be the Lightning Experience, Salesforce1 apps, Lightning App builder or Lightning Application Bundle. You can add your lightning component to one of these containers, and then access it within that container
========================================================================
Example 1:
Example 1:
Component Name : Lighting_Button_1
<!--
<aura:component >
<lightning:button label="Button1" />
<lightning:button label="Button2" title="MyButton" />
<lightning:button label="Base" variant="base" />
<lightning:button label="neutral" variant="neutral" />
<lightning:button label="inverse" variant="inverse" />
<lightning:button label="destructive" variant="destructive" />
<lightning:button label="success" variant="success" />
<lightning:button label="Cancel" iconName="standard:account" />
<lightning:button label="SetData" iconName="utility:down" iconPosition="right" />
</aura:component>
-->
Component Application :
<!--
<aura:application extends="force:slds">
<c:Button_Example_1 />
</aura:application>
========================================================================
How to show lightning application and component on VF page
VF page
<apex:page sidebar="false" showHeader="true">
<apex:includeLightning />
<div id="dvCreateCase"></div>
<script>
$Lightning.use("c:LighningApplicationName", function() {
* $Lightning.createComponent(String type, Object attributes, String locator, function callback) */
$Lightning.createComponent("c:ComponentName",
{
},
"dvCreateCase",
function(component) {
});
});
</script>
</apex:page>
Application
<aura:application extends="ltng:outApp">
<aura:dependency resource="c:Case_Component"/>
</aura:application>
========================================================================
How to call client side controller and how to set and get the value in client side controller
Example
Component
<aura:component >
<aura:attribute name="empName" type="String" />
<aura:attribute name="salary" type="Decimal" />
<aura:attribute name="Exp" type="Decimal" />
<aura:attribute name="bonus" type="Decimal" />
<aura:handler name="init" value="{!this}" action="{!c.invoke}" />
<div>
Name : {!v.empName} <br/>
Salary:{!v.salary} <br/>
Exp :{!v.Exp} <br/>
Bonus :{!v.bonus}
</div>
</aura:component>
invoke : function(component, event, helper) {
var salary= component.get("v.salary");
console.log('Salary:'+salary);
var exp =component.get("v.Exp");
var bonus=0;
console.log('Exp:'+exp);
if(exp > 5){
bonus=salary*0.30;
}else{
bonus=salary*0.20;
}
component.set("v.bonus",bonus);
console.log('Bonus :'+bonus);
}
})
Application
<aura:application >
<c:Set_Get_Example_1 empName="Ramesh" salary="10000" Exp="7" />
</aura:application>
========================================================================
UI component don't have any CSS style if you want some style then you have to write it but in Lightning component it already have prebuilt CSS on button there is no need to write
Example
<aura:application extends="force:slds">
<ui:button aura:id="button" lable="Click Me" />
<lightning:button label="Click me" />
</aura:application>
========================================================================
========================================================================
How to show lightning application and component on VF page
VF page
<apex:page sidebar="false" showHeader="true">
<apex:includeLightning />
<div id="dvCreateCase"></div>
<script>
$Lightning.use("c:LighningApplicationName", function() {
* $Lightning.createComponent(String type, Object attributes, String locator, function callback) */
$Lightning.createComponent("c:ComponentName",
{
},
"dvCreateCase",
function(component) {
});
});
</script>
</apex:page>
Application
<aura:application extends="ltng:outApp">
<aura:dependency resource="c:Case_Component"/>
</aura:application>
========================================================================
How to call client side controller and how to set and get the value in client side controller
Example
Component
<aura:component >
<aura:attribute name="empName" type="String" />
<aura:attribute name="salary" type="Decimal" />
<aura:attribute name="Exp" type="Decimal" />
<aura:attribute name="bonus" type="Decimal" />
<aura:handler name="init" value="{!this}" action="{!c.invoke}" />
<div>
Name : {!v.empName} <br/>
Salary:{!v.salary} <br/>
Exp :{!v.Exp} <br/>
Bonus :{!v.bonus}
</div>
</aura:component>
Client side controller
({invoke : function(component, event, helper) {
var salary= component.get("v.salary");
console.log('Salary:'+salary);
var exp =component.get("v.Exp");
var bonus=0;
console.log('Exp:'+exp);
if(exp > 5){
bonus=salary*0.30;
}else{
bonus=salary*0.20;
}
component.set("v.bonus",bonus);
console.log('Bonus :'+bonus);
}
})
Application
<aura:application >
<c:Set_Get_Example_1 empName="Ramesh" salary="10000" Exp="7" />
</aura:application>
========================================================================
UI component don't have any CSS style if you want some style then you have to write it but in Lightning component it already have prebuilt CSS on button there is no need to write
Example
<aura:application extends="force:slds">
<ui:button aura:id="button" lable="Click Me" />
<lightning:button label="Click me" />
</aura:application>
lightning:recordEditForm component doesn’t require Apex controllers or Lightning Data Service to display record data. This component also takes care of field-level security and sharing for us, which means users can see only the data they have access to.
Lightning:input
1. This is a pre-defined component under the namespace of lighnting
2. These component will have built in slds .
3. Attribues :
1. type :
a. Type will specify type of input we are expecting
b. Possible values
a. number
b. text
c. date
d. dataTime
e. checkbox
f. radio
g. search
h. toggle
i. email
j. url
k. checkbox-button
2. label :
a. This is a string ,this will be display on the top the input box
3. value :
a. This will take the attribute name ,from which set and get wil performed.
4. aura:id :
a. This will reffer to id of the elemment
5. variant :
a. Possible values are label-hidden and standard
b. Default value is standard
6. disabled :
a. This a boolean value ,when set to true ,box is disabled.
7. readonly :
8. required :
9. tabindex :
10. maxlength
11. minlenght
12. pattern : In case if you want to apply validation the pattern of input then we use it.
===================================================================
Example 1:
Component Name : Input_Example
<!--
<aura:component >
<lightning:input label="First Name" aura:id="fname" />
<lightning:input label="Last Name" aura:id="lname" />
<lightning:input label="Name" aura:id="Name" />
<lightning:button label="submit" onclick="{!c.show}" />
</aura:component>
-->
Controller :
<!--
({
show : function(component, event, helper) {
var lastName=component.find("lname").get("v.value");
var firstName=component.find("fname").get("v.value");
var name=firstName+'-'+lastName;
console.log('LastName:'+lastName);
console.log('FirstName'+firstName);
component.find("Name").set("v.value",name);
}
})
-->
-----------------------------------------------------------------------------
Example 2:
Component Name :
<!--
<aura:component >
<lightning:input type="number" label="AVal" aura:id="aval" />
<lightning:input type="number" label="BVal" aura:id="bval" />
Result :
<lightning:input type="number" aura:id="cval" />
<lightning:button variant="base" label="Add" onclick="{!c.callAdd}" />
<lightning:button variant="base" label="Mul" onclick="{!c.callMul}" />
<lightning:button variant="base" label="Cancel" onclick="{!c.reset}" />
</aura:component>
-->
Controller :
<!--
({
callAdd : function(component, event, helper) {
var aval =component.find("aval").get("v.value");
var bval =component.find("bval").get("v.value");
var result=parseInt(aval)+parseInt(bval);
component.find("cval").set("v.value",result);
},
callMul : function(component, event, helper) {
var aval =component.find("aval").get("v.value");
var bval =component.find("bval").get("v.value");
var result=parseInt(aval)*parseInt(bval);
component.find("cval").set("v.value",result);
},
reset : function(component, event, helper) {
component.find("aval").set("v.value",0);
component.find("bval").set("v.value",0);
component.find("cval").set("v.value",0);
}
})
Lightning:input
1. This is a pre-defined component under the namespace of lighnting
2. These component will have built in slds .
3. Attribues :
1. type :
a. Type will specify type of input we are expecting
b. Possible values
a. number
b. text
c. date
d. dataTime
e. checkbox
f. radio
g. search
h. toggle
i. email
j. url
k. checkbox-button
2. label :
a. This is a string ,this will be display on the top the input box
3. value :
a. This will take the attribute name ,from which set and get wil performed.
4. aura:id :
a. This will reffer to id of the elemment
5. variant :
a. Possible values are label-hidden and standard
b. Default value is standard
6. disabled :
a. This a boolean value ,when set to true ,box is disabled.
7. readonly :
8. required :
9. tabindex :
10. maxlength
11. minlenght
12. pattern : In case if you want to apply validation the pattern of input then we use it.
===================================================================
Example 1:
Component Name : Input_Example
<!--
<aura:component >
<lightning:input label="First Name" aura:id="fname" />
<lightning:input label="Last Name" aura:id="lname" />
<lightning:input label="Name" aura:id="Name" />
<lightning:button label="submit" onclick="{!c.show}" />
</aura:component>
-->
Controller :
<!--
({
show : function(component, event, helper) {
var lastName=component.find("lname").get("v.value");
var firstName=component.find("fname").get("v.value");
var name=firstName+'-'+lastName;
console.log('LastName:'+lastName);
console.log('FirstName'+firstName);
component.find("Name").set("v.value",name);
}
})
-->
-----------------------------------------------------------------------------
Example 2:
Component Name :
<!--
<aura:component >
<lightning:input type="number" label="AVal" aura:id="aval" />
<lightning:input type="number" label="BVal" aura:id="bval" />
Result :
<lightning:input type="number" aura:id="cval" />
<lightning:button variant="base" label="Add" onclick="{!c.callAdd}" />
<lightning:button variant="base" label="Mul" onclick="{!c.callMul}" />
<lightning:button variant="base" label="Cancel" onclick="{!c.reset}" />
</aura:component>
-->
Controller :
<!--
({
callAdd : function(component, event, helper) {
var aval =component.find("aval").get("v.value");
var bval =component.find("bval").get("v.value");
var result=parseInt(aval)+parseInt(bval);
component.find("cval").set("v.value",result);
},
callMul : function(component, event, helper) {
var aval =component.find("aval").get("v.value");
var bval =component.find("bval").get("v.value");
var result=parseInt(aval)*parseInt(bval);
component.find("cval").set("v.value",result);
},
reset : function(component, event, helper) {
component.find("aval").set("v.value",0);
component.find("bval").set("v.value",0);
component.find("cval").set("v.value",0);
}
})
========================================================================
No comments:
Post a Comment