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

Dev401-023:Visualforce Pages: Visualforce Componets (Tags) Library Part II

 

Apex:pageBlockTable
1.A list of data displayed as a table within either an <apex:pageBlock> or <apex:pageBlockSection> component, similar to a related list or list view in a standard Salesforce page. Like an <apex:dataTable>, an <apex:pageBlockTable> is defined by iterating over a set of data, displaying information about one item of data per row. The set of data can contain up to 1,000 items.
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. -->
<!-- Page: -->
<apex:page standardController="Account">
    <apex:pageBlock title="My Content">
        <apex:pageBlockTable value="{!account.Contacts}" var="item">
            <apex:column value="{!item.name}"/> 
        </apex:pageBlockTable> 
    </apex:pageBlock> 
</apex:page>

Apex:dataTable
1.An HTML table that is defined by iterating over a set of data, displaying information about one item of data per row. 
2.The body of the <apex:dataTable> contains one or more column components that specify what information should be displayed for each item of data. The data set can include up to 1,000 items.

Apex:column
1.A single column in a table. An <apex:column> component must always be a child of an <apex:dataTable> or 
<apex:pageBlockTable> component.
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 title="My Content">
        <apex:pageBlockTable value="{!account.Contacts}" var="item">
            <apex:column value="{!item.name}"/> 
            <apex:column value="{!item.phone}"/>
        </apex:pageBlockTable> 
    </apex:pageBlock> 
</apex:page>

Apex:Repeat
1.An iteration component that allows you to output the contents of a collection according to a structure that you specify. The collection can include up to 1,000 items.
2.This component cannot be used as a direct child of the following components:
- <apex:dataTable>
-<apex:pageBlockTable>
- <apex:panelBar>
- <apex:selectCheckboxes>
- <apex:selectList>
- <apex:selectRadio>
- <apex:tabPanel>

Exercise 3-3:Displaying Data in Tables in an Inline Page
1.Goal(s):
- create two different types of tables of data within an inline page.
2.Scenario:
- Universal Containers wants to display candidate and job application information on the position page. There's no reason to recreate the entire Position page,however,as they simply want to add a new section.
3.Tasks:
- Create the new visualforce page.
- Add the page to an inline section of the page layout.

Output Components
1.These tags all deal with displaying information without allowing the user to change any data.
2.many output components have parallel input components, such as iputField and outputField.

Apex:outputText
1.Displays text on a Visualforce page. You can customize the appearance of <apex:outputText> using CSS styles, in which case the generated text is wrapped in an HTML <span> tag. You can also escape the rendered text if it contains sensitive HTML and XML characters. This component does take localization into account.
2.Use with nested param tags to format the text values, where {n} corresponds to the n-th nested param tag. The value attribute supports the same syntax as the MessageFormat class in Java. See the MessageFormat class JavaDocs for more information.
3.Example:
<apex:page>
    <apex:outputText style="font-style:italic" value="This is {0} text with {1}.">
       <apex:param value="my"/>
       <apex:param value="arguments"/>
    </apex:outputText>
</apex:page>

Apex:outputLabel
1.A label for an input or output field. Use this component to provide a label for a controller method that does not correspond to a field on a Salesforce object.
2.Example
<apex:outputLabel value="Checkbox" for="theCheckbox"/>
<apex:inputCheckbox value="{!inputValue}" id="theCheckbox"/>

Apex:outputLink
1.A link to a URL. This component is rendered in HTML as an anchor tag with an href attribute. Like its HTML equivalent, the body of an <apex:outputLink> is the text or image that displays as the link. To add query string parameters to a link, use nested <apex:param> components.
See also: <apex:commandLink>
2.Example
<apex:outputLink value="https://www.salesforce.com" id="theLink">www.salesforce.com</apex:outputLink>

Apex:outputPanel
1.A set of content that is grouped together, rendered with an HTML <span> tag, <div> tag, or neither. Use an 
<apex:outputPanel> to group components together for AJAX refreshes.
2.Span Example
<!-- Spans do not add any additional formatting to the body of the outputPanel.  -->                       
<apex:outputPanel id="thePanel">My span</apex:outputPanel>

Apex:outputText
1.Displays text on a Visualforce page. You can customize the appearance of <apex:outputText> using CSS styles, in which case the generated text is wrapped in an HTML <span> tag. You can also escape the rendered text if it contains sensitive HTML and XML characters. This component does take localization into account.
2.Use with nested param tags to format the text values, where {n} corresponds to the n-th nested param tag. The value attribute supports the same syntax as the MessageFormat class in Java. See the MessageFormat class JavaDocs for more information.
3.Basic formatting example
<apex:page>
    <apex:outputText style="font-style:italic" value="This is {0} text with {1}.">
       <apex:param value="my"/>
       <apex:param value="arguments"/>
    </apex:outputText>
</apex:page>

Apex:message
A message for a specific component, such as a warning or error. If an <apex:message> or <apex:messages> component is not included in a page, most warning and error messages are only shown in the debug log.

Apex:form
1.A section of a Visualforce page that allows users to enter input and then submit it with an <apex:commandButton> or <apex:commandLink>. The body of the form determines the data that is displayed and the way it is processed. 
2.It's a best practice to verify that pages and custom components use at most one <apex:form> tag.
As of API version 18.0, this tag can't be a child component of <apex:repeat>.

Apex:inputField
1.An HTML input element for a value that corresponds to a field on a Salesforce object. The <apex:inputField> component respects the attributes of the associated field, including whether the field is required or unique, and the user interface widget to display to get input from the user. 
2.For example, if the specified <apex:inputField> component is a date field, a calendar input widget is displayed. When used in an <apex:pageBlockSection>, <apex:inputField> tags always display with their corresponding output label.

Apex:selectCheckboxes
A set of related checkbox input elements, displayed in a table.

Apex:selectList
A list of options that allows users to select only one value or multiple values at a time, depending on the value of its multiselect attribute.

Apex:selectRadio
A set of related radio button input elements, displayed in a table. Unlike checkboxes, only one radio button can ever be selected at a time.

Apex:inputFile
A component that creates an input field to upload a file.
Note: The maximum file size that can be uploaded via Visualforce is 10 MB.

Apex:commandButton
1.A button that is rendered as an HTML input element with the type attribute set to submit, reset, or image, depending on the <apex:commandButton> tag's specified values. The button executes an action defined by a controller, and then either refreshes the current page, or navigates to a different page based on the PageReference variable that is returned by the action.
2.An <apex:commandButton> component must always be a child of an <apex:form> component.
See also: <apex:commandLink>
<apex:commandButton action="{!save}" value="Save" id="theButton"/>

Apex:commandLink
A link that executes an action defined by a controller, and then either refreshes the current page, or navigates to a different page based on the PageReference variable that is returned by the action. An <apex:commandLink> component must always be a child of an <apex:form> component.
To add request parameters to an <apex:commandLink>, use nested <apex:param> components.
See also: <apex:commandButton>, <apex:outputLink>.
Example
<apex:commandLink action="{!save}" value="Save" id="theCommandLink"/>