2.1 A simple example using button

In the previous chapter, we have gone through how to generate a very basic lightning app and lightning component. Our pages are static in the first chapter. Now, in this chapter, we will be adding some client side logic to make it responsive.

The code

I will start this chapter with a very simple example with one sentence and two buttons. First, let’s create a lightning component called SimpleButtonCmp with the following code:


<aura:component>
    <aura:attribute name="customerName" type="String"/>
    <div> Hello {!v.customerName}!</div>
    <ui:button label="Choose Mary" press="{!c.handleMaryClick}"/>
    <ui:button label="Choose Clark" press="{!c.handleClarkClick}"/>
</aura:component>

And let’s add a controller for it. If you are using Developer console, click controller. If you are using HaoIDE, right click on your component, HaoIDE > Create lightning controller.

In the controller, write down the below code:


({
    handleMaryClick : function(component, event, helper) {
        component.set("v.customerName", "Mary");
    },

    handleClarkClick : function(component, event, helper) {
        component.set("v.customerName", "Clark");
    }
})

And finally, let’s create a lightning app used as a container for this component called SimpleButtonApp.


<aura:application>
    <c:SimpleButtonCmp/>
</aura:application>

Open your lightning app and trying clicking those buttons. Your lightning app should look like below:

A bit explanation

<ui:button> is one of the system’s pre-defined lightning component. And we can feel free to use them. Once we have created a controller, we can link the press event by using {!c.[eventName]} in the controller.

c. here means controller. And in this instance, it means the client side controller file. And the eventName is the function name in your Javascript code.

If you are familiar with html and javascript, you shouldn’t find this piece of code too hard to understand. And we have used component.set(“v.customerName”, [value]); to update the attribute value.

Please note that the set of attribute value is two-way binding here, which means after updating the attribute value, the display in the html DOM gets automatically updated. You don’t need to explicitly tell your DOM to do so.

Next Post

2.2 Some explanation about how lightning component works

Subscribe to Sfdcinpractice

Subscribe to get the latest blogs and tutorials of sfdcinpractice. No spam, no trash, only the awesome posts from sfdcinpractice. 

Leave a Reply

Your email address will not be published / Required fields are marked *