Visualforce Developer's guide

4.5 (2 reviews total)
By Chamil Madusanka
  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. Getting Started with Visualforce

About this book

Visualforce allows you to build sophisticated, custom user interfaces that can be hosted natively on the platform. Visualforce achieves this with the help of a tag-based language which is similar to HTML. This book aims to introduce you to Visualforce development tools to develop a better perspective towards UI development with Visualforce, and take your expertise in UI development to the next level.

"Visualforce Developer's Guide" is a hands-on guide aimed towards developing a custom UI interface. As you read through the content, you will notice that this book focuses on a single real-world example. This book builds upon this example to help you understand and use Visualforce development tools in your custom UI interfaces.

"Visualforce Developer's Guide" begins with an introduction to Visualforce to give you an understanding of the MVC model and the Visualforce architecture. Special emphasis is given to building a rich user interface by leveraging JavaScript, jQuery, CSS, and HTML with Visualforce. Through the course of the book, you will learn how to reuse the code with the help of custom components, and minimize the Visualforce and Apex code through Visualforce dynamic binding. The later sections of the book focus on building Visualforce pages for mobile devices. By the end of the book, you will learn the best practices and security tips for Apex and Visualforce development.

Publication date:
October 2013


Chapter 1. Getting Started with Visualforce

Cloud computing has made significant changes to the IT/software development industry. Cloud platforms are one of the important directions of cloud computing. Cloud platforms allow the developers to develop apps and run them on the Cloud, including platforms for building on-demand applications and platforms as services (PaaS). has introduced the first on-demand platform called

This chapter will introduce you to Visualforce. We will go through the MVC architecture and Visualforce. Furthermore, we will look at the architecture of Visualforce pages. We will define the advantages of Visualforce pages and will get an idea about Visualforce development tools.

This chapter covers the following topics:

  • The MVC model

  • Understanding Visualforce

  • Visualforce architecture

  • Advantages of Visualforce

  • Visualforce development tools

So let's get started and step into Visualforce.


The MVC model

The platform uses the Model View Controller (MVC) architectural pattern for developing an application. MVC splits the application development tools as follows:

  • Model: This defines the structure of the data. In, objects define the data model. Salesforce has designed the platform by mapping every entity to some object.

  • View: This defines how the data is represented. In, page layouts and Visualforce pages come under this category.

  • Controller: This defines the business logic. The rules and actions which manipulate the data controls the view. In, Apex classes, triggers, workflows, approvals, and validation rules are under this category.

    The MVC Architecture


Understanding Visualforce

In the platform, we can develop applications with custom objects and standard objects. Every object has a standard user interface with one or more page layouts. But we cannot use standard page layouts for sophisticated requirements. Here, Visualforce comes into play.

Visualforce is a web-based UI framework, which can be used for building sophisticated, attractive, and dynamic custom user interfaces. Visualforce allows the developer to use standard web development technologies such as jQuery, JavaScript, CSS, and HTML5. Therefore, we can build rich UIs for any app including mobile apps. We'll be discussing about Visualforce with standard web development technologies and Visualforce for mobile in more depth later. Similar to HTML, the Visualforce framework includes a tag-based markup language.

A Visualforce page has two major elements called Visualforce markup and Visualforce controller. Visualforce markup consists of Visualforce tags with the prefix apex:, and there can be HTML tags, JavaScript, or any other standard web development code. Visualforce controller consists of a set of instructions to manipulate data and schema with the user interaction. It controls the interface as well. A standard controller, which is created along with the object can be used as Visualforce controller. A standard controller has the same logic and functionality which is used in standard pages. But when we need to use a different logic or functionality, we can write our own Apex controller class, and we can also write extensions to standard controllers or custom controllers using the Apex language. AJAX components, expression language formula for actions, and component binding interactions are there in Visualforce.


The Visualforce architecture

Visualforce is a markup language similar to HTML. Visualforce pages run on the platform and it can integrate with standard web development technologies such as JavaScript, jQuery, and styling by CSS. It allows us to build more rich and animated UIs. Each page can be identified by a unique page name. Therefore a Visualforce page has a unique URL for accessing the page. A developer can create a Visualforce page by entering the page name in the address bar, as shown in the following screenshot:

Create a Visualforce page from a URL

After creating the page, we can access the page by using the same URL. The Visualforce markup has a special set of components which is similar to the tag library system of other markups. These components allow us to create complicated components with a single tag. These components are processed and rendered on servers and finally delivered to the client. This methodology has higher performance and enriched functionality when compared to the client-only methods. A Visualforce page runs on the platform shown in following diagram:

Execution flow while saving Visualforce on a server

The preceding digram illustrates that every time a developer saves a Visualforce page on a platform, the platform compiles the markup and related controllers. On successful compilation, markup is converted into an abstract set of instructions that can be understood by the Visualforce renderer. If there are any compilation errors, then it stops saving the page and returns the errors to the developer. If the saving attempt successfully finished, then the instructions are saved to the metadata repository and sent to the Visualforce renderer. The renderer converts the instructions into HTML, which can be understood by the browsers, and then refreshes the page as shown in the following diagram:

