01 VisualforcePages Slides

Force.
com (Visualforce)
Pages
Force.com
LY
N
O
www.salesforce.com/training
Copyright 2010 salesforce.com, inc.
SE
All rights reserved. Various trademarks held by their respective owners.
U
AL
N
R
TE
IN

All rights reserved.
Printed in the U.S.A.
This document contains proprietary information of salesforce.com, inc., it is provided under a license
agreement containing restrictions on use, duplication and disclosure and is also protected by copyright
law. Permission is granted to customers of salesforce.com, inc. to use and modify this document for their
internal business purposes only. Resale of this document or its contents is prohibited.
The information in this document is subject to change without notice. Should you find any problems or
errors, please log a case from the Support link on the Salesforce home page. Salesforce.com, inc. does
not warrant that this document is error- free.
"Salesforce.com" and the "no software" logo are registered trademarks of salesforce.com, inc. Other
names used may be marks of their respective owners.
Copyright 2010 salesforce.com, inc. All rights reserved. 1 Visualforce Pages

Safe Harbor Statement
This presentation may contain forward-looking statements that involve risks, uncertainties, and assumptions.
If any such uncertainties materialize or if any of the assumptions prove incorrect, the results of
salesforce.com, inc. could differ materially from the results expressed or implied by the forward-looking
statements we make. All statements other than statements of historical fact could be deemed forward-
lookingg statements, including:
g anyypprojections
j of earnings,
g revenues, or other financial items; anyy statements
regarding strategies or plans of management for future operations; any statements concerning new, planned,
or upgraded services or developments; statements about current or future economic conditions; and any
statements of belief.
The risks and uncertainties referred to above include but are not limited to risks associated with our new
business model; our past operating losses; possible fluctuations in our operating results and rate of growth;
interruptions or delays in our Web hosting; breach of our security measures; the immature market in which
we operate; our relatively limited operating history; our ability to expand, retain, and motivate our employees
and manage our growth; risks associated with new releases of our service; and risks associated with selling
to larger enterprise customers. Further information on potential factors that could affect the financial results
LY
of salesforce.com, inc. are included in our registration statement (on Form S-1) and in other filings with the
S iti and
Securities d Exchange
E h C i i
Commission. Th
These d
documents t are available
il bl on th
the SEC Fili ti off th
Filings section the
salesforce.com website.
N
Salesforce.com, inc. assumes no obligation and does not intend to update these forward-looking statements.
Any unreleased services or features referenced in this or other press releases or public statements are not
O
currently available and may not be delivered on time or at all. Customers who purchase our services should
make the purchase decisions based upon features that are currently available.
SE
Copyright 2010 salesforce.com, inc. 3
U
AL
N
Course Objectives
R
By the end of this course, you will be able to:

TE
Understand the Visualforce framework, including its

g and capabilities.
advantages p
Understand the major standard tags and apply them to creating
IN
Visualforce pages.
Create custom pages that mimic the standard Salesforce
presentation style using standard tags while altering the
content presented.
Use the expression syntax to bind data and actions on a page
t a controller.
to t ll

Course Objectives (cont.)
Understand the benefits of using static resources and use them

in pages.
Construct p
partial p g refreshes using
page g AJAX with Visualforce
tags.
Create simple custom components.
Understand the concepts behind controllers, including their
functionality and capabilities.
LY
N
O
SE
U
AL
N
Course Agenda
R
Introduction to Visualforce
TE
Visualforce Components
Basic Page Components
IN
Form and Output Components

Visualforce Components for Modularity
JavaScript in Visualforce
Introduction to Visualforce (Apex) Controllers
Further Topics in Visualforce
Visualforce Appendix

Assumptions
You have basic HTML or XML skills.

You have an understanding of Force.com at the administrator level.
You are ready to learn!
LY
N
O
SE
U
AL
N
Module 1:
R
Introduction to
TE
Visualforce
IN
Visualforce Pages
Various trademarks held by their respective owners.

Application Building Blocks
Applications
Force.com Pages
Tabs User
Interface
Web Controls
Page Layouts
Sites
Record Types
Workflow Force.com Page Controllers

Business
Validation Rules Logic
Force.com Code
Approval Processes Web Services API
Objects
Data Web Services API
LY
Fields Model Metadata API
R l ti hi
Relationships
N
Declarative Programmatic
O
Simplicity + Speed SE Control + Flexibility
U
AL
N
Module Objectives
R
By the end of this module, you will be able to:

TE
Describe the Visualforce framework, including its advantages

p
and capabilities and how it fits into the Force.com p
platform.
Apply the model-view-controller pattern to Salesforce and
IN
understand its advantages.

Identify the different parts of the Visualforce framework and
when to use each.
Describe how to incorporate Visualforce pages into Salesforce.

Module Agenda
Visualforce Overview
Visualforce Basics
LY
N
O
SE
U
AL
N
Create Any Application and Interface for Any Device

R
TE
IN
Any application
Any user interface
Any device

Two Types of Force.com User Interface Technologies
UI generated
UI generated automatically, by developer/
no technical skills required technologist
Limited/no
Full control of
control of UI
UI behavior
behavior
LY
Li it d control
Limited t l over
look and feel, but all Full pixel level
N
UIs are consistent control over UI
O
Page Builder SE
U
AL
N
Visualforce
R
Visualforce was officially released as part of the Summer 08 release.

TE
It allows developers to completely replace the standard page layouts

p y custom p
within the Salesforce UI with completely pages.
g
It uses Apex to incorporate advanced business logic functionality.
IN

Visualforce Inline Editor
Visualforce offers a user-friendly, split-screen development environment.
Simply click Save to

immediately test your
code!
The inline editor also
includes auto-
completion and limited
syntax highlighting, as
well as online
documentation.
LY
Access to the inline
editor is available only
in Development Mode.
N
Visualforce pages can
also be edited through
O
the Force.com IDE.
SE
U
AL
N
Visualforce Content
R
Visualforce pages are ultimately rendered into markup.

TE
This means that developers can include:

Visualforce tags
tags.
IN
Force.com expressions.
HTML.
JavaScript.
Flash.
Any other code that can execute within an HTML page on Force
Force.com.
com
Visualforce pages can have up to 1 MB of content and can bring back
up to 15 MB.

Visualforce Component Rendering
Each Visualforce component tag generates markup or other Web-

enabled code behind the scenes to create the page.
The simplest example of this is the image component.
This: <apex:image id="theImage" value="/img/myimage.gif"
width="220" height="55"/>
Becomes this: <img id="theImage" src="/img/myimage.gif"
width="220" height="55"/>
In most other examples, the component generates much more code
LY
and simplifies
p development.
p
To view the resulting code from any Visualforce page, right-click the
N
page and select View Source.
O
SE
U
AL
N
View State
R
view state: the space in server memory where the information

TE
necessary to maintain the state of the database between

requests is saved.
IN
View state is important when maintaining state across multiple pages.

View state inspector shows components contributing to view state.
Must be enabled on user profile.
Only displayed when using <apex:form>.

Visualforce Benefits
Visualforce understands Salesforce metadata and provides access to the

respective user interface elements.
For example, it automatically adds a calendar picker date entry fields.
It is hosted by Salesforce and tightly coupled with the Force.com platform.
Because of this, Visualforce pages display the same performance as
standard Salesforce pages.
Many Visualforce components automatically re-create the standard Salesforce
look and feel.
LY
Visualforce pages are automatically upgraded to the next Salesforce release.
Visualforce separates the view of information from the navigation control and
N
the data model.
It conforms to the Model-View-Controller development pattern.
O
SE
U
AL
N
First, a Primer on Model-View-Controller

R
Business data and the rules for

TE
how to use the data

IN
Model
State State
Query Change
Change
Notification
View
Selection
View Controller
User Manages the
interface User interactions
Gestures
details between view
& model

MVC Example: Opportunities Tab
Model Opportunity object (master)

Opportunity Product object (detail) Overview
View
Vie Opportunity overview page
Opportunity list views page
Opportunity detail page
Opportunity edit page List View
Opportunity Product detail page
Opportunity Product multi-line edit page
Controller Tab navigation overview page

Overview list view picker list view page Detail Page
LY
View links detail p
page
g
New button edit page
Edit buttons & links edit page
N
Save button save action
Delete buttons & links delete action Edit Page
O
SE
U
AL
N
MVC Example: Opportunities View (Page Layout)

R
TE
Detail / Edit
Page
IN
Hard-wired representation
of data model
Detail sections (parent)
Related lists (children)
Limited layout options
1 or 2 column
l d
details
t il
Related lists at bottom
Detail & edit page share
1 layout

MVC Example: Opportunity Controller Actions
View link
Delete
action
Cl
Clone
View
action
link
Overview List View Detail Page
List
View
picker
Edit
LY
button
Edit Page
Save
S
action
N
O
New button
SE
U
AL
N
Visualforce: Model/View/Controller Pattern

R
Model
Model View Controller
TE
What schema and data How is the user How are the user
does the app use? interface and data interface actions and
presented? logic represented?
IN
Standard &
Standard &
Pages Custom
Custom Objects
Controllers
Controller
Components
Extensions
Visualforce shares the Visualforce pages are Controllers contain Apex

same data as the rest of just like HTML/Web that defines how pages
the platform; objects can pages; components are interact with each other,
have both Visualforce reusable UI building and the rest of the
and standard UIs. blocks. platform.

