This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
An Introduction to Visualforce - developer.force.com
Page 1 of 13
DE LOGIN
JOIN NOW
Search
Home
Technical Library
Boards
Cookbook
Code Share
Blog
Partners
page |
Technical Library Documentation
More edit |
history |
move |
watch
Introduction to Visualforce
Core Resources Tools
Abstract Visualforce is the component-based user interface framework for the Force.com platform. The framework includes a tag-based markup
Integration
language, similar to HTML. Each Visualforce tag corresponds to a coarse or fine-grained user interface component, such as a section of a
App Logic
page, or a field. Visualforce boasts over 60 built-in components, and a mechanism whereby developers can create their own components.
User Interface
Visualforce uses the traditional model-view-controller (MVC) paradigm, with the option to use auto-generated controllers for database
Database
objects, providing simple and tight integration with the database. You can write your own controllers, or extensions to controllers, using Apex Code. Visualforce also provides AJAX components, and embeds the formula expression language for action, data and component
Security Web Sites
binding interaction. This article introduces Visualforce. It illustrates the major areas of functionality, provides an example of the MVC paradigm in action, shows
Mobile
how to include database integration, and demonstrates how to create your own components.
App Distribution
Visualforce in action
Newsletter
A developer creates Visualforce pages by composing components, HTML and optional styling elements on the Force.com platform. Each page is then accessible by a unique URL. When someone accesses a page, the server renders the page.
Release Information
How to Contribute Vini Student (vinishakthi05212011) My talk My preferences My watchlist My contributions Log out What links here Related changes Upload file Special pages Printable version
As the figure illustrates, pages are constructed on the server and depending on the logic behind the page may interact with the database, invoke external web service calls or both before returning the view to the client (browser). In fact: Visualforce pages can react differently to different client browsers such as those on a mobile or touch screen device Everything runs on the server, so no additional client-side callbacks are needed to render a complete view Optional server-side call outs can be made to any web service Let's see how this works in a little more detail.
RSS Feeds
Introducing Visualforce and the MVC model
Featured Content
This section provides a quick overview of a simple Visualforce page, followed by some aspects of the MVC model. A simple example
Blog
should give you a feel for Visualforce. Here's the code for a Visualforce page:
An Introduction to Visualforce - developer.force.com
Page 2 of 13
The page component wraps every Visualforce page, and its standardController attribute lets us make use of standard, automatically-generated, controller technology. The pageBlock, pageBlockButtons and pageBlockSection tags provide standard salesforce styling for a section in a page. The inputField generates an appropriate input element, depending on the type of the field, and the commandButton renders a button, which when pushed, invokes a method called save() on the controller. When you visit the page with your browser, the platform will render it, producing something like the following:
There are some important aspects to this page: The Account controller retrieved a record from the database based on the record Id found in the request, and made it available to the Visualforce page (automatically) The $User variable provides access to details of the currently logged-in user The {!account.name} expression retrieved the metadata associated with the name field of the Account object, rendered an appropriate input element and initialized with the value from the Account retrieved from the database. The label for the name field on Account is automatically displayed and the input is highlighted as required by virtue of the inputField component having been nested within a pageBlockSection. The save() method on the controller provides a means of persisting the object back to the database. Had there not been a record in the request, this same action would attempt an insert of the account information provided in the form. Any errors that occur in the submission of the form, either standard or custom, will be displayed by the pageMessages component.
The ease with which you can create powerful user interfaces, which are tightly bound with the metadata, database and controller layer, is a key aspect of Visualforce. The following sections examine much of the functionality behind Visualforce.
The Model, View, Controller paradigm Visualforce pages are rendered on the server, and displayed on a client, typically a web browser. As such, they have server-side access to data and logic. Modern platforms will separate the database, model and view out into separate layers. This gives you modularity, clear separation of concerns and containment—ultimately making your application easier to code and maintain. The following figure highlights the primary elements that comprise the capabilities of Visualforce as they pertain to the various layers of the MVC pattern illustrated in the following diagram.
In the figure: the model, or data structure, can be defined as either SObjects (the entity definitions for persisted data) or classes in Apex the view, or presentation layer, is comprised of Pages and components as described above. the controller, or logic layer, includes any custom controller logic written in Apex, or standard behavior generated by the Force.com platform for each business entity. The following figure shows the MVC layers in action with Visualforce:
Here you will see: The view, which is defined as our page defined above, containing the apex:inputField component The apex:inputField component is bound through the expression on its value attribute to the controller's get method on its account property The account property provides the view with the Account business entity object, the model in this example. From the above diagram, the Account Name field presented in the page was rendered by inclusion of the apex:inputField Visualforce component. The value was derived through that component's value attribute expression which calls into the controller layer for the get method on the controller's account property. Both the page and the controller are aware of the data structure and can interact with it directly, in this case the Account entity definition. As you can see the expression uses simple dot notation to refer to the name field on the specific account instance. For a full description of the database, and to Apex, the language used to code custom controllers, see An Introduction to the Force.com Database and An Introduction to Force.com Apex Code respectively. While the rest of this article may use both database and Apex functionality, it assumes you are familiar with the technologies.
Controllers and Extensions Controllers and extensions provide the logic interaction and behavior for an application. The Force.com platform provides standard controllers for all standard and custom business entities. These controllers provide access to standard platform behavior including saving, logic and navigation. In the example above, the standard controller for account was specified so standard action methods such as save can be bound to action supporting components, like apex:commandButton. This is the signature for the save action method in the standard controller: 1
public PageReference save() {}
Clicking the button will invoke the standard save process. Navigation is managed through the PageReference object that is returned from the method. Custom controllers, written in Apex, deliver the flexibility to define your own logic, navigation, algorithms, and database and web services interactivity. With the stateful programming model provided by Visualforce, custom controllers can maintain state between pages making development of wizards straightforward. Custom controllers can themselves leverage the standard controller. Assume that you have two database objects, Account and Contact. A simple controller class for a two step wizard that creates an Account and a related Contact might be defined as such: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
public class MyWizardController { public Account account { get; set; } public Contact contact { get; set; } public MyWizardController() { account = new Account(); contact = new Contact(); } public PageReference next() { return Page.step2; } public PageReference previous() { return Page.step1; } public PageReference save() { Database.insert(account); contact.accountId = account.id; ApexPages.StandardController contactController = new ApexPages.StandardController(contact); return contactController.save(); }
An Introduction to Visualforce - developer.force.com
25
Page 4 of 13
}
Note how Visualforce pages are first class citizens in the Apex language. In the above code, Page.step1 references a Visualforce page called step1, and if a button is bound to this action, the controller will redirect the user to the step1 page. Finally, extensions provide the ability to augment standard or custom controllers. With extensions you can extend data access, adding logic or conditional navigation to an existing controller. An extension class is defined by providing a constructor which takes the controller type being extended as its argument. The following class definition extends the standard controller: 1 2 3 4 5 6 7
public class AccountExtension { public Account account { get; set; } public AccountExtension(ApexPages.StandardController controller) { account = (Account) controller.getRecord(); } }
Adding this controller to the page requires a simple change to the page component tag: 1
Standard Components A Visualforce page can contain a mixture of HTML and Visualforce components. The HTML and component tags need to be well-formed, and all pages begin with the page component. For example, here is the most basic Visualforce page: 1 2
Each component has a set of optional and required attributes, which provide additional information to the component. For example, the following attribute removes the sidebar and top header in a Visualforce page: 1 2
The Component Reference document, linked to from the Visualforce page edit/creation screens in the online builder, documents each component and its attributes. The following subsections provide a small taster of some of these standard components.
Output Components There are varying degrees of granularity with standard output components, and at the fine end of the spectrum is
apex:outputPanel, which is a simple container that in the case of HTML rendering produces a div element: 1 2 3 4 5
Hello World!
And at the coarse end of the spectrum is apex:enhancedList. A simple reference like the following will produce the respective output: 1 2 3
Input Components When creating forms the most common input elements are covered by the generic types such as apex:inputCheckbox,
apex:selectList, and apex:inputText. However, when working with the Force.com database entity definitions do not overlook apex:inputField as it delivers field type awareness, requiredness, editability and formatting automatically based on the respective field definition. For example in the above example the apex:inputField component was used to create the input element for the account's Name field. To see the type awareness the addition of the standard Industry field on Account highlights the behavior: 01 02
An Introduction to Visualforce - developer.force.com
03 04 05 06 07 08 09 10 11 12 13 14
Page 5 of 13
Here: The name field is a basic text input element based on its type and is marked as required automatically according to the field's definition. The industry field is a picklist and all of its options are shown as defined on the field definition in setup.
AJAX Components Enhancing the level of interactivity for a given interface can be accomplished using combination of standard components that will keep a user in context until their task is complete. Using the account edit form and by making a couple of small changes we can show how this is done through the implementation of partial page updates. 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21
The rerender attribute on the commandButton changes the behavior from full to partial page and specifies what areas of the page will be updated on the response, in this case the apex:pageBlock component tags with the named identifiers. The status attribute on commandButton binds the operation indication to the identified apex:actionStatus component. The quickSave() method on the standard controller performs the same database operation as the save() method but returns the user to the same page rather than navigating away. The output of this page with an appropriate account Id in the request should look like this:
When the user changes a value and clicks on the "Save" button, the status will indicate the record is being updated:
An Introduction to Visualforce - developer.force.com
Page 6 of 13
When the update is complete the component identified by the rerender attribute value "out" will be updated to reflect the changes to the model.
Custom Components In addition to the standard components, Visualforce also includes the facility to create custom components. Custom Visualforce components are developed using a markup-based approach through composition of HTML or other Visualforce components (standard or custom). Custom components are referenced by name in a similar fashion to standard components with the difference being the namespace given to them. A page that includes a custom component might simply look like this: 1 2 3
With the definition of the component being simply: 1 2 3 4 5 6
The output within the page would look like this:
Custom components also support strongly typed attributes. Allowing the consumer of the component to specify the text rather than always seeing "Hello World!" would require a simple attribute definition and passing of the desired value: 1 2 3
With the added attribute component in the custom component definition: 1 2 3 4 5 6 7
The output within the page now looks like this:
Custom components can also have their own controllers, and attribute values can be passed into these controllers. Attributes support all primitives, Apex classes, and SObject definitions including arrays of each.
Using Visualforce Pages Visualforce pages can be incorporated into an application through multiple mechanisms. Here are five ways in which to include them: 1) As a type of tab:
Here, the tab called "My Visualforce Page" is generated by a Visualforce page. 2) Inline within a standard page layout:
An Introduction to Visualforce - developer.force.com
Page 7 of 13
In this scenario, Visualforce pages can be added to standard page layouts. 3) By overriding any of the standard buttons/links (actions)
Instead of having standard buttons access standard functionality and pages, you can override them to instead invoke your custom Visualforce pages. 4) As the target for a custom button or link
Custom links and buttons can be added to standard page layouts, letting you call in to your Visualforce pages. 5) As the target of any link based on the name of the page
An Introduction to Visualforce - developer.force.com
Page 8 of 13
As each Visualforce is addressable by a URL, you can simply link to the pages.
Developing Visualforce Pages There are multiple ways to edit Visualforce pages and its related types through the web browser, APIs and supported tools that use those APIs.
Web Browser The most convenient way to edit pages online is through Development Mode. Development mode provides an in-place editing experience for your page and controller. Once you enable it on your user record under setup you can create any page by asking for it and selecting the quick fix.
Clicking on the quickfix to create the page will navigate to the page including the editor:
Pages and components can also be edited from their respective nodes under setup:
APIs The primary Visualforce types are exposed in both the Metadata API as well as the standard Force.com Web Services API. The names of these types are: ApexPage ApexComponent StaticResource For more information, see the Documentation pages for these APIs.
An Introduction to Visualforce - developer.force.com
Page 9 of 13
Supported Tools You can also use supported implementations of the Metadata API to help develop, migrate and deploy Visualforce pages and applications containing these pages. For example: Force.com Migration Tool - a library for the Apache Ant scripting/build tool, that lets you deploy, migrate, and retrieve metadata, including Visualforce pages. The Force.com IDE - an integrated development environment (IDE) for developing Force.com applications. Here's a screenshot of the IDE in action:
Read An Introduction to the Force.com IDE for an introduction to the IDE.
Miscellanea Look and Feel Look and feel for pages can be managed using CSS by setting appropriate values for a given component's style or styleClass attribute. For example this CSS: 1 2 3 4 5
My Styled Panel
produces this output:
In addition, if you'd like to take over the entire experience you can remove the standard header, sidebar and all stylesheets by setting the appropriate attributes on the page component tag: 1 2 3 4 5
My Styled Panel
You can also provide a stylesheet wherein you can maintain your own CSS class names: 1 2 3 4 5 6
My Styled Panel
The $Resource global refers to a static resource, described in the following section.
Static Resources Traditional web development often consists of various resources which are static in nature. These include CSS stylesheets, images, flash movies, JavaScript libraries and more. Visualforce provides a convenient way to store and refer to these resources that takes advantage of browser caching to reduce the bandwidth footprint and improve performance of your pages. This was briefly introduced in the previous example for stylesheets. In that example the $Resource global is used to specify the static resource named 'styles' which in that case is a stylesheet that contains at least the 'border_red' class name. In addition to the various discrete types of resources, Static Resources also support
An Introduction to Visualforce - developer.force.com
Page 10 of 13
structured archive file formats such as zip. Using a structured archive it becomes possible to leverage many modern open JavaScript libraries and encapsulate your CSS styles that may include references to images. For example, a style sheet defined as follows and named styles.css can be included in a structured archive along with the referenced image: 1 2 3 4 5 6 7
Uploaded as a static resource named "styles" can be referenced as such in a page: 1 2 3 4 5 6
My Styled Panel
Here: The static resource itself is named styles and thus is referenced through the $Resource global variable. The URLFOR() function provides a mechanism to drill into the structure of the archive for the proper element, styles.css in this case The relative reference in the stylesheet for img/mybackground.png is maintained through the blowout of the structure as the archive contains the folder named "img" at it's root and the respective file within it . The resource and its referenced elements are cached by the browser at a versioned URL. The panel now appears styled with the background image as follows:
PDF Generation The default rendering for Visualforce pages is html but it is also possible to specify PDF as the rendering output for easily printing dynamic content. This rendering type is controlled through the renderAs attribute on page. The following simple page will be converted to PDF format on the server before being returned to the browser: 1 2 3
Hello PDF World!
This attribute supports expressions for dynamic determination of the rendering format.
Email Templates Email Templates also support Visualforce markup technology to create rich email messages.
Visualforce email templates are designated with the messaging:emailTemplate component tag. Additional email-specific components allow for specification of plain text and html bodies as well as attachments. Attachments support the PDF rendering as well. The following is a basic example of how the same multi-level object data can be provided in an email to be sent to a user: 01 02 03 04 05 06 07 08 09 10
An Introduction to Visualforce - developer.force.com
11 12 13 14 15 16 17
Page 11 of 13
Note that there: The standard controller behind this email template provides access to the recipient User and the related Account exactly like a Visualforce page would. The text body of the email is as specified within the messaging:plainTextEmailBody component tags The attachment component contains markup that will be attached as html or as PDF similar to the page mechanism
Mobile Visualforce Tabs as described above can also be flagged as "mobile ready" which makes them available for any mobile configuration.
Once added to a user's mobile configuration settings a capable mobile device with the salesforce.com mobile client will include this tab and when selected will launch a live browser connection to show the Visualforce page underlying the tab. For example, the following simple page will render the appropriate platform image depending upon the device type detected within the c:mobileSample component: 1 2 3
An Introduction to Visualforce - developer.force.com
Page 12 of 13
The markup for the c:mobileSample component simply displays an image stored within a static resource named
mobileImages, but determines which image to display at runtime based on the browser's reported user agent value as inspected in the component's controller 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15
public class mobileSampleCon { public String deviceType { get; set; } public MobileSampleCon() { String userAgent = ApexPages.currentPage().getHeaders().get('USER-AGENT'); if(userAgent.contains('iPhone')) deviceType = 'iPhone'; else if(userAgent.contains('BlackBerry')) deviceType = 'BlackBerry'; } }
Force.com Sites Force.com Sites is a technology that lets you create public websites and applications that run natively on the Force.com Platform. Force.com Sites harnesses Visualforce making it very easy to transform your current applications into public websites. A Site is created by determining a domain name, and the defining a set of Visualforce pages that will be made available at that domain name. For example, you could create your own site "mysite.force.com", and expose a Visualforce page "helloWorld" as the default page. When any visitor on the web then accesses the domain, they will see the output generated by the helloWorld Visualforce page. Force.com Sites also include other functionality, such as caching and automatic feed generation - but Visualforce lies at its heart. To learn more about Force.com Sites please see An Introduction to Force.com Sites.
Summary Visualforce is a powerful component-based user interface framework. While supporting the traditional model-view-controller design pattern, it also provides novel features that promote reuse (the component model), PDF generation, AJAX interactions and mobile rendering. Visualforce is also well integrated with the logic layer, Apex, which can be used to write custom controllers, and which also support Visualforce pages natively via the PageReference type. Visualforce can be utilized to extend the value of existing applications by creating highly interactive and efficient user experiences with many ways of being integrated within the standard Force.com application architecture as well as a solid foundation for the creation of entirely new applications. Visualforce is also used in other areas within the platform, such as in email templates and the Force.com Sites technology, which allows you to surface Visualforce pages to a public audience, effectively making it the primary technology for creating user interfaces for web applications on the Force.com platform.
References Developer Force provides access to free developer edition accounts, which you can use to start developing immediately. It also provides links to documentation, forums, and more. The Visualforce wiki page provides links to other Visualforce articles, videos and code samples. Visual Force Developer's Guide - The Product Documentation for Visualforce, providing a comprehensive description of the technology. An Introduction to the Force.com Database provides an introduction to the query language and persistence mechanisms provided by the Force.com platform. An Introduction to Apex provides a comprehensive introduction to the Apex language, providing a lot more detail on all topics covered in this document. An Introduction to Force.com Sites provides an introduction to the enabling technology for exposing Visualforce in public web sites.
About the Author Andrew Waite is the product manager for Visualforce. You'll find him on the developer blog as well as the discussion boards under the screen name mtbclimber.