Execution flow of Visualforce page

The preceding diagram illustrates that when a non-developer user requests a Visualforce page, the application server retrieves the page from the metadata repository and then sends to the Visualforce renderer for HTML conversion. There is no compilation because the page has already been compiled into instructions during its development.


Advantages of Visualforce

The following are the advantages of Visualforce for a developer:

  • Model-View-Controller development style: Visualforce adheres to the MVC pattern by providing the View of the application in the platform. A View is defined by user interfaces and Visualforce markup. The Visualforce controller which can be associated with Visualforce markup takes care of the business logic. Therefore, the designer and the developer can work separately, while the designer focuses on user interface and the developer focuses on business logic.

  • User-friendly development: A developer (with an administrator profile) user can have a Visualforce editor pane at the bottom of every Visualforce page. This editor pane is controlled by the Development Mode option of the user record. This feature allows us to edit and see the resulting page at the same time and in the same window. This Visualforce editor has the code-saving feature with auto compilation and syntax highlighting.

  • A broad set of ready-to-serve Visualforce components: Visualforce has a set of standard components in several categories. There are output components, for example, <apex:outputPanel>, <apex:outputField>, <apex:outputText>, <apex:pageBlock>,and so on. There are input components, for example, <apex:inputFile>, <apex:inputField>, <apex:inputText>, <apex:selectList>, and so on. These input and output components have a feature called data-driven defaults. For an example, when we specify the <apex:inputField> component in a particular Visualforce page, the <apex:inputField> tag provides the edit interface for that field with data-type-related widgets (for example, the Date field has the calendar, and the e-mail/phone fields have their particular validations). There are also AJAX components, for example, <apex:actionStatus>. AJAX components allow the user to enhance the level of interactivity for a particular interface.

  • Tightly integrated with Salesforce / Extends with custom components: A Visualforce page can have a custom controller as well as a standard controller. A standard controller is created while creating the object and can be used for the Visualforce controller. A standard controller has the same logic and functionality which is used in standard pages. Visualforce pages adhere to these standardized methods and functionality. And we can also extend the standard components with custom components. For example, we can use an extension class for extending the standard controller of a particular Visualforce page. We can create our own Visualforce custom components instead of Visualforce in-built components for example, <apex:inputFile>, <apex:inputField>, <apex:outputField>, and so on. In the next two chapters we will discuss more about Visualforce controllers and Visualforce custom components.

  • Flexible and customizable with web technologies: The Visualforce markup is more flexible and more customizable through the use of web technologies, for example, JavaScript, CSS, jQuery, Flash, and so on because it is eventually rendered into HTML. A designer can use the Visualforce tags with these web technologies.


Visualforce development tools

We can edit and view Visualforce pages from the set-up area by navigating to Your Name | Setup | Develop | Pages.

But, that's not the best way to develop Visualforce pages. There are a few other ways to build Visualforce pages, which are as follows:

  • The Visualforce editor pane: This is discussed under the advantages of Visualforce.

  • The IDE: This IDE is used for creating and editing Visualforce pages, custom Visualforce components, static resources, and controllers.

  • The Eclipse plugin for This is same as the IDE, we can use it to create and edit Visualforce pages, custom Visualforce components, static resources, and controllers are some of the major features of the IDE.



In this chapter we became familiar with the MVC model and Visualforce. We saw the Visualforce architecture and the advantages of Visualforce, and also the various Visualforce development tools.

About the Author

  • Chamil Madusanka

    Chamil Madusanka is a developer. He has been working on projects since 2011. He works as a developer on many custom applications built on and has also trained end users and new Salesforce developers at his current company (attune Lanka (Pvt) Ltd.) and former company (Sabre Technologies (Pvt) Ltd). He has authored Visualforce Developer's Guide, Packt Publishing.

    Chamil won the Salesforce New Year Resolution 2013 challenge, which was rolled out by Salesforce. He is an active member of the community and contributes through various channels. He is passionate about and shares his knowledge of technologies through his blog ( He is a super-contributor on the discussion board and shares his knowledge and experience on by providing effective answers to developer questions. He is the initiator and organizer of the Sri Lanka Salesforce Platform Developer User Group. His contribution to the Sri Lanka Salesforce community has led to an increase in Salesforce competency in Sri Lanka.

    He completed his BSc in computer science from the University of Colombo, School of Computing, Sri Lanka (UCSC). His areas of interest include cloud computing, semantic web technologies, and Ontology-based systems. Hailing from Polonnaruwa, an ancient city in Sri Lanka, he currently resides in Gampaha in the Western province of Sri Lanka. His interests include reading technology books and technology blog posts, and playing cricket. Chamil can be reached via twitter at @chamilmadusanka, Skype at chamilmadusanka, and e-mail at [email protected].

    Browse publications by this author

Latest Reviews

(2 reviews total)
reading now - so far very good.
Book Title
Access this book, plus 7,500 other titles for FREE
Access now