Module Agenda
Visualforce Overview
Visualforce Basics
LY
N
O
SE
U
AL
N
Visualforce Pages Pages

R
A canvas similar to standard

TE
Web development model

Composed
p of HTML, ppage
g
tags, and merge fields
IN
Ability to reference any CSS,

Flex, Flash, AJAX, or other
Web technology
Supports standard query
strings for parameters,
referenced via
<apex:repeat value="{!Posts}" /apex/pageName URL syntax
var="post">
Composed on the server, not
<a class="title"
href="/apex/blogedit?id={!post.Id}" the client
target="_top">{!post.Name}</a>
{!post.Post__c}<p>

Visualforce Components Components
Create complex standard UI

elements, such as detail areas
and related lists, with a single
tag
Built-in data binding to
Salesforce data
Special UI elements to handle
common design solutions, such
as templates and data iterations
LY
Built-in AJAX functionalityy
supporting partial page refresh
N
Over 65 components at GA
Accessed through <apex:tag>
O
SE syntax

U
AL
N
Visualforce Component Close-up Components

R
Visualforce
TE
component
tag
<apex:pageBlockSection title="Contact Information">
<apex:inputField value="{!contact.firstname}"/>
IN
<apex:inputField value="{!contact.salutation}"/>
<apex:inputField value="{!contact.lastname}"/>
</apex:pageBlockSection>
data
binding
expression

Visualforce Controllers Controllers
Controllers contain the logic

and data references a page
uses.
Because they are created in
Apex, they have full access
to Apex functionality (API,
Web Services, etc.).
Pages interact with
controllers through
LY
components that call data or
actions.
Controller can be used to
N
maintain state across page
O
interactions (in wizards, for
example).
SE
U
AL
N
Visualforce Standard Controllers Controllers

R
Standard Controllers:
TE
Are available for all API entities/objects, such as Account, Contact,

pp y etc., as well as custom objects.
Opportunity, j
Provide access to standard Salesforce data and behavior.
IN
Standard object record data

Standard actions like save, edit, delete
Are referenced by using:
<apex:page standardController=Contact>

Visualforce Custom Controllers Controllers
Custom Controllers:
Are coded to create custom behaviors or non-standard data sets.
Can be used to create wizards or leverage callouts
callouts.
Are invoked by using:
<apex:page controller=MyController>
LY
N
O
SE
U
AL
N
Visualforce Controller Extensions Controllers

R
Controller Extensions:
TE
Add custom behavior or additional data to controllers.

Are invoked by using: <apex:page
IN
standardController=Contact extensions=MyClass,
MyOtherClass>

Expressions and Data Binding
Visualforce uses the expression syntax (also found in merge fields and
formulas) to bind components to Salesforce data and actions in the
pages controller.
All content in {!...} will be evaluated as an expression.
{!$User.FirstName} shows the current users first name in a page.
Data context is provided to controllers by the ID parameter, just as in
standard pages.
https://na1.salesforce.com/myPage?id=001000000007Erj
LY
N
O
SE
U
AL
N
Versioning
R
Visualforce pages and components are versioned.

TE
Previous versions of Visualforce elements remain available after new

implementations
p are introduced, ensuring
g that yyour code works with
each new release.
IN
The version settings tab displays the version of each page or

component.

Visualforce Namespaces
Standard tags begin with the word apex.

Example: <apex:page>
Apex is the namespace
Custom tags begin with the letter c.

Example: <c:customtag>
c is the namespace
Application developers can register custom namespaces to be
LY
p y with custom tags
displayed g instead of the letter c.
Example:<thirdpartycompany:customtag>
N
thirdpartycompany is the namespace
O
SE
U
AL
N
Incorporating Visualforce Pages

R
Visualforce pages can be incorporated into your Salesforce UI by:

TE
Creating links to reference the unique page URL.

Overriding standard buttons to route to the new page
page.
IN
Overriding tab overview pages to use the new page.

Creating custom tabs for the new page.
Creating custom buttons and links to route to the new page.
Embedding pages into page layouts.
Adding pages to a dashboard.
Using pages as custom help for a custom object.

Standard vs. Custom
BEHAVIOR
Standard Custom
EL
LOOK AND FEE
Standard application framework and page layouts and custom

default UI (page layouts) Apex classes
Custom Visualforce pages using Visualforce pages with

standard controllers custom Apex controllers
LY
N
O
SE
U
AL
N
Exercise 1-1: Creating a Visualforce Hello World

R
Goal:
45 min.
TE
Create a simple Visualforce page.

Scenario:
Universal Containers wants to get started using Visualforce
IN
and needs to understand the very basics of how to develop

new pages.
Tasks:
Enable Development Mode.
Create a simple new page.
Update
U d the
h page to iinclude
l d the
h user name.
Update the page to display Position detail information.
Update the page to remove unwanted related lists.
Update the page to create a form to edit position data.

Module Review
1. What kind of content can be included in a Visualforce page?

2. What is the MVC pattern and how does it relate to
Visualforce?
3. What do {!expressions} refer to when used in
Visualforce components?
4. What are the ways that Visualforce pages can be
incorporated into the rest of your user interface?
5. Is it always necessary to know Apex to create Visualforce
LY
pages? When does it become necessary?
N
O
SE
U
AL
N
Module 2:
R
Visualforce
TE
Components
C p
IN
Visualforce Pages
41

Module Objectives

Understand basic tag syntax and identify errors in sample
p g
pages.
State the commonalities between Visualforce and other
tag/web languages.
Construct expressions to include Salesforce data into
Visualforce pages.
LY
N
O
SE
U
AL
N
Module Agenda
R
Components
TE
Component Bindings
IN

Components
Visualforce includes a tag library similar to HTML and XML markup

languages.
You can include text directlyy into the Visualforce page.
p g
You can use HTML tags within a Visualforce page, including:
HTML comment tags. 
Formatting tags.
You can use JavaScript within a Visualforce page as well, but you will
often find it easier to use the equivalent Visualforce tags.
LY
Note: You cannot use JavaScript line commenting except within <script>
tags.
N
O
SE
U
AL
N
Components and Well-Formed XML

R
Like XML, Visualforce must be well-formed. At a high level this means:

TE
Every Visualforce start tag <tagName> must have a matching end tag
</tagName> or be a self contained tag <tagName/>.
Tags are hierarchical and must be closed in the reverse order they
IN
were opened.
<tagName1>
<tagName2>
</tagName2>
</tagName1>

Components
Visualforce components (tags) all begin with the apex: prefix.

All pages must be enclosed by a set of <apex:page> tags.
Tags may contain attributes that have values (in quotes) to help further
define them.
Attribute values are typed to be strings, collections, IDs, etc.
For a full list of tags and attributes, check the documentation.
LY
N
O
SE
U
AL
N
Components Example
R
TE
component
namespace component tag attribute
name attribute value comment
start tag
IN
<apex:page title=myPage>
<!- This is a comment -->
Visualforce //This is not. This is just text
component (tag) <h1>Congratulations</h1> <p/>
This is your new Page: myNewPage
</apex:page>
/
end tag self-contained tag

Module Agenda
Components
Component Bindings
LY
N
O
SE
U
AL
N
Component Bindings
R
Bindings are ways to relate Visualforce components with either the

TE
page controller or other page components.

There are p
primarily
y three types
yp of bindings
g for Visualforce components.
p
IN
Data bindings: using the expression syntax to pull in data from the
data set made available by the page controller.
Action bindings: using the expression syntax to call action methods
for functions coded in the page controller.
Component bindings: using component attribute values to reference
other components IDs.
These other components must have set a value for the id attribute.

Tag Data Binding
Visualforce
component
tag
<apex:pageBlockSection title="Contact Information">
<apex:inputField value="{!contact.firstname}"/>
<apex:inputField value="{!contact.salutation}"/>
<apex:inputField value="{!contact.lastname}"/>
</apex:pageBlockSection>
data
binding
expression
LY
N
O
SE
U
AL
N
API Naming Syntax

R
Before discussing data binding in greater detail, it is important that you

TE
understand the API naming syntax.

This information is available as a separate
p resource and should have
been completed before coming to class.
IN
Tags refer to objects and fields by their API names.

Custom objects and fields use the __c suffix.
Custom objects referenced through relationships use dot notation
and the __r suffix.

Expression Syntax
Tags use the same expression syntax as formula fields and other areas of the
application.
Dynamic object data can be inserted using the
{! bj tN
{!objectName.propertyName}
t N } syntax.
t
Global data can be inserted with the added $ syntax, such as:
{!$User.fieldName}
{!$Page.otherVisualforcePage}
{!$Component.otherVisualforceComponent}
LY
Note that you can also access custom labels and translations using the
variable
$Label variable.
Local variables can be created to stand in for these expressions, as they can
N
become long and unwieldy using the <apex:variable> tag.
Bindings can reference custom Apex class types as well as their inner classes
O
using dot notation. SE
U
AL
N
Component Data Binding Examples

R
1 <apex:page standardController="Account">
TE
2 <apex:pageBlock title="Hello {!$User.FirstName}!">

3 You are viewing the {!account.name} account.
4 </apex:pageBlock>
5 <apex:pageBlock title="Contacts">
IN
6 <apex:pageBlockTable value="{!account.Contacts}" var="contact">

7 <apex:column value="{!contact.Name}"/>
8 <apex:column value="{!contact.MailingCity}"/>
9 <apex:column value="{!contact.Phone}"/>
10 </apex:pageBlockTable>
11 </apex:pageBlock>
12 </apex:page>

