Order of execution in Visualforce page

1. Constructor of the controller.

2. Action method of the page.

3. Getter methods.

4. If there are any client-side technologies on the page, such as JavaScript, the browser executes them. Example is
window.onLoad().

Note:
If the page contains an <apex:form> component, all of the information necessary to maintain the state of the
database between page requests is saved as an encrypted view state. The view state is updated whenever the page is
updated.
Sample Code:

Visualforce page:

<apex:page controller="Sample" action="{!sav}">

<apex:outputText >{!mem}</apex:outputText>
</apex:page>

Apex Controller:

public with sharing class Sample {

public String mem {

get { return 'getter';}
set;
}

public sample() {
mem = 'constructor';
}

public void sav() {

mem = 'action';
} }
Output:

Visualforce Page Lifecycle

Visualforce page’s lifecycle is, how the page is created and destroyed during the

period of a user session. The lifecycle of a visualforce page is determined not just by

the content of the page, but also by how the page was requested.

When a user views a Visualforce page, instances of the controller, extensions, and

components associated with the page are created by the server. The order in which

these elements are executed can affect how the page is displayed to the user.
There are two types of Visualforce page requests:

Visualforce Page Get Requests:

A get request is an initial request for a page either made when a user enters an URL or

when a link or button is clicked that takes the user to a new page.

Order of Execution for Visualforce Page Get Requests:

The following diagram shows how a Visualforce page interacts with a controller

extension or a custom controller class during a get request:

In the diagram above the user initially requests a page, either by entering a URL or

clicking a link or button. This initial page request is called the get request.

● The constructor methods on the associated custom controller/extension classes

are called, instantiating the controller objects.
● If the page contains any custom components, they are created and the
constructor methods on any associated custom controllers or controller
extensions are executed. If attributes are set on the custom component using
expressions, the expressions are evaluated after the constructors are evaluated.
● The page then executes any assignTo attributes on any custom components on
the page. After the assignTo methods are executed, expressions are evaluated,
the action attribute on the component is apex:pageevaluated, and all other
method calls, such as getting or setting a property value, are made.
● If the page contains an apex:form component, all of the information necessary
to maintain the state of the database between page requests is saved as an
encrypted view state. The view state is updated whenever the page is updated.
● The resulting HTML is sent to the browser. If there are any client-side
technologies on the page, such as JavaScript, the browser executes them.

Note:

● Once a new get request is made by the user, the view state and controller
objects are deleted.
 ● If the user is redirected to a page that uses the same controller and the same or a
proper subset of controller extensions, a post back request is made. When a
post back request is made, the view state is maintained.

Visualforce Page Postback Requests:

A postback request is made when user interaction requires a page update, such as

when a user clicks on a Save button and triggers a save action.

Order of Execution for Visualforce Page Postback Requests: The following

diagram shows how a Visualforce page interacts with a controller extension or a

custom controller class during a postback request:

 ● During a postback request, the view state is decoded and used as the basis for
updating the values on the page. (A component with the immediate attribute set
to true bypasses this phase of the request. In other words, the action executes,
but no validation is performed on the inputs and no data changes on the page.)
● After the view state is decoded, Expressions are evaluated and set methods on
the controller and any controller extensions, including set methods in
controllers defined for custom components, are executed. If update is not valid
due to validation rule or incorrect data type, data is not updated and page
redisplay with error message.
● Data updated on action there is no evaluation for component attribute. (The
action attribute on the component is not evaluated during a postback request. It
is only evaluated during a get request.)
● The resulting HTML is sent to the browser.

Note:

● Once the user is redirected to another page, the view state and controller objects
are deleted.
● You can use the setRedirect attribute on a pageReference to control whether a
postback or get request is executed. If setRedirect is set to true, a get request is
executed. Setting it to false does not ignore the restriction that a postback
request will be executed if and only if the target uses the same controller and a
proper subset of extensions. If setRedirect is set to false, and the target does not
meet those requirements, a get request will be made.
 What is Lightning Component in Salesforce ?

