Modular User Interfaces with Visualforce Components

1
Modular User Interfaces with Visualforce
Components
Track Tour de Force Mastering the Force.com
Platform

• Andrew Waite, salesforce.com

2
Safe Harbor Statement
Safe harbor statement under the Private
Securities Litigation Reform Act of 1995 This
presentation may contain forward-looking
statements including but not limited to
statements concerning the potential market for
our existing service offerings and future
offerings. All of our forward looking statements
involve risks, uncertainties and assumptions. If
any such risks or uncertainties materialize or if
any of the assumptions proves incorrect, our
results could differ materially from the results
expressed or implied by the forward-looking
statements we make. The risks and uncertainties
referred to above include - but are not limited
to - risks associated with possible fluctuations
in our operating results and cash flows, rate of
growth and anticipated revenue run rate, errors,
interruptions or delays in our service or our Web
hosting, our new business model, our history of
operating losses, the possibility that we will
not remain profitable, breach of our security
measures, the emerging market in which we
operate, our relatively limited operating
history, our ability to hire, retain and motivate
our employees and manage our growth, competition,
our ability to continue to release and gain
customer acceptance of new and improved versions
of our service, customer and partner acceptance
of the AppExchange, successful customer
deployment and utilization of our services,
unanticipated changes in our effective tax rate,
fluctuations in the number of shares outstanding,
the price of such shares, foreign currency
exchange rates and interest rates. Further
information on these and other factors that could
affect our financial results is included in the
reports on Forms 10-K, 10-Q and 8-K and in other
filings we make with the Securities and Exchange
Commission from time to time. These documents are
available on the SEC Filings section of the
Investor Information section of our website at
www.salesforce.com/investor. Salesforce.com, inc.
assumes no obligation and does not intend to
update these forward-looking statements, except
as required by law.
3
Agenda

• Introduction to Visualforce
• Anatomy of a custom component
• Simple Input Components
• Controllers for Components
• Delegation with ComponentBody
• Design Considerations
• Key Take-aways
• Q A

4
Introduction to Visualforce
Model
SObjects
Apex Classes
View
Components
Pages
Controller
Standard
Custom (Apex)
5
Visualforce Pages
View
Pages

• Canvas or design surface similar to standard
  Web development model
• Composed with components and HTML
• Reference any CSS, Flex, AJAX or other Web
  technology
• Name referenced, i.e. /apex/myPage
• Composed on the server, not the client
• Multiple means of editing
• In-place, Development Mode
• Force.com IDE (Eclipse)
• Setup
• SOAP API

6
Visualforce Components
View
Components

• Create Standard UI elements, such as detail areas
  and related lists, with a single tag
• Attribute data binding
• Special UI elements, such as tab panels and
  repeat (iterators)
• Built in AJAX functionality supporting partial
  page refresh
• 68 standard components

ltapexinputField value!contact.salutatio
n/gt
7
Why custom components? A. Once and only once for
UI
8
Custom Components - Smart Includes

• Markup Based Approach
• HTML, Javascript, CSS, etc.
• Leverage Standard/Custom components
• AJAX components
• Iteration
• Flash
• Includes with attributes

9
One Component?
10
Demo chelloWorld
11
Components of Custom Components

• apexcomponent
• Analagous to apexpage, defines the component
• Basic attributes
• controller, extensions
• apexattribute
• Defines an attribute that can be specified by the
  consumer
• Basic attributes
• name, type, required, description, assignTo
• apexcomponentBody
• Allows for consumer delegation
• Supports concept of default

12
Anatomy of a Simple Custom Component
Consumer Page
Component Definition
13
Self-documenting
14
Understanding Pass-through Binding
Consumer Page
Component Definition
15
Demo cinputSlider
16
Visualforce Controllers
Controller

• Controllers contain the logic and data references
  a page uses
• Separates presentation from logic
• Created in Apex code providing full access to
  Apex functionality (API, Web services, etc)
• Pages interact with controllers through
  components - data/action binding
• Maintain state across page interactions

17
Apex Controllers for Components
Controller

• Expose Capabilities of Apex
• SOQL/SOSL
• DML Operations
• Send Email
• Callouts
• Complex Algorithms
• Introduce Apex to Visualforce Email Templates

ltapexcomponent controllerMyController/gt
18
Demo crssFeed
19
Delegation to Component Consumer

• apexcomponentBody
• apexvariable

20
Demos chelloWorld, crssFeed
21
Design Considerations

• Optimize for the recommended use pattern
• Avoid SOQL/DML operations if component is
  expected to be used within iterations
• Consider Apex and Standard Controller page
  environments
• Compensate for Side-effects
• Expose a rerender pass through argument for
  actions invoking DML operations
• Use standard components for CSS/Javascript
• apexstyleSheet, apexincludeScript avoid
  duplication
• Naming Conventions
• Refer to standard component names and their
  attributes for guidance.

22
Manage. Share. Build. Apply what youve learned

• Custom Components are easy to
• create using simple markup
• maintain through reuse/single source
• use with self-documenting, strongly typed
  attributes
• Simplify complex interactions
• Simple interface to leverage
• Scoring algorithms
• Callouts
• SOQL Statements
• Enable wider audience

23
Session FeedbackLet us know how were doing and
enter to win an iPod nano!

• Please score the session from 5 to 1
  (5excellent,1needs improvement) in the
  following categories
• Overall rating of the session
• Quality of content
• Strength of presentation delivery
• Relevance of the session to your organization

Additionally, please fill in the name of each
speaker score them on overall delivery.
We strive to improve, thank you for filling out
our survey.
24
QUESTION ANSWER SESSION
Andrew Waite
salesforce.com
Director, Product Management