Action Binding
Data binding works because the page can access the data made
available through the controller.
In a similar manner, actions that are available through
g the controller can
be called using the same expression syntax. These can be:
Standard actions, such as save and edit.
Custom actions that provide custom functionality.
More on this later in the discussion about controllers. Note that at
this point, only actions that are the shared across all objects are
LY
exposed through standard controllers.
N
O
SE
U
AL
N
Component Binding via Component IDs

R
All Visualforce tags have an optional ID attribute that can be used to

TE
refer to the tag component.

This ID is used as the document model access (DOM) ID when the
IN
page is rendered.
The tag can be referenced by the ID by other tags, JavaScript, or
other Web-enabled languages.
Salesforce recommends using unique IDs within each page.
If not unique, you may need to specify the hierarchy of IDs to locate
the correct component
component.
The hierarchy prevents the possibility of duplicate IDs on HTML
elements generated by components.
However, raw HTML could produce dupes.

Component Binding via Component IDs (cont.)
Example:
1 <apex:page id="thePage">
2 
4 <script>
5 function changeFont(input, textid) {
6 if(input.checked) document.getElementById(textid).style.fontWeight =
7 "bold";
8 else document.getElementById(textid).style.fontWeight = "normal";
9 }
10 </script>
11 
13 <apex:outputPanel layout="block">
14 <label for="checkbox">Click this box to change text font: </label>
LY
15 <input id="checkbox" type="checkbox"
onclick="changeFont(this
onclick= changeFont(this,'{!$Component thePanel}');"/>
{!$Component.thePanel} ); />
16 </apex:outputPanel>
17 
N
18 <apex:outputPanel id="thePanel" layout="block">Change me!
20 </apex:page>
O
SE
U
AL
N
Exercise 2-1: Generating a PDF from Visualforce

R
Goal:
15 min.
TE
Create a printable PDF using Visualforce.

Scenario:
IN
Universal Containers wants to create a PDF for offer letters to

merge relevant candidate and position data into an offer
template.
Tasks:
Add the pre-existing Visualforce page to your org.
Create the custom button
button.
Add the custom button to the page layout.
Test the button.

Module Review
1. What similarities does Visualforce have to XML? HTML?

2. How can you tell a Visualforce component from another type
g
of tag?
3. What are attributes? What is the syntax for including them?
4. What are three types of bindings used in Visualforce? What
does each refer to?
LY
N
O
SE
U
AL
N
Module 3: Basic
R
TE
Page Components
IN
Visualforce Pages
59

Module Objectives

List key tags and define what their attributes control.
Create Visualforce pages that use these tags to create page
layouts.
LY
N
O
SE
U
AL
N
Module Agenda
R
Core Components
TE
Default Look and Feel Components

IN

Layout Components
This group of components provides overall structure to the

page or provides templates or frames to insert other content.
For the most p
part, they
y do not bind directly
y to Salesforce data,
but are focused more on containers and areas where to put
those data-bound components.
LY
N
O
SE
U
AL
N
<apex:page>
R
TE
IN
<apex:page>

<apex:page> (cont.)
This represents a single Visualforce page.

All pages must be surrounded by an <apex:page> tag set.
This includes p
pages
g used within other p
page
g layouts.
y
Attributes include:
standardController or controller (String): Salesforce object used to
control behavior. Standard controllers can also use the extensions
attribute to extend behaviors.
title (String): title displayed on the page.
tabStyle (String): Salesforce object used to copy the color and style for this
LY
page
page.
sidebar (Boolean): whether the sidebar should be used (default=true).
N
action (Action method): invokes an action method on the controller to be
O
run when the page is first requested.
renderAs (String): a supported content converter (currently only pdf).
SE
U
AL
N
<apex:variable/>
R
This tag provides a local variable that can be used to replace an

TE
expression to reduce long and repetitive text.

Manyy other tags,
g especially
p y iteration tags,
g also have variable attributes
built in.
IN
Attributes include:
value (Object): an expression that can be represented by the new
variable.
var (String): the name of the new variable.

Static Resources
Static resources are a new kind of Salesforce storage, designed for use
with Visualforce.
Static resources are items required by your Visualforce pages, such as
archi es images
archives, images, st
style
le sheets
sheets, Ja
JavaScript
aScript ffunctions,
nctions PDFs
PDFs, etc
etc.
These resources can be referenced using the $Resource global
variable.
They can be a collection of related files into a directory hierarchy
(.zip, .jar).
This is the recommended method over uploading these files to the
LY
Document tab, as these resources can be cached for better
performance
performance.
Upload files via Your Name | Setup | Develop | Static Resources.
N
There is a 5 MB limit per file and a 250 MB overall limit for static
O
resources.
SE
U
AL
N
Static Resources Components

R
The following tags can all be used to include other HTML-renderable

TE
technologies into your page.

<apex:flash>
IN
<apex:image>
<apex:stylesheet>
These can be stored in the Static Resources object or elsewhere on
the Internet.

Redirect to Static Resources
You can also use the action attribute on the page component to
redirect to a static resource, such as a custom help PDF file:
action={!URLFOR($Resource.filename)}>
1 <apex:page sidebar=false showHeader=false standardStylesheets=false
action={!URLFOR($Resource.filename)}>
2 </apex:page>
LY
N
O
SE
U
AL
N
Style Sheets
R
Use the <apex:stylesheet> tag to add additional styles to a page.

TE
All tags that produce HTML have pass-through style and

styleClass attributes to allow you to use your style with any visual
component.
IN
Salesforce style sheets are located in the /dCSS/ directory of your

Salesforce instance.
dStandard.css: contains most style definitions for standard
objects/tabs.
/sCSS/12.0/Theme2/allCustom.css: contains style definitions
f custom
for t objects/tabs.
bj t /t b
Note: Visualforce is not designed to be a way to full re-brand a
standard Salesforce application!

Module Agenda
Core Components
Default Look and Feel Components
LY
N
O
SE
U
AL
N
<apex:pageBlock>
R
There are a series of pageBlock tags that help build out pages and use
TE
the Salesforce style sheet by default.

<apex:pageBlockButtons>
IN
<apex:sectionHeader>
<apex:pageBlockSection>
<apex:pageBlock>
<apex:pageBlockSectionItem>

<apex:pageBlock>
This tag creates an area of a page that is similar to a detail page but
with no default content.
Attributes include:
mode (String): either detail or edit mode. Edit mode does not
show field lines. (detail)
title (String): title displayed on the page block.
tabStyle (String): Salesforce object used to copy the color and
style for this page block.
LY
The pageBlock tags can include facet tags, which are child tags that
are often used to add or override headers and footers to areas or
N
tables.
O
SE
U
AL
N
<apex:pageBlockButtons>
R
This tag creates a set of buttons that are styled like standard
TE
Salesforce buttons.
The individual buttons are created using the commandButton tag.
Attributes include:
IN
location (String): either top, bottom, or both. (both)

<apex:pageBlockSection>
This tag must be used within a pageBlock component to create a

section with one or more columns.
Each column has two cells: one for the label and one for the value.
Add items to cells with the inputField or outputField
components.
Or you can use pageBlockSectionItem components for items not
based directly on Salesforce object fields.
Attributes include:
collapsible (Boolean): if the section can collapse. (true)
LY
columns (Integer): number of columns
columns, each with two cells
cells. (2)
N
O
SE
U
AL
N
<apex:pageBlockSectionItem>
R
This tag must be used within a pageBlockSection component to

TE
create a pair of cells as an item in a column, instead of using

inputField or other tags that automatically create name/value data
pairs.
IN
Each column has two cells: one for the label and one for the value.
These can be added with outputLabel tags and inputText or other UI
widget components.
If you need to bundle more than one item per cell, wrap them in an
<apex:outputPanel> component.

<apex:sectionHeader>
This tag creates the standard header bar displayed under the tabs in
the Salesforce UI.
Attributes include:
title (String): the text displayed at the top of the bar.
subtitle (String): the text displayed under the title.
help (String): the URL for the pages help file. The link appears on
the right.
LY
N
O
SE
U
AL
N
Other UI Features
R
There are a variety of other tags that can be used to create standard Web
TE
features, such as:

<apex:toolbar> & <apex:toolbarGroup>
IN
Create a toolbar with clickable items

Cluster related items together using groups
<apex:tabPanel> & <apex:tab>

Create a panel of tabs with different content
Functions similarly to tabs in Salesforce, but content for all tabs is loaded
when the page is loaded

Other UI Features (cont.)
<apex:panelBar> & <apex:panelBarItem>

Create panels that can expand and collapse when a user clicks the
solid p
panel bar.
Opening another panel bar item closes any items that were previously
open.
LY
<apex:panelGrid> & <apex:panelGroup>
Place items into an HTML grid.
N
Use groups to place multiple items in the same cell.
O
Does not process a set of data with an iteration variable.
SE
U
AL
N
Exercise 3-1: Re-creating a Salesforce Detail Page

R
Goal:
10 min.
TE
Create a Visualforce page that mimics the Positions detail

p g
page.
IN
Scenario:
Universal Containers wants to get a basic understanding for
Visualforce components by seeing what it would take to re-
create a detail page bit by bit. In particular, the company needs
help with the layout components for the page.
Tasks:
Add the pre-existing Visualforce page to your org and test it
with an existing position.