● The Lightning Component framework is a UI framework for developing dynamic web

apps for mobile and desktop devices.
● Modern framework for building single-page applications with dynamic, responsive user
interfaces for Salesforce.com apps.
● Components are the self-contained and reusable units of an app.
● The framework supports partitioned multi-tier component development that bridges the
client and server.
● It uses JavaScript on the client side and Apex on the server side.

● It’s comes with some exciting tools for developers.

● Is ideal for use with the Salesforce1 mobile app and Salesforce Lightning Experience.
● A component can contain other components, as well as HTML, CSS, JavaScript, or
any other Web-enabled code. This enables you to build apps with sophisticated UIs.
Why we are using the Lightning Component ?

● Comes with an out-of-the-box set of components

● Comes with Rich component ecosystem.
● Better Performance and Faster development.
● Event-driven architecture for better decoupling between components.
● Responsive design and cross browser compatibility.
Reference : Why We are use the Lightning Components.

Where we can use lightning components ?

We can use components in many different contexts. Like –

● Lightning Experience and Salesforce1 App

● Lightning Pages
● Community Builder
● Lightning Apps
● In Visualforce Pages
● Any App with Lightning Out (Beta).
● To create stand-alone apps that are hosted on Salesforce.

NOTE: Custom domain should be enabled in order to implement aura/lightning component.

So what is custom domain and why we need to have it, to learn Lightning Components? So
basically, A custom domain or My Domain is a way to have your own Salesforce org customized
URL rather than a common Salesforce URL

For Example :

Your Salesforce Org. default assigned URL looks Like :

https://ap4.salesforce.com/home/home.jsp

After Register a Custom My Domain, URL looks Like :

https://yourCustomDomain.my.salesforce.com/home/home.jsp
Create Lightning Components
Lightning component is a reusable unit of an app. and it’s a combination of markup, JavaScript,
and CSS.

We can say it is something that will be available on UI for our functionality. Let’s follow this
post to see how to create a basic lightning component.

Step 1: Open Developer Console.

Open Developer Console from the Your Name OR the quick access menu [ ].

Screenshot From Salesforce Lightning Experience

Step 2: Create Lightning Component Bundle

In the developer console Go to File >> New >> Lightning Component

After click on the Lightning Component, Enter the name of your Lightning component bundle
and click on submit button. for this Example enter myFirstComponent in the Name field. Use
the Description field to add details about your component.
This creates a new myFirstComponent component bundle, with two open tabs. Close the
myFirstComponent tab, and keep the myFirstComponent.cmp tab open.

Write your code in component editor between aura:component tags.

For this example, i have write some HTML H1 and P tags and Save it by [ ctrl + s ] OR go to
file >> Save.
component bundle contains a component all its related resources. such as Documentation,
Style, Helper, Controller, Components, and Event handle

We can’t run our lightning component directly, to see what we are create. to test this component
[to see the result of component], we need to create a lightning application Bundle.

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.

For now, We just make a simple Lightning Application Bundle.

So what is Lightning Application?

An Lightning Application Bundle is just a special kind of component! For the Lesson of this
tutorial, you can think of an Lightning Application as being different from a component in only 2
meaningful ways:

● An lightning application bundle uses <aura:application> tags instead of

<aura:component> tags.
● Only an Application has a Preview button in the Developer Console.

Steps To Create Lightning Application Bundle:

In the developer console Go to File >> New >> Lightning Application

After click on the Lightning Application, Enter the name of your Lightning Application bundle
and click on submit button. for this Example enter testApplication in the Name field.
This creates a new “testApplication” lightning application bundle, with two open tabs. Close the
“testApplication” tab, and keep the “testApplication.app” tab open.

As you can seen in above screenshot. in lightning application we have <aura:application> tags
instead of <aura:component > tags. and also having a Preview button on sidebar.

Now add the following markup between <aura:application> tags:

 1

3 <h1> Lightning Application Heading </h1>

