Visualforce-5.显示记录、字段和表格(Display Records, Fields, and Tables)

1.输出组件(Output Components)

Visualforce 拥有近 150 个可在页面上使用的内置组件。

请求页面时，组件会呈现为 HTML、CSS 或 JavaScript。

• 粗粒度组件(Coarse-grained components)：在单个组件中提供了大量功能，并且会向使用它的页面添加大量信息和用户界面。向页面快速添加大量功能
• 细粒度组件(Fine-grained components)：提供更核心的功能，使您能够设计外观和行为符合您需求的页面。更好地控制页面的特定细节

2.粗粒度组件(Coarse-grained components)

　　1.：将record的详细信息快速添加到使用标准控制器的页面。该 组件显示特定记录详细信息，以及相关记录的列表，例如联系人、个案、业务机会等。

　　注意，通过这个组件添加到页面的所有内容都使用 Salesforce Classic 样式

代码示例：

< apex:page standardController="Account">
    < apex:detail />

执行结果：

　　2.：使用 显示与当前记录相关的记录列表。

代码示例：不显示关联list：可以在 组件添加 relatedList="false"

< apex:page standardController="Account">
    < apex:detail relatedList="false"/>

显示个别关联list：在 行的下方，添加以下标记。

以下代码结果将除详细信息外，只显示【联系人】和【业务机会】两个关联list

< apex:page standardController="Account">
    < apex:detail relatedList="false"/>
    < apex:relatedList list="Contacts"/>
　　< apex:relatedList list="Opportunities" pageSize="5"/>

　　3.：和组合可以取代

　　4.

3.细粒度组件(Fine-grained components)

　　1.  ：显示记录中的单个字段，本身只输出字段的值。自动适应正在显示字段的数据类型，例如下面示例的货币类型数据，输出类型为货币，而不是上一篇文章看到的科学计数法

<apex:page standardController="Account">
    <apex:outputField value="{! Account.Name }"/>
    <apex:outputField value="{! Account.Phone }"/>
    <apex:outputField value="{! Account.Industry }"/>
    <apex:outputField value="{! Account.AnnualRevenue }"/>
apex:page>

预览结果：

将其封装在 中：

<apex:page standardController="Account">
    <apex:pageBlock title="Account Details">   
        <apex:outputField value="{! Account.Name }"/>
        <apex:outputField value="{! Account.Phone }"/>
        <apex:outputField value="{! Account.Industry }"/>
        <apex:outputField value="{! Account.AnnualRevenue }"/>
apex:pageBlock>
apex:page>

预览结果：

将其封装在 <apex:pageBlockSection> 中：

< apex:page standardController="Account">
    < apex:pageBlock title="Account Details">
        < apex:pageBlockSection >
            < apex:outputField value="{! Account.Name }"/>
            < apex:outputField value="{! Account.Phone }"/>
            < apex:outputField value="{! Account.Industry }"/>
            < apex:outputField value="{! Account.AnnualRevenue }"/>
        
    

预览结果：

4.迭代组件

可以使用迭代组件在自己的 Visualforce 标记中执行相同的操作。迭代组件处理类似项的集合，而不是单个值。

例如 {!Account.contacts} 是一个表达式，计算结果为客户的联系人列表。可以将此表达式与迭代组件一起使用，以创建包含这些相关联系人详细信息的列表或表格。

　　1. ：用于生成数据表，并带有平台样式。采用了 Salesforce Classic 样式

　　value 属性设置为前面提到的表达式 {!Account.contacts}。这是 使用的记录列表。

　　 将该记录分配给 的 var 属性中命名的变量（contact）

　　2. ：依次使用表示当前记录的 contact 变量来提取该记录的字段值。通过查找每个字段标签的方式来创建列标题。

<apex:page standardController="Account">
    <apex:pageBlock title="Contacts">
       <apex:pageBlockTable value="{!Account.contacts}" var="contact">
          <apex:column value="{!contact.Name}"/>
          <apex:column value="{!contact.Title}"/>
          <apex:column value="{!contact.Phone}"/>
       apex:pageBlockTable>
    apex:pageBlock>
apex:page>

执行结果：

　　3.

　　4.  

Resources

• Displaying Field Values with Visualforce
• Using the Visualforce Component Library
• Displaying Related Lists for Custom Objects
• Building a Table of Data in a Page
• Standard Component Reference

Output Components