Coarse Metadata Components
These tags provide a large amount of generated code for surprisingly

little work to create familiar Salesforce structures.
detail
relatedList
listViews
enhancedList
They do not allow for much customization to the generated areas.
LY
Although,
g , it is possible
p to build up
p identical sections using
g finer
metadata and layout components.
N
O
SE
U
AL
N
<apex:detail/>
R
This single tag creates the standard detail page layout for this object.
TE
Attributes include:
subject (String): the ID of the record that should provide the data
IN
for the detail component.

relatedList (Boolean): if the standard related lists should be
included on the page. (true)
relatedListHover (Boolean): if the standard hover links are
included. (true)

<apex:relatedList/>
This single tag creates just the related list for records related to a
parent record.
Attributes include:
list (String): the name of the child relationship from which to return
the records.
subject (String): the ID of the record that should provide the data
for the related list.
pageSize (Integer): the number of records to display by default. (5)
LY
N
O
SE
U
AL
N
<apex:listViews/>
R
This single tag creates the list view picklist for an object, usually
TE
displayed on the main tab for an object.

Attributes include:
IN
type (String): the object for which list views are displayed.

<apex:enhancedList>
The enhancedList is similar to listViews, but provides more

flexibility by providing additional components, such as:
customizable (by the current user)
height
rowsPerPage
width
LY
N
O
SE
U
AL
N
Chatter tags
R
Incorporate Chatter into Visualforce pages using:

TE
The showChatter attribute of the <apex:detail> tag

<chatter:feed> includes the chatter feed on a record
IN
<chatter:followers> includes the Chatter followers on a record

<chatter:feedWithFollowers> includes the Chatter feed,
followers, and the Show/Hide Chatter button
<chatter:follow> adds a button that allows users to follow
records

<apex:repeat>
This tag simply iterates over the data of a collection for a structure that
you specify.
It is typically
yp y used if one of the other iteration components
p does not
meet the requirements.
Attributes include:
value (Object): references the collection of data.
rows (Integer): the number of items in the collection that are
rendered. (0 = all rows)
LY
N
O
SE
U
AL
Message Components
N
R
The <apex:message/> tag passes warning or error messages for a specific

TE
component into the Visualforce page.

The plural version, <apex:messages/>, is for all messages generated for all
components on the current page
page.
IN
There are also pagemessage and pagemessages tags that use the standard
Salesforce style.
Use this tag to display messages, such as validation errors, to users that are
usually available through the standard Salesforce UI.
Attributes include:
for (String): ID of the component with which the label should be associated.
title (String): the text displayed next to the output link.
style (String): the style used to display the component.
tooltip (Boolean): specifies whether the detail portion of the message is displayed
as a tooltip. (false)

Module Review
1. How many controllers can a page have? Where is the

controller for a page assigned?
y
2. There are a series of layout p
components p re-
that all help
create the traditional Salesforce page layout style very easily.
What name do they share?
3. What are the names of the coarse metadata tags?
4. What are static resources?
LY
N
O
SE
U
AL
N
Module 4: Form and

R
TE
Output Components
IN
Visualforce Pages
89

Module Objectives

Create Visualforce pages that use these tags to create page
output tables and lists.
LY
N
O
SE
U
AL
N
Module Agenda
R
Form Components
TE
Output, Table and List Components

IN

<apex:form>
This tag enables a section of a Visualforce page to allow users to enter

data and submit it with commandButton or commandLink.
Attributes include:
accept (String): a comma-separated list of content types that this
form can handle; values can include text/html, image/png,
video/mpeg, text/css, audio/basic, and more.
title (String): title displayed on the form.
target (String): name of the frame that displays the response after
LY
the form is submitted; possible values include _blank,
blank _parent,
parent
_self, and _top.
N
O
SE
U
AL
N
<apex:inputField>
R
This tags corresponds to a Salesforce object field and respects the

TE
attributes of that field.