4 <c:myFirstComponent/>

● This adds the “myFirstComponent” component we created earlier to the

“testApplication” app.
● Here c: is default namespace to access your components.

Syntax to reference lightning component:

<orgNameSpace:componentName/>

Learn more about namespace here.

● Save your application by [Ctrl + s] or go to file and click on save.

● Click on the Preview button on application bundle from side bar.
Output-:

You can add CSS Style to your lightning component by 3 ways-:

1. Inline Style Sheet.

 2. External Style Sheet.
3. From Style tab on Lightning Component bundle. [in the Developer Console sidebar].

In Lightning components, basically we can use CSS by 3 ways-:

1. Use Inline CSS
2. By external CSS file.
3. By create style tab in component bundle.

1. Inline CSS :
basically, we can use inline style sheet for apply a unique style for a particular component
HTML element. The inline style uses the HTML “style” attribute.

The below example will showing you that how to use Inline CSS in lightning component.

demoComponent.cmp

3 <aura:component>

4 <div style="background-color:black ; margin:12px">

5 <p style="color:white">white Text with black Background [Inline CSS]</p>

6 <p style="color:yellow">Yellow Text with black Background [Inline CSS]</p>

7 </div>

8 </aura:component>

10

Output -:
2. By External CSS file. :
If you need to use your style sheet to multiple lightning components or lighting application, then
it’s always recommended to define a common style sheet in a separate file with extension as .css
. Upload this external css file as a static resources and it will be included in Lightning component
using

<ltng:require styles=”{! $Resource.staticResourceFileName}”/> tag.

The below example will showing you that how to use External styleSheet CSS in lightning
component.

demoCss.css (external CSS file)

3 /*external css file with .css file extension */

4 p{

5 font-size:20px;

6 color:red;

7 background-color:black;

8 }

10 .divStyle{

11 background-color:lightgreen;
 12 color:white;

13 padding:20px;

14 }

15

16

Upload External CSS file as static resource

demoComponent.cmp

3 <aura:component>

4 <ltng:require styles="{!$Resource.demoCss}"/>

5 <p>this is p element</p>

6 <div class="divStyle">

7 this is div text with divStyle style class, which is come from external css file.

8 </div>

9 </aura:component>

10
 11

Output-:

3. By create STYLE tab in component bundle. :

This is the standard way to adding CSS for lightning components. You can add CSS to a
lightning component bundle by cl

icking the
STYLE button in the Developer Console sidebar.

after click on the STYLE button on component bundle, new CSS file is create with .css ext.

Here we can write CSS style for our lightning component.

Always Add a special .THIS CSS class, to all top-level elements in lightning component. it’s
effectively adds namespacing to CSS and helps prevent one component’s CSS from blowing
away another component’s styling.

if you are not using .THIS class for all top-level element then framework throws an error.

The below example will showing you that how to use CSS by STYLE tab in lightning
component. :

demoComponent.cmp

3 <aura:component >

4 <!--here div is top level elements and <h1> and <p> is nested level elements-->

6 <div class="divCss">

7 <h1>Hello Developers's</h1>

8 <p>This is sample HTML Paragraph in a DIV elelment.</p>

9 </div>

10

11 <!--here <p> tag is top level elements-->

12 <p>This is a sample HTML paragraph.<span>with a span element</span></p>

13 </aura:component>

14

15

demoComponent.css
1

3 /* For select ALL TOP level <p> element */

5 p.THIS {

6 color: blue;

7 font-weight: bold;

8 }

10 /* For select ALL TOP level <Div> element with class Name "divCss" */

11

12 .divCss.THIS {

13 padding: 20px;

14 background-color: yellow;

15 }

16

17 /* For select ALL Nested level H1 elements */

18

19 .THIS H1 {

20 color: green;

21 font-size: 22px;

22 }

23

24 /* For select ALL Nested level <p> element */

25

26 .THIS p {
 27 color: red;

28 font-weight: lighter;

29 }

30

31

Output-:

