Visualforce is a markup language that uses syntax similar to HTML and XML, to easily create rich-interfaces. The UI designed by Visualforce is feature rich and can be used to make pages compatible with multiple mobile devices and browsers.
Visualforce uses XML-like syntax at the front-end to design pages and APEX as a back-end to implement business logic.
A Visualforce page is finally rendered into HTML, so a Visualforce page can be a combination of Visualforce tags, HTML, and JavaScript.
Any other code that requires HTML and JavaScript can be used inside Visualforce, such as an embed tag for flash. We can create a Visualforce page up to 15 Mb, however, it is recommended to keep pages as small as possible.
Visualforce understands the underlying meta data component of Salesforce. It automatically replicates the properties of the fields in the database.
For example:
- If a field is required, it is marked with a 'red' marker automatically
- A date field has a calendar picker
Visualforce components directly create the Salesforce look and feel, with no additional CSS or HTML requirement. Visualforce pages are automatically upgraded to the next release, if the Salesforce UI changes in the release, Visualforce UI automatically changes.
It separates the view from the data model and the business logic, helping to create rich UI-based pages.
Visualforce pages have some unique components that make them easy to build and use with the Force.com platform.
Pages are used 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
Salesforce by default provides more than 60 standard UI components. Every UI feature provides a standard out-of-the-box feature. For example, a date field component comes with a standard date picker, and page block table automatically assigns a CSS. We can create a complete detail page using a single tag. The components have built-in Ajax functionality to partially refresh page. A full list of components is available at: http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#CSHID=pages_compref.htm
Force.com provides us with standard controllers that help us re-use standard functions such as save, delete, and so on. A standard controller has access to the Salesforce database. It automatically adjusts to the type of page based on where it is called. For example, an input field will work as a new field for a normal page and edit field if the page is called with ID as a parameter. There are two types of Salesforce controllers.
Standard controllers are available for all standard and custom objects. They provide standard functions such as save, delete and create records. Standard controllers are added to a Visualforce page using the following syntax:
<apex:page standardController="Media__c">
Standard controllers are very helpful in designing a custom UI for custom pages. We can create a complete page with much less effort using standard components and controllers.
For example, if we create a page to input a record through user fields, if the page is called without an ID it renders as a new record creation page, however, if we pass a record ID as a URL parameter, the page automatically renders itself as a edit page for the record.
Custom controllers are written in Apex code and are used when we need to write functionality other than the standard functionality. Custom controllers are used to create wizards, rich UI with complex data sets, and so on. Custom controllers are added to the Visualforce page using the following syntax:
<apex: page controller="CustomApexClass">
Here CustomApexClass is an Apex class that controls the Visualforce actions and variables.
Controller extensions give the benefit of standard controllers as well as custom controllers. We can use the ease of standard controllers with the flexibility of the custom controllers in a single page. Controller extensions are used when we are building a Visualforce page to override a standard link or a button. Controller extensions are called using the following syntax:
<apex: page standardController="Media__c" extensions="CustomApexClass, SecondCustomApexClass">
In the given example, opportunity is a Salesforce object while CustomApexClass and SecondCustomApexClass are Apex class.
We can add multiple extensions on a Visualforce page using a comma separated value.
- To override the buttons or add custom buttons on the section of related lists or tabs we create standard list controller. Both the tab and related list layouts are list views, which display rows of data with checkbox.
- To create a standard list controller we add the attribute
recordSetVarto the header.For example,
<apex:page StandardController="Lead" recordSetVar="lead">
The
recordSetVar attribute is used to create a variable on the Visualforce page that can store and iterate on a list of objects. A standard list controllr comes inbuilt with pagination and navigation.
We can bind Apex and data components in Visualforce using the expressions. The expressions used in Visualforce are similar to formula fields, workflow rules, and so on.
The syntax for binding data on Visualforce is:
{!Some_expression_or_data}Context variables are shown using a prefix $ before them. For example, the login user username can be referred to as:
{!$User.username}The context variables are used to refer to the current context of the user and the organization.