The associated UI widget
g is automatically
y used (calendars
( for date
fields, etc.).
IN
The outputField version makes the field value read-only.

When used within a pageBlockSection, the label is automatically
displayed, as well.
Attributes include:
required (Boolean): specifies if field is required on this page.
(false)
value (Object): merge field that references Salesforce field in the
form of {!object.field}.

<apex:inputWidget>
These tags provide input widgets for data that does not correspond to a
Salesforce object field to be used with pageBlockSectionItem tags.
These include:
<apex:inputCheckbox>
<apex:inputHidden> (useful for passing variables between
pages)
<apex:inputSecret> (for masked data, such as passwords)
<apex:inputText>
LY
<apex:inputTextarea> (includes an attribute to specify saving
the text as plain text or rich text)
N
O
SE
U
AL
<apex:inputWidget> (cont.)
N
R
In general, these tags include attributes that give you ways to:
TE
Vary the size of the data and the widgets.

Make the inputs required.
required
IN
Control the tabbing sequence and keyboard shortcuts.

Bind the data to custom controllers.
Handle standard JavaScript events.

<apex:selectWidget> Components
These are a series of additional tags to support the display of UI

widgets in organized tables.
These include:
<apex:selectCheckboxes>
<apex:selectList>
<apex:selectRadio>
These use <apex:selectOption> and <apex:selectOptions>
to create option lists for the other selection tags.
LY
These work with the Apex SelectOption object to specify the values
in custom controllers.
N
O
SE
U
AL
N
<apex:inputFile>
R
This tag allows users to upload files and turn them into:
TE
Attachments on records.
Documents.
Documents
IN
Apex Blobs.
Attributes include:
accept (String): a comma-separated list of file types accepted
for upload.
contentType (String): the uploaded files content type.
fileName (String):
(St i ) ththe name off th
the uploaded
l d d fil
file.

<apex:commandButton> & <apex:commandLink>
These tags create buttons and links that allow the users to navigate
and take actions.
These tags must be used within a form tag.
Attributes include:
action (Action Method): references through merge-field syntax a
method on the controller. Standard controllers support {!save},
{!edit}, and {!delete}.
Buttons for standard controllers are not rendered for users that do
LY
not have the appropriate permissions.
value (String): text displayed on the button or link.
The <apex:param> tag can be used to dynamically add URL
N
parameters to a link.
O
SE
U
AL
N
Module Agenda
R
Form Components
TE
Output, Table and List Components

IN

Output Components
These tags all deal with displaying information without

allowing the user to change any data.
Manyy output
p components
p have parallel
p input
p components,
p
such as inputField and outputField.
LY
N
O
SE
U
AL
N
<apex:outputLabel>
R
This tag creates a label for input or output widgets that do not
TE
automatically come with a label.

This is usually because the data is not coming from Salesforce or a
IN
non-default UI widget is being used for a Salesforce field (i.e., not

outputField).
Attributes include:
value (String): the text displayed as the label.
for (String): Id of the component with which the label should be
associated.
associated
tabindex (Integer): the order in which the this label/field come into
focus using the Tab key.

Exercise 4-1: Overriding a Default Edit Page with
Alternative UI Widgets
Goal:
15 min.
Override the Review edit page to provide alternate forms of
y
data entry.
Scenario:
Universal Containers wants to provide a different interface for
users when they are providing Review information. The
company is also interested in figuring out how to display UI
widgets that are not necessarily the default display widgets.
LY
Tasks:
Override the Review Edit button.
N
Test the page.
O
SE
U
AL
N
Exercise 4-1 Goal

R
15 min.
TE
selectRadio
outputLabel
selectOption
outputField
IN
inputField
outputLabel selectRadio
selectOption
outputLabel
inputTextarea
selectList
outputLabel
selectOption
outputLabel
inputTextarea
inputField
inputField

<apex:outputField>
This tag creates a read-only display of a label and value for a

Salesforce field.
The data is automaticallyy formatted according
g to the field type
yp
(currency, URL, etc.).
Attributes include:
value (Object): merge field that references Salesforce field in
the form of {!object.field}.
LY
N
O
SE
U
AL
N
<apex:outputLink>
R
This tag creates a link to a URL.

TE
Like its HTML equivalent anchor tag, the body of an outputLink is

the text or image that displays as the link.
IN
Attributes include:
value (String): the URL used for the link.
Use with the $Page expression to access other Visualforce pages.
coords ((Integer):
g ) the p
position and shape
p of the hot spot
p for the link if
used with an image.

<apex:param>
This is used as a child tag that provides a name/value pair parameter

for its parent component. It can be used with:
outputLink.
Attributes include:
name (String): the name of this parameter.
value (Object): the value for this parameter.
LY
N
O
SE
U
AL
N
<apex:outputPanel>
R
This tag defines a set of content that is grouped together, often for the
TE
purpose of doing partial-page refreshes using AJAX (more later).

Attributes include:
IN

layout (String): the layout style for the panel which is either block,
inline, or none. (inline)
For those familiar with HTML:
block: generates an HTML div tag.
inline: generates an HTML span tag.
tag

<apex:outputText>
This tag simply displays text that can be formatted using a style sheet.
Text can be used with nested param tags to dynamically insert data.
Attributes include:
value (String): the text that is displayed.
escape (Boolean): specifies whether sensitive HTML or XML
characters should be escaped. (true)
LY
N
O
SE
U
AL
<apex:outputText> (cont.)
N
R
Heres a dynamic text example using the param tag:

TE
1 <apex:outputText style="font-style:italic" value="This is {0} text with {1}.">

2 <apex:param value="my"/>
3 <apex:param value="arguments"/>
4 </
</apex:outputText>
t tT t>
IN
The example above renders the following HTML:

<span id="theText" style="font-style:italic">This is my
text with arguments.</span>

<apex:pageBlockTable>
This tag creates a table by iterating over a set of data using the default
Salesforce style sheet.
It can be used within either a pageBlock or a pageBlockSection.
Use the column tag to specify the tables columns.
If you specify a Salesforce object field for a column, the associated
label is automatically used in the header.
You can alternatively use the <apex:dataTable> or
<apex:dataList> tags if the data is not being supplied by a
Salesforce object or you wish to use a different style sheet.
LY
Attributes include:
columns (Integer): number of columns in the table.
N
value (Object): references the collection of data, usually in the form
of a merge field that references Salesforce object in the form of
O
{!object}.
SE
U
AL
N
<apex:dataList>
R
This tag creates a list (a one-column table) by iterating over a set of

TE
data.
As there is onlyy one column, the bodyy of the tag
g specifies
p how a single
g
item should appear in the list.
IN
Attributes include:
value (Object): the collection of data displayed in the list.
type (String): the type of list to display. For ordered lists, possible
values are: 1, a, A, i, I. For unordered lists: disc, square,
circle. (disc)
rows (Integer): the number or rows to display. (0 = all rows)

<apex:dataTable>
This tag creates an HTML table by iterating over a set of data.

Use the column tag to specify the tables columns.
Attributes include:
columns (Integer): number of columns in the table.
value (Object): references the collection of data, usually in the form
of a merge field that references Salesforce object in the form of
{!object}.
rows (Integer): the number or rows to display. (0 = all rows)
LY
N
O
SE
U
AL
N
<apex:column/>
R
This tag creates the columns for a table.

TE
It can be used within either a <apex:pageBlockTable> or

<apex:dataTable> set of tags.
Attributes include:
IN
headerValue (String): the text that should be displayed in the column

header. Overrides the default label if the column is a Salesforce field.
value (Object): the contents for this column, usually in the form of a merge
field that references Salesforce object in the form of {!object.field}.
width (Integer): the number of pixels for the width of this column.
rowspan and colspan (Integer): the number or rows or columns spanned
by this data.

Exercise 4-2: Displaying Data in Tables
in an Inline Page
Goal:
15 min.
Create two different types of tables of data within an inline
p g
page.
Scenario:
Universal Containers wants to display candidate and job
application information on the position page. Theres no reason
to re-create the entire Position page because the company
simply wants to add a new section.
LY
Tasks:
Create the new Visualforce page.
Add the page to an inline section of the page layout.
N
Test the page.
O
SE
U
AL
N
Flash
R
Flash code is compiled into .swf files that can be embedded into Web
TE
pages and then played using the adobe flash player.

In HTML, including
g a flash file might
g look like this:
IN
1 <object data="movie.swf" type="application/x-shockwave-flash" width="500"

height="500">
2 <param name=nameofParameter1" value=valueofParameter1" />
3 <param name=nameofParameter2" value=valueofParameter2" />
4 </object>
Notice that this tag includes the name of the file, the dimensions of how
it should be displayed, and a list of name/value pairs of parameters.
Yo
You ma
may not have
ha e access to the flash so
source
rce code
code, so it is important
that you understand the name/value pairs that are expected.

<apex:flash>
In Visualforce, flash tags are used instead to call .swf files.

Attributes include:
src (String): the name and location of the .swf
swf file,
file generally within the
static resources.
height & width (Integer): the dimensions of the output.
flashVars (String): name/value pairs separated by an ampersand.
Example:
<apex:flash
LY
flashVars="startValue={!field}&min=1&max=5&snapInterval=1&callbac
kFunction=updateHiddenValue&passthroughId={!$Component.theForm.re
viewBlock.scores.hiddenfieldId}&bgColor=#F3F3EC"
N
src="{!$Resource.flashSlider}" height="40" width="175" />
O
SE
U
AL
N
<apex:facet>
R
A facet is a child of another Visualforce component that overrides an

TE
area of the rendered parent with the contents of the facet.

Facet tags
g can be used with a variety y of other component
p tags
g to
provide or override headers, footers, and captions to other items.
IN
Attributes include:
name (String): describes if the facet is a header, footer, or
caption.
1 ...
2 <apex:pageBlocktable value="{!partnercerts}" var="p" id="partnerlist">
3 <apex:column>
4 <apex:facet name="header">
5 <apex:commandLink
value="{!$ObjectType.Indvidual__c.Fields.First_Name__c.Label}"
action="{!sortPartners}" >
6 <apex:param name="sortColumn" value="first_name__c"
assignTo="{!sortColumn}"/>
7 </apex:commandLink>
8 </apex:facet>
9 {!p.partner.First_Name__c}
10 </apex:column>
11
2 Copyright 2010 salesforce.com, inc. 117

Module Review
1. Which tags should be used to automatically bring in the

Salesforce label and default widget for a field?
2. What does the <apex:flash> tag do?
3. Where can the <apex:column/> tag be used?
LY
N
O
SE
U
AL
N
Module 5: Visualforce
R
Components for
TE
Modularity
IN
Visualforce Pages
119

Module Objectives

Create Visualforce pages that use these tags to custom
components and templates.
LY
N
O
SE
U
AL
N
<apex:component>
R
The <apex:component> tag can be used to create your own

TE
custom, reusable components.

Create custom components via Your Name | Setup | Develop |
IN
Components.
Custom components can be accessed using the c namespace (as in
<c:componentname>, and are automatically added to the online
reference.
Attributes include:
controller or extensions (String): name of the controller that
used to control the behavior of this component.
access (String): indicates the ability to use the component outside
of the same namespace.

<apex:attribute> & <apex:componentBody>
Use the <apex:attribute> tag within a component tag to define

the custom attributes for your custom component.
Attributes can define the name, data type,
yp and other aspects
p of the
custom attribute.
Use the <apex:componentBody> tag within a component tag to pull
the body of the components implementation into the component
definition.
This is often used for custom iteration components.
LY
N
O
SE
U
AL
N
Exercise 5-1: Creating a Custom Component

R
Goal:
15 min.
TE
Create a custom component for the slider widget used earlier.

Scenario:
IN
Universal Containers has grown to like the slider widget and

wants to use it elsewhere in other pages. However, to make
things easier, the company wants it to be componentized.
Tasks:
Be sure that the slider flash file is in your static resources.
Complete the slider component.
component
Test the page.

Exercise 5-2: Overriding a Default Edit Page
Containing Flash Widgets
Goal:
15 min.
Override the Review edit page to provide alternate forms of
y this time utilizing
data entry, g a flash file.
Scenario:
Universal Containers wants to provide a non-standard user
interface widget (a slider) to create the rankings for reviews
instead of any of the options delivered by Salesforce.
Tasks:
LY
Add the slider flash file to yyour static resources.
N
O
Test the page.
SE
U
AL
N
Page Inclusions
R
Tags that allow you to insert other Web content within an

TE
iframe.
<apex:iframe>: insert Web content using a URL.
IN
<apex:include>: insert another Visualforce page.

<apex:include> Example
Target1.page
StdFooter1.page
<apex:include />
Target1 Page
1 <apex:page showHeader=false>
2 Unique content for this page.
LY
3 <apex:include pageName="{!$Page.StdFooter1}" />
4 </apex:page>
/ape :page
N
StdFooter1 Page
1 <apex:page >
O
2 <br />
3 <i>This is the standard footer.</i>
4 </apex:page> SE
U
AL
N
Template Tags
R
Tags for defining reusable content and styles.

TE
<apex:composition>: a container that defines the name of the

template Visualforce page to be applied to the target page.
IN
<apex:define>: provides dynamic content to be inserted into the

template using insert components.
<apex:insert>: used in templates to insert a named area defined by
an define tag in the target page.

<apex:composition> Example
Target2.page Template1.page
<apex:composition >
<apex:insert name=headerTitle>
<apex:define name=headerTitle>
<apex:define name=body> <apex:insert name=body>
Target2 Page
1 <apex:page showHeader="false" >
2 <apex:composition template="{!$Page.Template1}" >
LY
3 <apex:define name="headerTitle">Products</apex:define>
4 <apex:define
p name="body">Unique
y q content for this page.<br/></apex:define>
p g p
5 </apex:composition>
6 </apex:page>
N
Template1 Page
O
1 <apex:page >
2 Welcome to the <b><apex:insert name="headerTitle" /></b> page.<br/>
3 <apex:insert name="body" />
4 </apex:page>
SE
U
AL
Exercise 5-3: Creating Pages Using Page

N
Templates
R
Goal:
10 min.
TE
Create a Visualforce page that constructs a page by using elements from

another template page.
Scenario:
S i
IN
Universal Containers wants to understand how to use template pages to

construct pages. This will allow the company to change the content of many
pages at once if it decides in the future to change the template.
Their example to start with is using the candidate page to display additional
information (including a photo) of the candidate.
Tasks:
Create the new Visualforce page to act as a template for the related lists.
Create the new Visualforce page to act as a template for photo and map
sections.
Create the new Visualforce page that will call the previous templates.
Test the page by using a URL parameter for the ID of an existing candidate in
your org.

Module Review
1. What does the <apex:component> tag do?

2. Give examples of page inclusions.
LY
N
O
SE
U
AL
N
Module 6:
R
JavaScript in
TE
Visualforce
IN
Visualforce Pages
132

Module Objectives

Describe the use of AJAX within Visualforce.
Create access to standard actions via the URLFOR expression.
expression
Create reusable functions within <script> tags.
Create partial page refreshes on JavaScript events.
Describe the usage of the AJAX action components.
LY
N
O
SE
U
AL
N
Module Agenda
R
Action Binding and JavaScript

TE
JavaScript Functions
Partial Page Updates
IN
Asynchronous Operation Status

AJAX Behavior on Events

At this point, only actions that are shared across all objects are exposed
through standard controllers.
But further standard Salesforce actions are available by using JavaScript and
th expression
the i syntax
t with
ith the
th !URLFOR and d $Action
$A ti k
keywords.
d
Additional standard actions will be added into standard controllers in future
releases.
See the online help for more information regarding global $ variables.
Example:
1 <apex:pageBlockButtons>
LY
2 <apex:commandButton value="Edit" action="{!edit}"/>
3 <apex:commandButton
ape :co a d utto
4 onclick="parent.window.location.href='{!URLFOR($Action.Position__c.Clone,position.id)
}'" value="Clone"/>
5 </apex:pageBlockButtons>
N
O
SE
U
AL
N
Module Agenda
R

TE
IN


It is possible to create reusable JavaScript functions within HTML

<script> tags.
This creates functions that can be called from within the Visualforce
page.
Creating functions can be helpful if the same JavaScript code is
needed multiple times on a page.
These functions can then be used on the embedded JavaScript event
attributes in many Visualforce tags.
LY
Example: onclick=changeFont();
It can also be useful to isolate the JavaScript at the top of the page for
maintenance purposes.
N
O
SE
U
AL
N
JavaScript Functions (cont.)

R
Example:
TE
1 <apex:page id="thePage">
2 
4 <script language="JavaScript" type="text/javascript">
5
IN
function changeFont(input, textid) {

6 if(input.checked) document.getElementById(textid).style.fontWeight =
7 "bold";
8 else document.getElementById(textid).style.fontWeight = "normal";
9 }
10 </script>
11 
13 <apex:outputPanel layout="block">
14 <label for="checkbox">Click this box to change text font: </label>
15 <apex:input id="checkbox" type="checkbox"
onclick="changeFont(this,'{!$Component.thePanel}');"/>
onclick changeFont(this, {!$Component.thePanel} ); />
17 
18 <apex:outputPanel id="thePanel" layout="block">Change me!
20 </apex:page>

Module Agenda

LY
N
O
SE
U
AL
N

R
Due to the data binding capabilities of Visualforce, AJAX is not required

TE
for API access.

AJAX is a wayy to create better p
performing
g websites through
g ppartial
page refreshes.
IN
By just refreshing a small section of the page, performance is

improved by not reloading the entire page.

Partial Page Updates (cont.)
The simplest way to implement a partial page update is to use the

reRender attribute on a button or link.
First, isolate the p
portion of the p
page
g that should be rerendered when
the button or link is clicked by surrounding it with the
<apex:outputPanel> tags.
Be sure to give the outputPanel an id.
Then, create the command button or link that will trigger the partial
refresh.
LY
Add the reRender attribute to the button or link tag and assign it the
value of the id of the outputPanel
t tP l created earlier
earlier.
N
O
SE
U
AL
N

R
Example:
TE
IN

2 <apex:pageBlock title="Hello {!$User.FirstName}!">
3 You are displaying contacts from the {!account.name} account.
4 Click a contact's name to view his or her details.
5 </apex:pageBlock>
6 <
<apex:pageBlock
Bl k title="Contacts">
titl "C t t ">
7 <apex:form >
8 <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4"
border="1">
9 <apex:column >
10 <apex:commandLink rerender="detail">
11 {!contact.Name}
12 <apex:param name="cid" value="{!contact.id}"/>
14 </apex:column>
15 </apex:dataTable>
LY
16 </apex:form>
p p g
18 <apex:outputPanel id="detail">
19 <apex:detail subject="{!$CurrentPage.parameters.cid}" relatedList="false"
title="false"/>
N
22 </apex:page>
O
SE
U
AL
N
Module Agenda
R

TE
IN


AJAX behaviors (like partial page updates) are asynchronous events

that occur in the background while a user continues to work on the
page.
In the chance that these updates take longer than near-instantaneous,
Visualforce supports displaying status updates using the
actionStatus tag.
You can display text at the beginning or end of the asynchronous
event using the startText and stopText tags.
You can specify what is to be displayed after the refresh by using the
LY
<apex:facet name stop > tags.
name=stop>
N
O
SE
U
AL
N
Asynchronous Operation Status (cont.)

R
2
TE
3 <!- Same as previous example-->

4
5 <apex:commandLink rerender="detail">
6 {!
{!contact.Name}
t t N }
IN
9 </apex:column>
11 </apex:form>
14 <apex:actionStatus startText="Requesting...">
15 <apex:facet name="stop">
16 <apex:detail subject="{!$CurrentPageReference.parameters.cid}"
relatedList="false" title="false"/>
17 </apex:facet>
p
18 </apex:actionStatus>
20 </apex:page>

Module Agenda

LY
N
O
SE
U
AL
N
Visualforce Components & JavaScript Events

R
Many Visualforce
TE
tags relate to
different UI
components.t
IN
These often have

attributes
equivalent to
JavaScript events
to handle user
actions to those
components.
components

JavaScript Events
Most Visualforce tags

that produce concrete
HTML elements
supportt appropriate
i t
JavaScript event
attributes.
More on JavaScript
events can be found at:
www.w3schools.com
LY
N
O
SE
U
AL
N

R
This method of having the button or link click trigger the refresh is
TE
simple to implement, but often there are better ways to improve the
user experience.
Example: instead of clicking a link, the detail section should refresh
IN
when the mouse hovers over a name.

If the event is happening to the same component that should take the
action, use the built-in JavaScript event attributes.
If the event is happening to a different component than will take the
action, use the actionSupport tag to handle the event.

AJAX Behavior on Events (cont.)
2
3 <!- Same as previous example-->
4
5 <apex:outputPanel>
6 <apex:actionSupport event="onmouseover"
event "onmouseover" rerender="detail">
rerender "detail">
8 </apex:actionSupport>
9 {!contact.Name}
11 </apex:column>
13 </apex:form>
16 <apex:actionStatus startText="Requesting...">
LY
17 <apex:facet name="stop">
18 <apex:detail
p subject="{!$CurrentPageReference.parameters.cid}"
j g p
relatedList="false" title="false"/>
19 </apex:facet>
20 </apex:actionStatus>
N
22 </apex:page>
O
SE
U
AL
N
AJAX Behavior on Events (cont.)

R
There are a few additional AJAX components:

TE
actionPoller: similar to actionSupport, but the event is based on a

timer instead of a user action.
actionFunction: provides support for invoking a controller action
IN
from JavaScript code using an AJAX request by defining a new

JavaScript function.
actionRegion: used to demarcate which parts of the page the server
should reprocess.
It does not, however, say which areas should be rerendered, which
should
h ld bbe specified
ifi d with
ith a panel.
l

Exercise 6-1: Creating Partial Page Refreshes for
Conditional Fields
Goal:
10 min.
Override the position new page to only display certain fields based on the
values of others, and refresh only the part of the page that is required.
Scenario:
Universal Containers wants to provide a similar functionality to record
types in providing different fields on the page depending on the values of
others. However, Universal Containers has heard that with Visualforce it
can not only make this dynamic, but it can also make it so that it only
requires a partial page refresh.
The position page should only display the Technical Skills section when
the Department is set to IT or Engineering.
LY
Tasks:
N
Override the Position New button.
Test the page.
O
SE
U
AL
N
AJAX and Apex Web Services

R
Yet another use of AJAX is to:

TE
Create an Apex class and expose it as a Web Service.

Call the Web Service from a Visualforce page
page.
IN
You can optionally attach the page to a button, make it inline, etc.
For more information on using the AJAX Toolkit to contact the Salesforce
Web Services API, refer to the AJAX Toolkit Developers Guide
documentation.

Module Review
1. What are some examples of JavaScript Events?

2. What is AJAX typically used for in Visualforce?
3.
3 Why would you need to use the global $URLFOR variable?
4. What is the purpose of <script> tags?
5. What are the different AJAX action tags? What does each
do?
6. How can you create partial page refreshes? How does the
method change depending on the context?
LY
N
O
SE
U
AL
N
Module 7:
R
Introduction to
TE
Visualforce ((Apex)
p )
IN
Controllers
Visualforce Pages
156

Module Objectives

Identify the functionality that comes with each standard
controller.
Realize when you would need to move to Apex for creating
custom controllers or extensions.
Compare and contrast controllers and extensions.
LY
N
O
SE
U
AL
N
Module Agenda
R
Controller Overview
TE
Standard Controllers
Custom Controllers
IN
Controller Extensions

Visualforce Controllers
A Visualforce controller is an Apex class that specifies the data

available and the behavior when a user interacts with components
on a page.
Standard Controllers:
Are provided for all API entities/objects, such as Account, Contact,
Opportunity, etc., as well as custom objects.
Provide access to standard Salesforce data and behavior.
Are available to work with record lists.
LY
standardController=Contact>
N
O
SE
U
AL
N
Visualforce Controllers (cont.)

R
Custom Controllers:
TE
Are coded to create custom behaviors or non-standard data sets.

Can be used to create wizards or leverage callouts
callouts.
IN

controller=MyController>
Controller Extensions:
Add custom behavior or additional data to standard controllers.
standardController=Contact
standardController Contact extensions
extensions=MyClass
MyClass,
MyOtherClass>

Module Agenda
Controller Overview
Custom Controllers
LY
N
O
SE
U
AL
N
R
Standard controllers provide the same common data and functionality

TE
and logic used for standard Salesforce pages.

All standard and custom objects
j that can be q
queried using
g the API
have a standard controller.
IN
Standard controllers are associated on Visualforce pages using:

<apex: page standardController=Object>

Standard Controllers (cont.)
Standard controllers include a getter method to return the record

specified by the ID query string parameter (on the URL).
This allows the page to access data using the {!object} merge field
syntax.
This also allows developers to test using URL parameters with known
IDs.
Example:
https://na4.salesforce.com/apex/jobAppCandidateInfo
?id=a0360000004QSTY
LY
N
O
SE
U
AL
N

R
As with API queries, you can use merge field expression syntax to
TE
retrieve data from related records.

You can traverse up
p five levels of child-to-parent
p relationships.
p
IN
Example: {!contact.Account.Owner.FirstName}
You can traverse down one level of parent-to-child relationships to
return an array of all child rows for that parent.
Example: {!account.Contacts}

Action methods perform logic or navigation when a page event occurs.

Action methods are invoked using the {!actionmethod} syntax.
Standard controllers define the following action methods:
save()
quicksave()
edit()
delete()
LY
cancel()
N
O
SE
U
AL
N
Standard List Controllers

R
For almost every standard controller there exists a standard list

TE
controller that allows you to create pages that display and act on a set
of records, such as list pages, related lists, and mass action pages.
To select the standard list controller instead of the regular standard
IN
controller, use the recordSetVar attribute on the page tag.

<apex:page standardController=Account
recordSetVar=accounts>
This also creates a variable that represents the record set for the
page.

Standard List Controllers (cont.)
Pages that use standard list controllers can be used in much the same
way as pages with regular controllers.
For example,
p yyou can override standard or create custom buttons,
links, and tabs.
Standard list controllers provide additional pagination actions that
regular controllers do not, such as first, last, next, and
previous.
LY
N
O
SE
U
AL
N
Standard List Controllers Example

R
1 <apex:page standardController="Account" recordSetVar="accounts" tabstyle="account"

sidebar="false">
TE
2 <apex:pageBlock >
3 <apex:pageBlockTable value="{!accounts}" var="a">
4 <apex:column value="{!a.name}"/>
5 </ape pageBlockTable>
</apex:pageBlockTable>
6 </apex:pageBlock>
IN
7 </apex:page>

Module Agenda
Controller Overview
Custom Controllers
LY
N
O
SE
U
AL
N
Custom Controllers
R
A custom controller is an Apex class that implements all of the logic for a
TE
page without leveraging a standard controller.

Custom controllers typically
yp y define three different types
yp of methods:
IN
Getter methods to retrieve data from the controller.

Setter methods to pass data from the page to the controller.
Action methods to perform logic.
(Navigation action methods to take the user somewhere else.)
Custom controllers must explicitly define all action methods, including
those found in standard controllers.

Custom Controllers: Getter Methods
Getter methods provide ways to return object data in a Visualforce

page.
Getter methods take the form: getDataName() which uses the name
of the data retrieved.
In a Visualforce page, the data can be accessed using the
{!DataName} merge field syntax.
LY
N
O
SE
U
AL
N
Custom Controllers: Getter Methods (cont.)

R
All standard controllers come with a getObject() method to allow

TE
access to the objects data via the {!object.field} syntax.

This is done byy reading
g the ID from the URL p
parameter and returning
g
the data for the record, using:
IN
return [select id, listofotherfields from object

where id = :ApexPages.currentPage
().getParameters().get(id)];
Only fields listed explicitly returned are accessible from the page.

Custom Controllers: Setter Methods
Setter methods are used to pass user-specified values from a page to a

controller.
Example:
p p passing
g in search text entered byy a user.
Setter methods take the form setDataName().
Any setter methods are automatically executed before any action
methods.
Data that is bound to a Salesforce object is automatically updated
without the need for setter methods.
LY
N
O
SE
U
AL
N
Custom Controllers: Action Methods

R
Action methods in controllers are bound to the action attribute

TE
available on the following tags:

<apex:commandButton>
IN
<apex:commandLink>
<apex:actionPoller>
<apex:actionSupport>
<apex:actionFunction>
The action attribute value is written in the form of {!methodName}.
This
Thi methodName mustt map to
t a method
th d on the
th controller.
t ll
Remember: standard controllers come with save(), edit(),
delete(), and cancel() methods.
Action methods may also include navigation controls.

Custom Controllers: Navigation Methods
The ApexPages.PageReference object represents a UI page. There

are three different ways to refer to pages, depending on the type of page:
For a Visualforce page:
p g
PageReference pageRef = Page.visualforcePageName
For a Salesforce (possibly non-Visualforce) page:
PageReference pageRef = new
PageReference(partialURL);
where PartialURL = everything after
LY
https://salesforceserver.salesforce.com
For a non-Salesforce website:
N
PageReference pageRef = new
PageReference(fullURL);
O
SE
U
AL
N
Custom Controllers: Navigation Methods (cont.)

R
Then, navigate to the new page using:

TE
pageRef.setRedirect(true);
return pageRef;
IN
Remember that the page context in Salesforce is passed from page to

page via URL parameters (usually Ids).
Use the getParameters() and put() methods to add
parameters to the URL.
Example: pageRef = getParameters().put(id,
object.id);

Exercise 7-1: Creating a Visualforce Page with a
Custom Controller
Goal:
10 min.
Create a Visualforce page to accompany a custom controller.
Scenario:
Universal Containers wants to start learning more about
controllers, and at the same time create a special search page
for candidate information that allows you to search for a
candidate by first name, last name, or email all at the same
time.
LY
Tasks:
Add the Controller class.
N
Test the page by searching for candidates.
O
SE
U
AL
N
Module Agenda
R
Controller Overview
TE
Custom Controllers
IN

If you want to keep most of the functionality of a standard or custom

controller, it is probably wiser to create an extension rather than a new
custom controller.
A controller extension is an Apex class that contains a constructor that
takes the argument ApexPages.StandardController or your
CustomContoller class.
The extension can use these objects to call getId() or
getRecord() to access the record in context.
The <apex:page> tag then uses the base controller as well as the
LY
extensions attribute to identify the controller extension.
N
O
SE
U
AL
N
Exercise 7-2: Using a More Complex Controller

R
Goal:
20 min. Use a controller extension to help create a dynamic page that changes
TE
the data display based on the mouseOver JavaScript event.

Scenario:
Universal Containers wants to display review result information in one
IN
location for all candidates on a given position. The company wants a table
that shows the candidates on the vertical axis and the review role
(General, Technical, etc.) on the horizontal access, with review scores
averaged in the table. When a user clicks a cell, it should display the
details of that review below the table. Note that the Recommended for
Hire field counts as a 5 if true and a 1 if false.
Tasks:
Add the style sheet as a static resource.
Add the pre-existing custom controller.
Create the Visualforce page.
Add a custom button on the Position page layout to access the page.
Test the page.

Exercise 7-3: Creating the Job Application &
Candidate Mashup (Optional)
Goal:
30 min.
Create a more user-friendly Job Application page that displays
more useful information for the user.
Scenario:
Universal Containers recruiters have been complaining that
they cannot view Candidate information on the Job Application
page layout without further clicks.
Tasks:
LY
Create the new jjob application
pp page.
p g
N
O
SE
U
AL
N
Module Review
R
1. What functionality comes with each standard controller?

TE
2. When do you need to use Apex with Visualforce?

3.
3 What does {!actionName} refer back to on the controller?
IN
4. What is the main difference between using a custom

controller and a controller extension?

Module 6: Further
Topics in Visualforce
Visualforce Pages
LY
N
O
SE
183
U
AL
N
Module Objectives
R

TE
Describe use cases for Force.com Sites.

Describe situations where Visualforce might be required for
IN
certain functionality on a mobile device.

List the differences between the iPhone and the BlackBerry
with regards to Visualforce page development.
Describe the strategies for creating page that can be used
across multiple mobile platforms.

Module Agenda
Visualforce and Sites

Visualforce and Mobile
LY
N
O
SE
U
AL
N
Force.com Sites
R
Create public
TE
websites that are

accessible from
b d dd
branded domain i
IN
names.
Sites are built with All Your Websites All Your Intranets
Visualforce pages
and can include
data and content
from a Salesforce
application
application.
All Your Portals All Your Web Apps

Creating a Force.com Site
Build a Force.com App Design Your Web Interface

in Visualforce
LY
N
Create a Force.com Site Activate!
O
SE
U
AL
N
Force.com Sites Use Cases

R
Build and run new Web applications with Force.com Sites.

TE
Consumer reviews
Hotel concierge
g services
IN
Event registration sites

Transform business applications into websites.
Recruiting portal
Extend your Salesforce CRM applications.
Interactive Web-to-Lead forms
Campaign landing pages
Run your corporate website on our service.
Public Websites
Intranets

Module Agenda
Visualforce and Sites

Visualforce and Mobile
LY
N
O
SE
U
AL
N
Salesforce Mobile
R
Salesforce Mobile is a licensed client application to allow access from a

TE
BlackBerry, iPhone, or Windows Mobile device.

Mobile Lite is a free version that has limited support.
pp
IN
Consult the Salesforce Mobile Implementation Guide for more

information regarding setting up Salesforce Mobile.
Administrators can mobilize a limited set of standard objects in addition
to all custom objects.
Most other features, such as permissions, page layouts, related lists,
dashboards, reports, and list views are also available.
Visualforce tabs and Web tabs that have been mobilized can also be
included.

Salesforce Mobile (cont.)
Developing for mobile devices requires remembering two key

differences:
Wireless networks are still veryy slow.
Mobile devices do not maintain a constant network connection.
Developers can turn to Visualforce Mobile when their needs cannot be
met using other means, such as:
Mobilizing an unsupported standard object.
Integrating with other Web APIs.
LY
Reproducing functionality not available declaratively
declaratively.
Integrating with a peripheral device, such as Bluetooth or GPS.
N
Overriding standard button actions.
O
Try to use Apex triggers over Visualforce where possible.
SE
U
AL
N
Developing Pages for Mobile Devices

R
Designs that work for desktop browser will likely not offer a good
TE
experience in a mobile browser.

Mobile has support
pp for custom objects
j and many y common standard
objects, but the layout and styling of default application pages are
IN
usually too complex for a mobile browser.

Keep the real estate open by not displaying the header or sidebar.
Lookup fields do not typically offer a good user experience.
Use an Apex trigger to validate the entry when saved instead.

Developing Pages for Mobile Devices (cont.)
The standard Salesforce style sheets are too massive for the mobile
browser.
Create reusable styles in a separate page and then use the include
component to bring in the styles.
Creating the styles as a static resource pairs it with the client-side
Visualforce markup and increases the page load time.
If working on the iPhone, you can use iUI, a third-party library that
provides an iPhone-like interface.
LY
N
O
SE
U
AL
N
iPhone and BlackBerry Differences

R
The mobile application launches Visualforce pages in an embedded

TE
browser.
On the iPhone, this is the same full-feature Safari browser that has
excellent JavaScript support.
IN
Set your page width to 980 pixels.

Landscape orientation is not supported.
On the BlackBerry, the browser has very limited JavaScript support and
does not support inline events.
Avoid using
g JavaScript
p in mobile pages
p g for BlackBerry.
y
The view state for forms using the form component is usually too
large for the BlackBerry. Use standard HTML forms instead.
The BlackBerry browser does not have built-in navigation, so you must
supply links or buttons to navigate.

Developing for Both Devices
Use one of the following methods to support multiple mobile platforms:

Separation and Redirection
Build pages separately,
separately and point the mobile tab to the BlackBerry
page. At the top of the page, include JavaScript to redirect the page
if not a BlackBerry smartphone.
Lowest Common Denominator
Create pages that include minimal or no JavaScript that can work on
any supported device.
LY
Conditional Code
Create pages that evaluate which device is being used and offer
N
appropriate markup for each client.
O
SE
U
AL
N
Mobile JavaScript Library

R
Mobile devices have a few additional functions that are not applicable
TE
to desktop clients.
You can use the following
g JavaScript
p functions for JavaScript-enabled
p
devices:
IN
mobileforce.device.sync(): forces the client application to

synchronize data with Salesforce.
mobileforce.device.close(): closes the embedded browser
and returns to the original record.
mobileforce.device.syncClose(): does both of the above.
mobileforce.device.getLocation(): obtains the GPS
coordinates of the devices location.
You can also use HTML links to sync and/or close.

Mobilizing Visualforce Pages
After developing the Visualforce pages for mobile clients, you need to
integrate the pages into the mobile application.
Create a new mobile-readyy Visualforce tab.
Your Name | Setup | Create | Tabs | New Visualforce Tab
Check the Mobile Ready checkbox
Choose the profile visibility
If the page is only for mobile clients, remove the new tab from
available apps
LY
Add the Visualforce tab to a mobile configuration
configuration.
Test the page using a mobile client simulator.
N
O
SE
U
AL
N
<messaging:emailTemplate>
R
The messaging components are used to create Visualforce email

templates.
TE
All email templates must be wrapped inside a single emailTemplate

component.
component
IN
Visualforce email templates have advantages over traditional email

templates.
Email templates can be edited under Your Name | Setup | Email | My
Templates or Your Name | Setup | Communication Templates | Email
Templates (for public templates).
You can use the following tags within email templates, which add the
corresponding
p g elements to the email.
<messaging:emailHeader>
<messaging:htmlEmailBody>
<messaging:plainTextEmailBody>
<messaging:attachment>

Module Review
1. What are use cases for Force.com Sites?

2. What are situations where Visualforce might be required for
certain functionalityy on a mobile device?
3. List the differences between the iPhone and the BlackBerry
with regards to Visualforce page development.
4. What are three strategies for creating page that can be used
across multiple mobile platforms?
LY
N
O
SE
U
AL
N
Visualforce
R
TE
Appendix
IN
200

Appendix: Global Variables
The following is a list of global variables available using the

expression syntax in a Visualforce page:
$Action
$Api
$Component
$CurrentPageReference
$Label
$ObjectType
$Organization
$Page
$Profile
LY
$Resource
$SControl
N
$System.OriginDateTime
$User
O
$UserRole
SE
U
AL
N
Appendix: Functions
R
The following is a list of functions available using the

TE

NOW
TODAY
IN
AND
IF
NOT
OR
BEGINS
CONTAINS
LEN
TRIM
URLFOR
Appendix: Expression Operators
The following is a list of operations available using the
+ (can also be used for string concatenation)
-
*
/
^
()
=
<>
LY
<
>
<=
N
>=
O
&
SE
U
AL
N
Appendix: Facet Tags

R
This is a list of all the Visualforce components with facets.

TE
actionStatus: stop, start

column: footer, header
dataTable: footer, header, caption
IN
listViews: footer, header, body

pageBlock: footer, header
pageBlockSection: header, body
pageBlockTable: header, footer, caption
panelGrid: header, footer, caption
relatedList: header, footer, body

01 VisualforcePages Slides

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

01 VisualforcePages Slides

Enviado por

Direitos autorais:

Formatos disponíveis

Force.

Copyright 2010 salesforce.com, inc.

Printed in the U.S.A.

Copyright 2010 salesforce.com, inc. All rights reserved. 1 Visualforce Pages

By the end of this course, you will be able to:

Understand the Visualforce framework, including its

Copyright 2010 salesforce.com, inc. 4

Copyright 2010 salesforce.com, inc. All rights reserved. 2 Visualforce Pages

Understand the benefits of using static resources and use them

Form and Output Components

Copyright 2010 salesforce.com, inc. 6

Copyright 2010 salesforce.com, inc. All rights reserved. 3 Visualforce Pages

You have basic HTML or XML skills.

Copyright 2010 salesforce.com, inc. All rights reserved. 4 Visualforce Pages

Workflow Force.com Page Controllers

By the end of this module, you will be able to:

Describe the Visualforce framework, including its advantages

understand its advantages.

Copyright 2010 salesforce.com, inc. 10

Copyright 2010 salesforce.com, inc. All rights reserved. 5 Visualforce Pages

Create Any Application and Interface for Any Device

Copyright 2010 salesforce.com, inc. 12

Copyright 2010 salesforce.com, inc. All rights reserved. 6 Visualforce Pages

Visualforce was officially released as part of the Summer 08 release.

It allows developers to completely replace the standard page layouts

Copyright 2010 salesforce.com, inc. 14

Copyright 2010 salesforce.com, inc. All rights reserved. 7 Visualforce Pages

Visualforce offers a user-friendly, split-screen development environment.

Simply click Save to

Visualforce pages are ultimately rendered into markup.

This means that developers can include:

Copyright 2010 salesforce.com, inc. 16

Copyright 2010 salesforce.com, inc. All rights reserved. 8 Visualforce Pages

Each Visualforce component tag generates markup or other Web-

view state: the space in server memory where the information

necessary to maintain the state of the database between

View state is important when maintaining state across multiple pages.

Copyright 2010 salesforce.com, inc. 18

Copyright 2010 salesforce.com, inc. All rights reserved. 9 Visualforce Pages

Visualforce understands Salesforce metadata and provides access to the

First, a Primer on Model-View-Controller

Business data and the rules for

how to use the data

Copyright 2010 salesforce.com, inc. 20

Copyright 2010 salesforce.com, inc. All rights reserved. 10 Visualforce Pages

Model Opportunity object (master)

Controller Tab navigation overview page

MVC Example: Opportunities View (Page Layout)

Copyright 2010 salesforce.com, inc. 22

Copyright 2010 salesforce.com, inc. All rights reserved. 11 Visualforce Pages

Visualforce: Model/View/Controller Pattern

Visualforce shares the Visualforce pages are Controllers contain Apex

Copyright 2010 salesforce.com, inc. 24

Copyright 2010 salesforce.com, inc. All rights reserved. 12 Visualforce Pages

Visualforce Pages Pages

A canvas similar to standard

Web development model

Ability to reference any CSS,

Copyright 2010 salesforce.com, inc. 27

Copyright 2010 salesforce.com, inc. All rights reserved. 13 Visualforce Pages

Create complex standard UI

Copyright 2010 salesforce.com, inc. 28

Visualforce Component Close-up Components

Copyright 2010 salesforce.com, inc. 29