Some Useful CSS Style Selector With .This Class.

● For Select Top Level Elements

1

3 <aura:component >

4 <!--Select TOP LEVEL Elements-->

5 <h1>This is top level heading</h1>

6 <p>This is top level Paragraph elements</p>

8 <!--Nested level Wrap in DIV-->

9 <div>

10 <h1>This is nested level (wrap in div) heading</h1>

 11 <p>This is nested level (wrap in div) Paragraph elements</p>

12 </div>

13 </aura:component>

14

15

3 /* For select TOP level <p> element */

5 h1.THIS {

6 color: Red;

7 font-weight: bold;

8 }

10 p.THIS {

11 color:blue;

12 font-weight: bold;

13 }

14

15

select All TOP level : output

● For Select Nested Level Elements (Not top-level).

 1

3 <aura:component >

4 <!--Select Nested LEVEL Elements-->

5 <h1>This is top level heading</h1>

6 <p>This is top level Paragraph elements</p>

8 <!--Nested level Wrap in DIV-->

9 <div>

1 <h1>This is nested level (wrap in div) heading</h1>

<p>This is nested level (wrap in div) Paragraph elements</p>

1
</div>

1 </aura:component>

●
1

3 /* For select ALL TOP level <p> element */

4 /* Here give Space between .THIS and H1 / p Namespace*/

5 .THIS h1{

6 color: Red;

7 font-weight: bold;

8 }

1 .THIS p{

color:blue;
1
font-weight: bold;

1 }

1
 ●

select nested level

elements: Output

● Select All Top Level Elements With Class.

1

3 <aura:component>

4 <!--Select All Top LEVEL Elements With specify Class-->

5 <h1 class="h1Class">This is top level heading</h1>

6 <p class="PClass">This is top level Paragraph elements</p>

8 <!--Nested level Wrap in DIV-->

9 <div>

1 <h1 class="h1Class">This is nested level (wrap in div) heading</h1>

<p class="PClass">This is nested level (wrap in div) Paragraph elements</p>

1
</div>

1 </aura:component>

1
 1

3 /* For select ALL TOP level element With CLASS */

5 .h1Class.THIS {

6 color: Red;

7 font-weight: bold;

8 }

1 .PClass.THIS {

color: Blue;
1
font-weight: bold;

1 }

1
 1

Select ALL Top level

elements With CLASS : Output
● Select All Nested Level Elements With Class.
1

3 <aura:component>

4 <!--Select All Nested LEVEL Elements With specify Class-->

5 <h1 class="h1Class">This is top level heading</h1>

6 <p class="PClass">This is top level Paragraph elements</p>

8 <!--Nested level Wrap in DIV-->

9 <div>

1 <h1 class="h1Class">This is nested level (wrap in div) heading</h1>

<p class="PClass">This is nested level (wrap in div) Paragraph elements</p>

1
</div>

1 </aura:component>
 1

3 /* For select ALL Nested level element With specify CLASS */

4 /* Here give space between .THIS and className.*/

5 .THIS .h1Class {

6 color: Red;

7 font-weight: bold;

8 }

1 .THIS .PClass {

color: Blue;
1
font-weight: bold;

1 }

1
 1

select nested level

elements with class: Output
● Select Elements With Unique ID.
● Select Elements By Id Component
●

3 <aura:component>

4 <!--Select All Nested LEVEL Elements With specify Class-->

6 <p id="myName">My Name is Jhon Cena.</p>

7 <p>My Name is roman reigns</p>

8 <p id="myName">My Name is dean ambrose</p>

9 </aura:component>

1
 1

3 /* For select ALL element With specify ID

4 Use '#' before ID Name

5 */

6 .THIS#myName {

7 color: White;

8 background-color:black;

9 font-weight: bold;

1 }

●
What is an Attribute in Lightning ?

Attribute is like a member variable in our regular coding (like declare variables in Apex,
JavaScript). In simple words, attributes are used to store information to be referenced and used in
our lightning component code.

