Introduction to Visualforce

Visualforce is an interesting tool. Visualforce is a markup language technically speaking it is nothing but a wrapper on html to design a user interface i.e. view that lives on your Force.com.
Visualforce pages comprise of two elements: Visualforce markup and a controller(either standard or custom).By using markup language you can define the components that will live on your page and tie it to a controller (either custom or standard ) to execute the logic behind those components.

Types of Controllers

A standard controller consists of the same features and logic that is used for a standard Salesforce page. For instance, if you use the standard Contact(Object) controller, clicking a Save button in a Visualforce page results in the same behavior as clicking Save on a standard Contact edit page. If you use a standard controller on visualforce page and the user(who is accessing) does not have access to that object from his profile, the page will display an insufficient privileges error message to that user. You can avoid this by checking the user’s accessibility for an object and displaying components appropriately to the user.

Note: so bottom line story is that whenever you want to bind your visualforce page with sObject i.e. either standard or custom in this case we use standard controller.

A custom controller is a class which is written in Apex language that implements the entire page’s logic, without leveraging a standard controller. By using a custom controller, you can define new navigation logic or behaviors, but you must also re-implement any functionality that was already provided in a standard controller.

Similarly other Apex classes, custom controllers execute entirely in system mode which is a default mode, in which the object and field-level permissions of the current user are pass over. If you do not want that security and sharing model of your org will not pass over then in this case you can use user mode so if you are using user mode in this case a user can see what system is allow i.e. it will not pass over your org security and sharing model of your org.

Note: so bottom line story is that whenever you want to bind your visualforce page with Apex class in this case we use custom controller.

A controller extension is a class again written in Apex language that adds to or overrides standard or custom Object behavior. Extensions allow you to leverage the functionality of another controller while adding your own custom logic as per your requirement.

Creating a Visualforce Page

Go to developer console → File → New → Visualforce page. The new window will open ask for the page name. Let us have a page name HelloVFPage. Let us write the code as shown below:

<apex:page>
  <apex:form >
 
    <h1>
         Welcome to Visualforce page development!!
    </h1>
    <p>
        I believe you will like this.
      </p>
  </apex:form>
</apex:page>

Save it using Ctlr + S. Then, click on Preview Button. This opens a new webpage to show the result as shown in the following screenshot.

Adding components

In this section, now we are going to learn how to add more components to a visualforce page that we already created. Let us add some user interface components to the page created above. We add a page block and a page block section in the following code.

<apex:page>
 <apex:form >
 <h1>
      Welcome to Visualforce page development.
 </h1>
 <apex:pageblock title="Page block title here">
 <apex:pageblockSection columns="3" title="Page block section title here">
 PageBlockSection used to represents a section of data with in an apex pageBlock tag.
 It is similar to a section in a standard Salesforce page layout.
 This component consists of one or more columns based on requirement,
 where each of which spans two cells, one is for a field label and the other one is for its value.
 </apex:pageblockSection> 
 </apex:pageblock>
 </apex:form>
</apex:page>

On clicking on preview the page, we get the following output.