Building Applications with Force.com and VisualForce (DEV401) （二一）：Visualforce Componets (Tags) Library Part 1

Dev401-022:Visualforce Pages: Visualforce Componets (Tags) Library Part 1

Module Objectives
1.List key tags and define what their attributes control.
2.Create Visualforce pages that use these tags to create page layouts,inut forms,output tables,custom components and more.

Module Agenda
1.Layout Components
2.Coarse Metadata Component
3.Iteration Components
4.Output Components
5.Input Components
6.Static Resource Components
7.Utility Components
8.AJAX Components
9.Custom Component Components
10.Messaging Components

Layout Components
1.This group of components provide overall structure to the page or provide templates or frames to insert other content.
2.For the most part, they do no bind directly to salesforce data, but are focused more on containers and areas where to put those data-bound components.
http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_page.htm#kanchor1204
<apex:page standardController="Account">
  <!-- Begin Default Content REMOVE THIS -->
    <apex:form >
        <apex:pageBlock title="My Content" mode="edit" >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!save}" value="Save"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection title="My Content Section" columns="2">
                <apex:inputField value="{!account.name}"/>
                <apex:inputField value="{!account.site}"/>
                <apex:inputField value="{!account.type}"/>
                <apex:inputField value="{!account.accountNumber}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Tab Style
T1.he Salesforce object or custom Visualforce tab that controls the color, styling, and selected tab for this page. If using a custom object, the attribute must be specified with the developer name for the object. 
2.For example, to use the styling associated with MyCustomObject, use tabStyle="MyCustomObject__c". 
3.If a standard controller is specified, this defaults to the style of the associated controller; if a custom controller is defined, this defaults to the Home tab (if a custom controller). 
4.To use a custom Visualforce tab, set the attribute to the name (not label) of the tab followed by a double-underscore and the word tab. For example, to use the styling of a Visualforce tab with the name Source and a label Sources, use tabStyle="Source__tab".

Apex:include
1.A component that inserts a second Visualforce page into the current page. The entire page subtree is injected into the Visualforce DOM at the point of reference and the scope of the included page is maintained.
2.If content should be stripped from the included page, use the <apex:composition> component instead.
<!-- Page: -->                      
<apex:page id="thePage">
<apex:outputText value="(page) This is the page."/><br/>
<apex:include pageName="include"/>
</apex:page>

Apex:toolbar & Apex:toolbarGroup
1.A stylized, horizontal toolbar that can contain any number of child components. By default, all child components are aligned to the left side of the toolbar. Use an <apex:toolbarGroup> component to align one or more child components to the right.
2.Sample
  <apex:toolbar id="theToolbar">
        <apex:outputText value="Sample Toolbar"/>
        <apex:toolbarGroup itemSeparator="line" id="toobarGroupLinks">
            <apex:outputLink value="http://www.salesforce.com">
              salesforce
            </apex:outputLink>
            <apex:outputLink value="http://developer.salesforce.com">
             apex developer network
            </apex:outputLink>
        </apex:toolbarGroup>
        <apex:toolbarGroup itemSeparator="line" location="right" id="toobarGroupForm">
            <apex:form id="theForm">
                <apex:inputText id="theInputText">Enter Text</apex:inputText>
                <apex:commandLink value="search" id="theCommandLink"/>
            </apex:form>
        </apex:toolbarGroup>
    </apex:toolbar>

Apex:tabPanel & Apex:tab
1.A single tab in an <apex:tabPanel>. The <apex:tab> component must be a child of a <apex:tabPanel>.
2.Sample:
<apex:page id="thePage">
    <apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel">
    <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
    <apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
    </apex:tabPanel>
</apex:page>

Apex:panelBar &  Apex:panelBarItem
1.A page area that includes one or more <apex:panelBarItem> tags that can expand when a user clicks the associated header. When an <apex:panelBarItem> is expanded, the header and the content of the item are displayed while the content of all other items are hidden. When another <apex:panelBarItem> is expanded, the content of the original item is hidden again. An <apex:panelBar> can include up to 1,000 <apex:panelBarItem> tags.
2.Sample:
    <apex:panelBar>
        <apex:panelBarItem label="Item 1">data 1</apex:panelBarItem>
        <apex:panelBarItem label="Item 2">data 2</apex:panelBarItem>
        <apex:panelBarItem label="Item 3">data 3</apex:panelBarItem>
    </apex:panelBar>

