What is Visualforce Page:

As we all know now that Salesforce provides two cloud services. Once is SAAS (Software As A Service) and PAAS (Platform As A Service). Platform as a service means you can create your own app inside Salesforce using their Platform services. Visualforce is a development framework that allow developers to build custom UI and app. Visualforce Page framework depend on MVC (Modal View Controller). Take a look of following image.

 

Visualforce page

MVC comprises of three part

  1. Modal (this is data)
  2. View ( how data will display)
  3. Controller ( logic of view)

As you can see View comprise Pages and Components but in this tutorial I will write about Visualforce page,

Where to Start:

Visualforce Page can be created by two ways.

  1. Setup -> Develop -> Pages

Introduction to Visualforce page

  1. Enable Debug mode from User Information page

Introduction to Visualforce page

and then type /apex/vfpagename, it will show you following page to you. click on Create Page link

Type Following code in this page and save the page.

Sample Visualforce page

<apex:page>
  <apex:outputtext>Hello World</apex:outputtext>
</apex:page>

Understand basic structure of Visualforce Page with controller:

<apex:page standardController="Account">
  <apex:outputfield value="{!Account.Name}"/>
</apex:page>

Visualforce page comprise of various elements, as we all know that if we are going to write any html page we start with <html> followed by <head> and <body> tag in the same way when we create visualforce page we start by <apex:page, here apex is custom tag created by salesforce followed by tag name. standardcontroller is attribute of apex:page tag, it contains object name for which we are going to create this page so if we are going to use this page for Account object we will write Account, if we are going to use it for Opportunity we will write Opportunity in standardcontroller tag. Apart from standard controller every element or tag contains various attributes which can be used as per the requirement.

How to Access the Page

A Visualforce page can be accessed using /apex/pagename when it is not connected to any object but if you are pointing visualforce page to any object and define standard controller attribute with

/apex/pagename?id=0015000000qYxgm

Salesforce provides visualforce guide to understand different element and their attributes which can we accessed here

Visualforce Guide