Visualforce is the Markup Language (Tag based language) similar to HTML and XML which was developed by Salesforce.com. It contains tags and controllers where tags are also called as Components. Visualforce uses XML like syntax to create front end design pages and it uses APEX as the backend to implement business logic.

Visualforce and Apex are the mainly used  to create Visualforce pages upto 15Mb that are compatible with mobile devices and browsers. VF page contains  Tags, HTML and JavaScript. Visualforce Tutorials

Visualforce Overview.

Visualforce pages have some unique components that make them easy to create feature rich user interfaces for Force.com. They use standard web technologies such as HTML, JavaScript, and CSS. Pages are composed on the server and not the client. In this Visualforce developer tutorial, we have to understand about Components and Controllers.

Visualforce Components.

Visualforce components or tags are small, reusable pieces of functionalities which are used build high quality visualforce page. In Salesforce.com, we have two types of components they are Standard Components and Custom Components.

Standard Components or tags : Salesforce.com by default provides 60 standard User Interface components. These are the components provided by Salesforce and these are started with <Apex:  Tagname> </Apex: Tagname>. It creates perfect look and feel of the Salesforce without using additional CSS and HTML.

Custom Components or Custom tags : There are the components created by users and starts with <c : Tagname> </c : Tagname>.

What is a Visualforce controller?

A Visualforce controller is a set of instructions that specify what happens when a user interacts with components or tags specified in associated Visualforce markup, such as when a user clicks a button or link it performs some logic. In Salesforce, we have three types of controllers Standard Controllers, Custom controllers and Extension controllers.

Standard Controllers : Standard Controllers are used to customize both Standard objects and Custom objects. This controllers have access to Salesforce database and automatically adjusts to the type of the pages based on where it is called.

  • We can use Standard controllers for custom objects and Standard objects.
  • They provide standard functionality like save, delete and create records.
  • Some standard object don’t have standard controllers.

Custom Controller : Custom controller is a Apex class that implements all the login of visualforce page without leveraging the standard functionality. These are used to create wizards, rich UI with complex data sets and so on.

  • Custom Apex Class is an Apex class that controls the Visualforce Actions and Variables.

Extension Controllers : Extension controller in visualforce is an Apex class that is used to add and extend the functionality to Standard controller and Custom controller. It is also used to overwrite the methods.

  • This controller can override existing standard links and a button.
CustomApexClass, SecondCustomApexClass are Apex classes and we can add multiple extension on a Vf page using a comma separated value.

How to create Visualforce page in Salesforce?

Vf page in Salesforce can be created and edited using Salesforce developer console and from Pages. which has powerful development tools like syntax highlighting, tag pair matching, auto suggest, smart indenting and auto complete. To create new vf page in developer console follow the steps given below.

  1. Open Developer console under your name or quick access menu.Salesforce Developer Console
  2. Now developer Console will be opened in New window.
  3. To create VF page click File | New | Visualforce page.

Hello world Visualforce page

  • Now to File | Click on save button.
  • Now click on preview button to see you new Vf page.

Visualforce page from develop

  • Click on New button to create vf page.
  • Enter label and Name.
  • Finally click on save button.

Creating Visualforce page

For creating VF page, we need not go Setup | Build | Develop | pages or Developer console every time. Here is another way to create VF page directly from URl https://c.ap4.visual.force.com/apex/PageName.

Creating visualforce page from URL

Click on createpage Vftestpage to create new Vf page in Salesforce. To check the created visualforce page navigate to Build | Develop | Visualforce. Here list of all Vf pages in Salesforce will be displayed.

Visualforce pages can be used in different ways in Salesforce organization. Some of them are

  • VF pages can be used by overriding the standard button.
  • VF page can be called using the custom help links for the custom object.
  • Creating JavaScript button to open VF page.
  • Creating custom buttons to open VF page.
  • Vf pages can be added to custom tabs, dashboards and page layouts.