Exercise 3-1"Recreating a Salesforce Detail Page
1.Goal(s):
- Create a visualforce page that mimics the Positions detail page.
2.Scenario:
- Universal Containers wants to get a basic understanding for Visualforce components by seeing what it would take to recreate a detail page bit by bit. In particular, they nee help with the layout components for the page.
3.Task:
- Add the pre-existing Visualforce page to your org and test it with an existing position.

Template Tags
1.Apex:define
A template component that provides content for an <apex:insert> component defined in a Visualforce template page.
See also: <apex:composition>, <apex:insert>
2.Sample:
<apex:page>
    <apex:outputText value="(template) This is before the header"/><br/>
    <apex:insert name="header"/><br/>
    <apex:outputText value="(template) This is between the header and body"/><br/>
    <apex:insert name="body"/>
</apex:page>
            
<!-- Page: page -->
<apex:page>
    <apex:composition template="composition">
        <apex:define name="header">(page) This is the header of mypage</apex:define>
        <apex:define name="body">(page) This is the body of mypage</apex:define>
    </apex:composition>
</apex:page>

Coarse Metadata Components
1.These tags provide a large amount of generated code for surprisingly little work to create familiar Salesforce structures.
- detail
- relatedList
- listViews
- enhancedList
2.They do not allow for much customization to the generated areas.
- Although, it is possible to build up identical sections using finer metadata and layout components.

Apex:detail
1.The standard detail page for a particular object, as defined by the associated page layout for the object in Setup. 
2.This component includes attributes for including or excluding the associated related lists, related list hover links, and title bar that appear in the standard Salesforce application interface.
3.Example
<!-- For this example to render properly, you must associate the Visualforce page 
with a valid account record in the URL. 
For example, if 001D000000IRt53 is the account ID, the resulting URL should be: 
https://Salesforce_instance/apex/myPage?id=001D000000IRt53
See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->
                        
<apex:page standardController="Account">
   <apex:detail subject="{!account.ownerId}" relatedList="false" title="false"/> 
</apex:page>

Apex:relatedList
1.A list of Salesforce records that are related to a parent record with a lookup or master-detail relationship.
2.Example
<!-- For this example to render properly, you must associate the Visualforce page
with a valid account record in the URL.
For example, if 001D000000IRt53 is the account ID, the resulting URL should be:
https://Salesforce_instance/apex/myPage?id=001D000000IRt53
See the Visualforce Developer's Guide Quick Start Tutorial for more information. -->              
<apex:page standardController="Account">
    <apex:pageBlock>
    You're looking at some related lists for {!account.name}:
    </apex:pageBlock>
    <apex:relatedList list="Opportunities" />
    <apex:relatedList list="Contacts">
        <apex:facet name="header">Titles can be overriden with facets</apex:facet>
    </apex:relatedList>
    <apex:relatedList list="Cases" title="Or you can keep the image, but change the text" />
</apex:page>

Apex:ListView
The list view picklist for an object, including its associated list of records for the currently selected view. In standard Salesforce applications this component is displayed on the main tab for a particular object.
See also: <apex:enhancedList>.
<apex:page showHeader="true" tabstyle="Case">
    <apex:ListViews type="Case" />
    <apex:ListViews type="MyCustomObject__c" />
</apex:page>

Apex:enhancedList
1.The list view picklist for an object, including its associated list of records for the currently selected view. In standard Salesforce applications this component is displayed on the main tab for a particular object. 
2.This component has additional attributes that can be specified, such as the height and rows per page, as compared to <apex:listView>.
3.Example
<apex:page>
    <apex:enhancedList type="Account" height="300" rowsPerPage="10" id="AccountList" />
    <apex:enhancedList type="Lead" height="300" rowsPerPage="25"
        id="LeadList" customizable="False" />
</apex:page>

Exercise 3-2:Creating pages using page Templates
1.Goal(s):
- Create a Visualforce page that constructs a page by using elements from another template page.
2.Scenario:
- Universal Containers wants to understand how to use template pages to construct pages. This will allow them to change the content of many pages at once if decide in the future to change the template in the future.
- Their example to start with is using the candidate page to display additional information (including a photo) of the candidate.
3.Task:
- 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.