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). Salesforce.com has introduced the first on-demand platform called Force.com.
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 Force.com 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 Force.com, 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 Force.com, 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 Force.com, Apex classes, triggers, workflows, approvals, and validation rules are under this category.
The MVC Architecture
In the Force.com platform, we can develop Force.com 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.
Visualforce is a markup language similar to HTML. Visualforce pages run on the Force.com 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.
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 Force.com 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.
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 Force.com IDE: This IDE is used for creating and editing Visualforce pages, custom Visualforce components, static resources, and controllers.
The Eclipse plugin for Force.com: This is same as the Force.com 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 Force.com IDE.
