In the previous post we have discussed what is Lightning, Lightning app and some other basic details. In this post we will continue with Lightning component.
To create Lightning component first go to developer console select File | New | Lightning Component to create a new Lightning component. In the New Lightning Bundle panel, enter HelloWorld for the component name, and click Submit.
Now add this lightning component in the lightning app to view this in browser. A component is a bundle that includes a definition resource, written in markup, and may include additional, optional resources like a controller, stylesheet, and so on. A resource is sort of like a file, but stored in Salesforce rather than on a file system.
We will write our complete code in the lightning components.
Now we will learn to add attribute and expression this is a same process which we use in visual force components.
[code language=”PHP”]
<c:helloMessage message="You look nice today."/>
[/code]
Here message is an attribute and we will display it using component.
[code language=”PHP”]
<aura:component>
<aura:attribute name="message" type="String"/>
Hello! {!v.message}
</aura:component>
[/code]
This is a component body (looks similar to Visualforce component isn’t it).
Note: to display data we use v. expression format and this will remain same in all places. V is something called a value provider. Value providers are a way to group, encapsulate, and access related data. An expression is basically a formula, or a calculation, which you place within expression delimiters (“{!” and “}”). So, expressions look like the following:
{!<expression>}
You can also use labels and other text in expression
[code language=”PHP”]
{!$Label.c.Greeting + v.message}
[/code]
There are a number of different attribute types.
- Primitives data types, such as Boolean, Date, DateTime, Decimal, Double, Integer, Long, or String. The usual suspects in any programming language.
- Standard and custom Salesforce objects, such as Account, MyCustomObject__c.
- Collections, such as List, Map, and Set.
- Custom Apex classes.
- Framework-specific types, such as Aura.Component, or Aura.Component[].
Now we will learn how to use controllers.
Lightning component work on View-Controller-Controller-Model, or perhaps View-Controller-Controller-Database. Here two controller refer, one client side controller (JavaScript) and other is server side controller (Apex).
[code language=”PHP”]
<ui:button label="You look nice today." press="{!c.handleClick}"/>
[/code]
So when we click this button an event will fire (Same as Visual force) but instead of controller method we will first call client side controller or JavaScript controller.
[code language=”PHP”]
({
handleClick: function(component, event, helper) {
var btnClicked = event.getSource(); // the button
var btnMessage = btnClicked.get("v.label"); // the button’s label
component.set("v.message", btnMessage); // update our message
}
})
[/code]
This is the JavaScript controller format. Here event is which start this process. Component contains information related to the component in which this event is fired and helper is as name suggests a helper method which we can call multiple time in component.
[code language=”PHP”]
handleClick2: function(component, event, helper) {
var newMessage = event.getSource().get("v.label");
component.set("v.message", newMessage);
},
handleClick3: function(component, event, helper) {
component.set("v.message", event.getSource().get("v.label"));
}
[/code]
You can define multiple method but you need to separate them using comma. You can also use JavaScript debugging tools like console.log here to debug the application. In the next post we will learn how to take input from users and pass them in controllers.
1 thought on “Lightning in Salesforce – Part 2”