Lightning, Lightning and everywhere Lightning is a next generation UI optimized for speed and it is instantly available from winter 16 onwards.

What is Lightning Component Framework?

  • It’s a UI Framework built on the Open Source Aura Framework for developing dynamic web apps which are readily available for mobile and desktop devices which helps us in building apps completely independent of your data.
  • It supports partitioned multi-tier component development that bridges the client and server.
  • It uses JavaScript on Client Side and Apex on Server Side.

Pre-requisite: Enable ‘My Domain’ in your org by following below navigation:

Setup –> Domain Management –> My Domain –> Register your new Domain (by checking domain availability).

Once the domain is registered successfully, then roll out your domain to your org which is required in order to make your custom lightning components to be available in lightning pages, lightning app builder and in standalone apps.

Now, let us make hands dirty:

Scenario: We a want to display “Hello” message using Lightning Component:

Step 1: Create a new Component:

Your Name –> Developer Console –> File –> New –> Lightning Component (Name it as “WelcomeComponent”) and paste the below code:

<aura:component >
<h1 class="title">Hello Friends!!! Welcome to Lightning</h1>
</aura:component>
  • Auro:component: Similar to VF Component tag. Extension of the component is .cmp

Step 2: Create a Style by clicking on Style as below from component page:

welcomeComponent

Take a look on the below bundles – Going forward we will use one or more of this bundles:

LightningComponents

Step 3: Paste the below code under the WelcomeComponent.css


.THIS.title {
text-align:center;
color:blue;
font-size:28px;
}

Note: Don’t forget to Save the component and Style

Step 4: Create a lightning app and call the component (“WelcomeApp”) as below:

File –> New –> Lightning Application

<aura:application >
<c:WelcomeComponent/>
</aura:application>
  • Aura:application: It is similar to our VF Page
  • c: refers to default custom component or you can replace with namespace defined at your org level.
  • You can create your own org namespace by navigating to Setup –> Create –> Packages

After modification of the above code with your namespace – it will look like:

<aura:application >
<singhforce:WelcomeComponent/>
</aura:application>

Where “singhforce” is the namespace defined for my org. Similarly, replace with the namespace defined for your org.

Step 5: Time to see the final result – Click on Preview from the lightning application as below:

WelcomeApp

Step 6: Here how our first “Welcome” apps looks:

WelcomeAppOutput.jpg

Stay tuned!!!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s