Visualforce

What is Visualforce?

Visualforce is a framework that allows developers to build sophisticated, custom user interfaces that can be hosted natively on the Lightning platform.
The Visualforce framework includes a tag-based markup language, similar to HTML, and a set of server-side “standard controllers” that make basic database operations, such as queries and saves, very simple to perform.

The behavior of Visualforce components can either be controlled by the same logic that is used in standard Salesforce pages, or developers can associate their own logic with a controller class written in Apex.

Visualforce page has 2 components:

1. Visualforce Markup
Visualforce markup consists of Visualforce tags, HTML, JavaScript, or any other Web-enabled code embedded within a single tag.

2. Visualforce Controllers
A Visualforce controller is a set of instructions that specify what happens when a user interacts with the components specified in associated Visualforce markup, such as when a user clicks a button or link. Controllers also provide access to the data that should be displayed in a page, and can modify component behavior.


A developer can either use a standard controller provided by the Lightning platform, or add custom controller logic with a class written in Apex:

• A standard controller consists of the same functionality and logic that is used for a standard Salesforce page. For example, if you use the standard Accounts controller, clicking a Save button in a Visualforce page results in the same behavior as clicking Save on a standard Account edit page.
• A custom controller is a class written in Apex that implements all of a page's logic, without leveraging a standard controller.
• A controller extension is a class written in Apex that adds to or overrides behavior in a standard or custom controller. Extensions allow you to leverage the functionality of another controller while adding your own custom logic.

How Visualforce works?

Model-View-Controller (MVC) style development
Visualfore has been architecture based on MVC pattern.

View - User interface, defined by Visualforce Markup
Controller - The business logic, defined by a Visualforce controller written in Apex
Model - Object, Standard objects or custom objects created by you from Object Manager

Ok, now you may have some basic idea about the Visualforce. If you need more information you may read about Visualforce from here

Creating your first page

1. Go to Home --> Custom Code --> Visualforce Pages (or you can also type visualforce pages in the search) and select New
2. Give name and label name and select Save

Data binding

• Anything inside {! } is evaluated as an expression
• Ex: {!$User.FirstName} - $User is a global variable that always represents the current user record.
• All global variables are referenced with a $ symbol.
• You can view the list of global variables from here
• To access fields from a record that is not globally available, like a specific account, contact, or custom object record, you need to associate your page with a controller. While you can define a custom controller for any page with Apex, Salesforce includes standard controllers for every standard and custom object.

1	<apex:page standardController="Account">

2	Hello {!$User.FirstName}!

3	<p>You are viewing the {!account.name} account.</p>

4	</apex:page>

NOTE: The {!account.name} expression makes a call to the getAccount() method in the standard Account controller to return the record ID of the account currently in context. It then uses dot notation to access the name field for that record.

• Visualforce component library can help you with standard pre built components like <apex:pageBlock>, <apex:detail>

Input Components

You can input data by using <apex:form>, <apex:inputField> and <apex:commandButton> components. 

Bellow is the code to change the account name for a given account:

01	<apex:page standardController="Account">

02	<apex:form>

03	<apex:pageBlock title="Hello {!$User.FirstName}!">

04	You are viewing the {!account.name} account. <p/>

05	Change Account Name: <p/>

06	<apex:inputField value="{!account.name}"/> <p/>

07	<apex:commandButton action="{!save}" value="Save New Account Name"/>

08	</apex:pageBlock>

09	</apex:form>

10	</apex:page>

Notice in the example that:

• The tag is bound to the account name field by setting the tag’s value attribute. The expression contains the familiar {!account.name} dot-notation used to display the field’s value elsewhere in the page. 
• The tag has an action attribute. The value for this attribute invokes the save action of the standard Account controller, which performs identically to the Save button on the standard Account edit page.