Building Applications with Force.com and VisualForce(Dev401)(十八):Visualforce Pages: Introduction to Visualforce

Dev401-020:Visualforce Pages: Introduction to Visualforce

Course Objectives
1.Understand the benefits of using static resources and use them in pages.
2.Construct partial page refreshes using AJAX with Visualforce tags.
3.Create simple custom components.
4.Understand the concepts behind controllers, including their functionality and capabilities.

Assumptions
1.You have attention to detail.
2.You have basic HTML or XML skills.
3.You have an understanding of Force.com at the administrator level.
4.You are ready to learn.

Module Agenda
1.Visualforce Overview
2.Visualforce Basics

Two Types of Force.com User interface Technologies
1.page Builder
- UI generated automatically, not technical skill required
- Limited control over look and feel, but all Uis are consistent
- Limited/no control of UI behavior
2.Visualforce
- UI generated by developer/technologist
- Full control of UI behavior
- Full 'pixel level control over UI

Visualforce
1.Visualforce was officially released as part of the Summer '08 release.
2.It allows developers to completely replace the standard page layouts within the Salesforce UI with completely custom pages.
3.It uses Apex to incorporate advanced business logic functionality.

Visualforce Inline Editor
1.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.
- Access to the inline editor is available only in Development Mode.

- Visualforce pages can also be edited through the Force.com IDE 

 

Visualforce Content

1.Visualforce pages are ultimately rendered into markup.
2.This means that developers can include:
- Visualforce tags
- Force.com expressions
- HTML
- JavaScript
- Flash
- Any other code that can execute within an HTML page on Force.com
3.However, Visualforce often includes components (tags) that provide shortcuts that do the same thing with about 90% fewer lines of code that s-controls.

Visualforce Component Rendering
1.Each Visualforce component tag generates markup or other Web-enabled code behind the scenes to create the page.
2.The simplest example of this the image componet:
- this <apx:image id= "theImage" value="/img/myiamge.gif" width="220" height ="55"/>
- Becomes this:<img id= "theImage" value="/img/myiamge.gif" width="220" height ="55"/>
3.In most other examples, the component generats much more code and simplifies development.
4.To view the resulting code from any Visualforce page, right-click the page and select View Source.

Visualforce Benifits
1.Visualforce understands Salesforce metafdata and provides access to the respective user interface elements.
- For example, it automatically adds a calendar picker date entry fields.
2.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.
3.Many Visualforce components automatically recreate the standard Salesforce look and feel.
4.Visualforce pages are automatically ungraded to the next Salesforce release.
5.Visualforce separates the view of information from the navigation control and the data model.
- It conforms to the Model-View -Controller development pattern.

First, a primer on Model-View-Controller
1.Model:Business data and the rules for how to use the data
2.View:user interface details
3.Controller:manages the interactions between view & model

Visualforce Pages
1.A canvas similar to standard Web development model.
2.Composed of HTML, Page tags and merge fields.
3.Ability to reference any CSS, Flex, Flash, AJAX or other Web technology.
4.Supports standard query strings for parameters, referenced via /apex/pageName URL syntax.
5.Composed on the server, not the client.

Visualforce Components(Tags)
1.Create complex standard UI elements, such as detail areas and related lists,with a single tag.
2.Built in data biding to Salesforce data.
3.Special UI elements to handle common design solutions, such as templates and data iterations.
4.Built in AJAX functionality supporting partial page refresh.
5.Over 65 components at GA.
6.Accessed through <apex:tag> syntax.

Visualforce Controllers
1.Controllers contain the logic and data reference a page uses
2.As they are created in Apex, that have full access to Apex functionality(API,Web Service,etc)
3.Pages interact with controllers through components that call data or actions.
4.Can be used to maintain state across page interactions(in wizards, for example)

Visualforce Standard Controllers
1.Standard Controllers
- Are available for all APP entities/objects, such as Account, Contact, Opportunity, etc.,as well as custom objects.
- Provide access to standard Salesforce data and behavior.
. Standard object record data.
. Standard actions like save,edit,delete.
- Are referenced by using:
<Apex;page standardController = "Contact">

Visualforce Custom Controllers
1.Custom Controllers
- Are coded to create custom behaviors or non-standard data sets.
- Can be used to create wizards or leverage callouts
- Are invloked by using:
<apex;page controoler="MyController">

Visualforce Controller Extensions
1.Controller Extensions
- Add custom behavior or additional data to controllers
- Are Invoked by using: ,apex:page standardController="Contact", extensions="MyClass, MyOtherClass">

Expressions and Data Biding
1.Visualforce uses the expression syntax (also found in merge field,formuala and s-controls) to bind components to salesforce data and actions in the page's controller.
- All content in {!...} will be evaluated as an expression.
-{!$user.Firstname} shows the current user's first name in a page.
- data context is provided to controllers by yhe ID parameter, just as in standard pages.
.https://na1.salesforce.com/mypage?id=001000000007Erj

Versioning
1.Visualforce pages and components are version-ed.
2.Previous versions of Visualforce elements remain available after new implementations are introduced,ensuring that your code works with the new release.
3.The version settings tab displays the version of each page or component.

Visualforce namespaces
1.Standard tags begin with the word apex
- Ex: <apex;page>
Apex is the namespace
2.Custom tags begin with the letter c
- Ex:<c;customtag>
c is the namespace
3.Application developers can register custom namespaces to be displayed with custom tags instedd of the letter c.
- Ex:<thirdpartcompany;customtag>
thirdpartcompany is the namespace

Incorporating Visualforce Pages
1.Visualforce pages can be incorporated into your Salesforce UI by:
- Creating links to reference the unique page URL.
- Overriding standard buttons to route to the new page
- Creating custom tables for the new page.
- Creating custom buttons and linked to route to the new page.
- Embedding pages into page layout(similar to inline s-controls).
- Adding pages to a dashboard.
- Using pages as custom help for a custom object.

Exercise 1-1: Creating a Visualforce Hello World
1.Goal(s):
- Create a simple Visualforce page.
2.Scenario:
- Universal Containers wants to get started using Visualforce. They need to understand the very basics of how to develop new pages.
3.Task:
- Enable Development Mode.
- Create a simple new page.
- Update the page to include the 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.

Force.com Sites
1.Public, unauthenticated Web sites
2.Accessed from branded domain names
3.Built with Visualforce pages
4.From data and content in a Salesforce application

Force.com Site Use Cases
1.Build and run new Web applications with Force.com Sites
- Consumer reviews
- Hotel concierge service
- Event registration sites
2. Transform business applications into Websites
- Recruiting portal
3.Extend your Salesforce CRM applicaitons
- Interactive Web-to-lead forms
- Campaign landing pages
4.Run your corporate web site on our service
- Public Web sites
- Intranets

Module Review
1.What kind of content can be included in a Visualforce page?
Web content,Visualforce tags, Expression
2.What is the MVC pattern and how does it relate to Visualforce?
Model-View-Controller
3.What do {!expressions} refer to when used in Visaulforce components?
Data binding
4.What are the ways that Visaulpages can be in corporate into the rest of your user interface?
Overwrite
5.Is it always necessary to know Apex to create Visualforce pages? When does it become necessary?
No. Customization
6.What are some differences between Visualforce and s-controls?