Visualforce is SFDC’s custom mark up language and represents the view in a Model-View-Controller software design pattern. Each Visualforce page is tied directly to a controller. These controllers, of course, manipulate the data in the model (database) and contain your application’s business rules.
Visualforce is made up of components (standard and custom.) These are architectural elements with occasional functional behaviors. Like HTML, there are tags such as tables, input and output fields, check boxes, buttons, custom drop downs, etc… (of course, you can also include good old HTML itself.) Let’s explore some of Visualforce’s standard components.

Some basic structural standard components:

<apex:sectionHeader … >
<apex:pageblock … >
<apex:pageblocksection  … >

As you can see in the code example below, each has attributes like “title=”, “columns=”, etc…
(note: this screenshot captures the use of SFDC’s handy Visualforce in-page editor)

For displaying the actual data notice the use of the outputfield component.  The “value” attribute is used to set the desired object’s field.

<apex:outputfield value=”{!contact.Name}”>

(note: SFDC’s syntax for data binding in Visualforce {!objectname.fieldname} )

And as you might expect, there’s an inputfield component for getting data into your objects. However, such fields need to be contained within a Visualforce “form” component. A cool thing to point out is that these standard components are meta-data aware. So if your field is defined as a SFDC “picklist,” the inputfield component will display it as a drop down.

How about a button:

<apex:commandButton action=”{!submit}” value=”Submit”/>

When user hits Submit button, the page’s controller’s method called “getSubmit” will execute. Notice the implied “get” in the action attribute (“{!submit}”).

Include a list view of a related object:

<apex:relatedList list=”Opportunities” title=”And customize the title” />

Show the default SFDC record detail layout:

<apex:detail />

There’s a bunch more to check out — For a complete list of standard components and an ultimate reference for Visualforce see the Visualforce Developer’s Guide

In a future post we’ll look at some interaction between the Visualforce page and it’s controller.

Related posts:

1. Adding a custom wizard feature in Salesforce Wizards generally consist of a user interface with step-by-step instructions....
2. Creating a custom bulk edit screen Salesforce gives you some native bulk edit capabilities right out...

Related posts brought to you by Yet Another Related Posts Plugin.