This document provides an overview of Visualforce pages in Salesforce, which allow users to build custom user interfaces for Salesforce data. Visualforce follows the model-view-controller pattern, with standard and custom objects as the model, Apex code as the controller logic, and Visualforce tags as the interface view. Visualforce tags have a prefix indicating the component library and attributes like value and name to pass data to the component. The document demonstrates the anatomy of a Visualforce tag and discusses using over 140 standard tags or creating custom reusable components. It encourages users to try Visualforce and provides developer resources for help and learning.

1. Coding the
Salesforce User
Interface with
Visualforce Pages

2. Welcome
Simon Goodyear
Advanced Developer
Force.com MVP
@simongoodyear

3. What is Visualforce?
• A Framework for building custom user interfaces for
your Salesforce data
• 100% native, hosted in your Salesforce org
• Component based, tag based syntax

4. Model View Controller (MVC) Pattern
Model Controller View
Your Data Your Logic Your Interface
Standard and
Custom Objects
Standard Controllers +
Apex Code

5. Anatomy of a Visualforce Tag
<apex:outputField value = “{!account.Name}”/>
Prefix – Library the Component belongs to (apex, chatter etc.)
Component Name – Type of Component to be generated
Attribute Value – String literal or merge field value passed to the Component
Attribute Name – The name of a value to be passed to the Component

6. Anatomy of a Visualforce Tag
<apex:outputField value = “{!account.Name}”/>

7. Use the Expansive Tag Library…
 140+ tags to choose from (more
included through releases)
 Apply SF standard styling easily
 Create fields, actions, charts,
– forms and chatter feeds
<apex:actionFunction>
<apex:actionPoller>
<apex:actionRegion>
<apex:actionStatus>
<apex:actionSupport>
<apex:areaSeries>
<apex:attribute>
<apex:axis>
<apex:barSeries>
<apex:canvasApp>
<apex:chart>
...

8. …Or Roll Your Own
 Visualforce integrates easily with other standard web
tech:
– HTML
– Javascript
– CSS
• Create your own custom reusable components

9. Demo
LET’S SEE SOME CODE!

10. What’s Next?
 Try It!
 Developer Resources
– developer.salesforce.com
 Visualforce Developer’s Guide
 Get help
– developer.salesforce.com/forums
– Stack Exchange

11. Assistez à notre atelier thématique pour les Développeurs
16h00 –16h40
Les applications web mobiles surSalesforce1
PrésentéparPeterChittum,EvangélistepourlesdéveloppeurschezSalesforce.com

12. La communauté dedéveloppeursSalesforce enFrance
 Paris: http://www.meetup.com/Paris-Salesforce-Developer-User-Group/
 St Quentin: http://www.meetup.com/Saint-Quentin-Salesforce-Developer-Group/

13. Thank You