Attribute will make your lightning component more dynamic.

How to Add or Declare attributes in lightning component or lightning

application ?

Below is the syntax of using attribute in lightning component or application -:

3 <aura:component>

5 <aura:attribute name="yourName" type="String" default="Marc Benioff" description="Using for Store Name"/>

7 </aura:component>

● So basically in the above sample syntax we have a ‘aura:attribute’ In which, attribute

Name is ‘yourName‘ and its Type is String. and we are give it default value as ‘Marc
Benioff’.
● Attributes are always declare with aura: namespace.
● In the attribute creation, attribute Name and attribute Type is mandatory properties.
● Apart from name, type,default and description we have some more attributes
(properties) of aura:attribute such as:
name : Name of an attribute. [Required/Mandatory]

type : Type of information to be stored. [Required/Mandatory]. ( Click Here to see

supported basic type values of and aura:attribute.)
 default : Default value of an attribute.

access : Indicates whether the attribute can be used outside of its own namespace. Possible
values are: public (default), and global, and private.

required : Is it required or not – Possible Values: true or false(default)

description : Summary of an attribute and its usage.

An attribute can have a type corresponding to a standard or custom object. Such as :

3 <aura:component>

5 <aura:attribute name="objAccount" type="Account" />

7 <aura:attribute name="objCustomObject" type="customObject__c" />

9 </aura:component>

10

11

How to Use or Access aura:attribute In Lightning Component or

Lightning Application?

To access attribute in our Lightning Component or Lightning Application, we have to use value
providers. (we will cover value providers in-depth in upcoming lesson). for now, assume value
provider is just a syntax to access ‘aura:attributes’ to lightning component code.

To access a attribute in component markup using the expression {! v.attributeName} syntax.

here ‘v.‘ gives you a ‘control’ to access the component attributes.

Example 1:
Open Developer Console and Create a lightning component (File > New > Lightning
Component)

Enter name “testAttribute“. and write following code.

testAttribute.cmp

3 <aura:component>

5 <aura:attribute name="FirstName" type="String" default="Marc Benioff" />

6 <aura:attribute name="Age" type="Integer" default="52"/>

7 <aura:attribute name="isMale" type="Boolean" default="true"/>

9 <p>Name of Salesforce CEO is {!v.FirstName}</p>

10

11 <p>{!v.FirstName} is {!v.Age} Years Old.</p>

12

13 <p>{!v.FirstName} is male? = {!v.isMale}</p>

14

15 </aura:component>

16

17

Create an app to see component output:

Open Developer Console and Create a lightning Application (File > New > Lightning
Application)

Enter name “testApplication”. and add your “testAttribute” component on it.

testAttribute.app

3 <aura:application>

5 <c:testAttribute/>

7 </aura:application>

Click on the preview button in developer console sidebar.

Output:

● In the above “testAttribute” lightning component code, first we have create 3

‘aura:attribute’, with specific attribute type such as : string, Integer and Boolean.
● For use this attributes value in lightning component we are using the expression syntax {!
v.attributeName} with value provider “v.” .

Use literal Text Inside the Expression.

you can also use static text with expression, such as :

3 <aura:component>

5 <aura:attribute name="FirstName" type="String" default="Marc Benioff" />

6 <aura:attribute name="Age" type="Integer" default="52"/>

7 <aura:attribute name="isMale" type="Boolean" default="true"/>

9 <p>{!'Name of Salesforce CEO is ' + v.FirstName}</p>

10

11 <p>{!v.FirstName + ' is ' + v.Age + ' Years Old.'}</p>

12

13 <p>{!v.FirstName + ' is male? = ' + v.isMale}</p>

14

15 </aura:component>

16

17

● Notice that we’ve used the “+” operator to concatenate the two strings together inside
expression.
● Output is same as Example 1 output.

What Are The Naming Convention Rules For aura:attribute?

An attribute name must follow these naming rules:

– Must begin with a letter or an underscore.

– Must contain only alphanumeric or underscore characters.