要在 JavaScript 或其他支持 Web 的语言中引用 Visualforce 组件,您必须 为该组件的属性指定一个值。DOM ID 由组合构成 的属性 组件和属性 包含该元素的所有组件。ididid
使用全局变量简化 引用为 Visualforce 组件生成的 DOM ID,并减少对整个页面的一些依赖 结构。$Component要引用特定 Visualforce 组件的 DOM ID,请使用点表示法将组件路径说明符添加到 在页面的组件层次结构中分隔每个级别。例如 用。以引用 Visualforce 组件层次结构中同一级别的组件,或使用 …以指定更完整的组件路径。$Component$ComponentitemId$ComponentgrandparentIdparentIditemId路径说明符 与组件层次结构匹配:
$Component
- 在组件层次结构的当前级别,其中使用;然后$Component
- 在组件层次结构中每个连续的更高级别,直到 找到匹配项,或达到组件层次结构的顶层。
没有回溯,所以如果你尝试的 ID 匹配需要向上遍历然后向下遍历,它不会 火柴。以下示例说明了 的几种用法:
$Component
<apex:page >
<style>
.clicker { border: 1px solid #999; cursor: pointer;
margin: .5em; padding: 1em; width: 10em; text-align: center; }
</style>
<apex:form id="theForm">
<apex:pageBlock id="thePageBlock" title="Targeting IDs with $Component">
<apex:pageBlockSection id="theSection">
<apex:pageBlockSectionItem id="theSectionItem">
All the alerts refer to this component.
<p>The full DOM ID resembles something like this:<br/>
j_id0:theForm:thePageBlock:theSection:theSectionItem</p>
</apex:pageBlockSectionItem>
<!-- Works because this outputPanel has a parent in common
with "theSectionItem" component -->
<apex:outputPanel layout="block" styleClass="clicker"
onclick="alert('{!$Component.theSectionItem}');">
First click here
</apex:outputPanel>
</apex:pageBlockSection>
<apex:pageBlockButtons id="theButtons" location="bottom">
<!-- Works because this outputPanel has a grandparent ("theSection")
in common with "theSectionItem" -->
<apex:outputPanel layout="block" styleClass="clicker"
onclick="alert('{!$Component.theSection.theSectionItem}');">
Second click here
</apex:outputPanel>
<!-- Works because this outputPanel has a distant ancestor ("theForm")
in common with "theSectionItem" -->
<apex:outputPanel layout="block" styleClass="clicker"
onclick="alert('
{!$Component.theForm.thePageBlock.theSection.theSectionItem}');">
Third click here
</apex:outputPanel>
</apex:pageBlockButtons>
</apex:pageBlock>
<!-- Works because this outputPanel is a sibling to "thePageBlock",
and specifies the complete ID path from that sibling -->
<apex:outputPanel layout="block" styleClass="clicker"
onclick="alert('{!$Component.thePageBlock.theSection.theSectionItem}');">
Fourth click here
</apex:outputPanel>
<hr/>
<!-- Won't work because this outputPanel doesn't provide a path
that includes a sibling or common ancestor -->
<apex:outputPanel layout="block" styleClass="clicker"
onclick="alert('{!$Component.theSection.theSectionItem}');">
This won't work
</apex:outputPanel>
<!-- Won't work because this outputPanel doesn't provide a path
that includes a sibling or common ancestor -->
<apex:outputPanel layout="block" styleClass="clicker"
onclick="alert('{!$Component.theSectionItem}');">
Won't work either
</apex:outputPanel>
</apex:form>
</apex:page>
使用唯一 ID
在页面的每个层次结构段中,组件必须是唯一的。但是,Salesforce 建议 您使用的唯一 在页面上,您需要引用的每个组件以及任何组件 在引用它所需的组件层次结构中。idid
例如,假设您在一个页面中有两个数据表。 如果两个数据表都包含在同一个页块中,则它们必须 具有独特的属性。 如果每个都包含在单独的页面块中,则有可能 给他们相同的组件.但是,如果这样做,则引用特定数据的唯一方法 table 是将一个 to 每个组件,然后使用 完整的层次结构,而不是让 Visualforce 自动完成。如果页面层次结构发生更改,则程序 将不再起作用。ididid
使用组件 ID 进行迭代
某些组件(如表和列表)支持迭代 超过记录集合。为这些类型分配 ID 后 的组件,系统分配一个唯一的“复合 ID” 根据初始 ID 对组件进行每次迭代。例如,以下页面包含一个 ID 设置为 。
theTable
<apex:page standardController="Account" recordSetVar="accounts" id="thePage">
<apex:dataTable value="{!accounts}" var="account" id="theTable">
<apex:column id="firstColumn">
<apex:outputText value="{!account.name}"/>
</apex:column>
<apex:column id="secondColumn">
<apex:outputText value="{!account.owner.name}"/>
</apex:column>
</apex:dataTable>
</apex:page>
呈现页面时,组件结果 在以下 HTML 中:
<apex:dataTable>
<table id="thePage:theTable" border="0" cellpadding="0" cellspacing="0">
<colgroup span="2"/>
<tbody>
<tr class="">
<td id="thePage:theTable:0:firstColumn">
<span id="thePage:theTable:0:accountName">Burlington Textiles</span>
</td>
<td id="thePage:theTable:0:secondColumn">
<span id="thePage:theTable:0:accountOwner">Vforce Developer</span>
</td>
</tr>
<tr class="">
<td id="thePage:theTable:1:firstColumn">
<span id="thePage:theTable:1:accountName">Dickenson</span>
</td>
<td id="thePage:theTable:1:secondColumn">
<span id="thePage:theTable:1:accountOwner">Vforce Developer</span>
</td>
</tr>
</table>
每个表格单元格都有一个唯一的 ID,该 ID 基于 包含组件的 ID 值。中的第一个表单元格 第一行有 ID,第一行的第二个单元格有 ID,第一行有 ID 第二行中的单元格具有 ID,依此类推。
thePage:theTable:0:firstColumnthePage:theTable:0:secondColumnthePage:theTable:1:firstColumn
要引用列中的所有条目,您有 遍历表行,引用 ID 如下的每个元素 列的格式。<td>
相同类型的 ID 生成是 对表格单元格中的元素执行。例如,帐户 第一行中的 name 生成为 ID 为 。请注意,ID 不包括列的 ID 值 它进来了。spanthePage:theTable:0:accountName
静态资源的最佳实践
显示属性为 的静态资源的内容action<apex:page>您可以 使用属性 在组件上 从 Visualforce 页面重定向到静态资源。此功能允许您添加 为您的 Visualforce 页面提供丰富的自定义帮助。例如,要将用户重定向到 PDF:
action<apex:page>
- 将 PDF 作为名为 customhelp 的静态资源上传。
- 创建以下页面:
<apex:page sidebar="false" showHeader="false" standardStylesheets="false" action="{!URLFOR($Resource.customhelp)}"> </apex:page>
请注意,静态资源引用包装在函数中。如果没有这个, 页面未正确重定向。
URLFOR此重定向是 不限于 PDF 文件。您还可以将页面重定向到内容 的任何静态资源。例如,您可以创建静态资源 其中包括一个由许多混合的 HTML 文件组成的整个帮助系统 使用 JavaScript、图像和其他多媒体文件。只要有 是单个入口点,重定向有效。例如:
- 创建一个包含帮助内容的 zip 文件。
- 将 zip 文件作为名为 customhelpsystem 的静态资源上传。
- 创建以下页面:
<apex:page sidebar="false" showHeader="false" standardStylesheets="false" action="{!URLFOR($Resource.customhelpsystem, 'index.htm')}"> </apex:page>
当用户访问该页面时,将显示静态资源中的 index.htm 文件。
控制器和控制器的最佳实践 扩展
在控制器中强制执行共享规则像其他 Apex 一样 类、自定义控制器和控制器扩展在系统中运行 模式。通常,您需要一个 控制器或控制器扩展,以尊重用户的 组织范围的默认值、角色层次结构和共享规则。你可以做 通过在类定义中使用关键字。with sharing有关信息,请参阅《使用 、 和关键字》中的“使用 Apex 开发人员 指南。with sharingwithout sharinginherited sharing
注意
如果 控制器扩展扩展了一个标准控制器,逻辑来自 标准控制器不在系统模式下执行。相反,它 在用户模式下执行,其中权限、字段级安全性和 当前用户的共享规则适用。控制器构造函数在 Setter 方法之前进行计算不要依赖于在构造函数之前计算的 setter 方法。为 例如,在以下组件中,组件的控制器依赖于 被召唤的 setter 在构造函数方法之前:selectedValue
<apex:component controller="CustCmpCtrl">
<apex:attribute name="value" description=""
type="String" required="true"
assignTo="{!selectedValue}">
</apex:attribute>
//...
//...
</apex:component>
public class CustCmpCtrl {
// Constructor method
public CustCmpCtrl() {
if (selectedValue != null) {
EditMode = true;
}
}
private Boolean EditMode = false;
// Setter method
public String selectedValue { get;set; }
}
因为 构造函数在 setter 之前调用,调用构造函数时将始终为 null。 因此,永远不会设置为 真。selectedValueEditMode方法可以多次评估 – 不要使用副作用方法,包括控制器中的方法、操作属性和表达式, 可以多次调用。不要依赖于评估顺序或副作用 在控制器或控制器扩展中创建自定义方法时。
使用组件分面的最佳实践
分面由区域中的内容组成 提供有关数据的上下文信息的 Visualforce 组件 这在组件中呈现。例如,支持分面 用于表格的页眉、页脚和标题,而仅支持 facet 用于列的页眉和页脚。该组件允许 您可以使用自己的内容覆盖 Visualforce 组件上的默认分面。分面只允许一个子项 在开始和结束标记中。
<apex:dataTable><apex:column><apex:facet>
注意
并非所有组件 支持分面。这些列在标准组件参考中。
定义 时,它始终用作另一个 Visualforce 组件的子组件。属性 在 Facet 上确定覆盖父组件的哪个区域。<apex:facet>name
示例:将 Facet 与 <apex:dataTable> 一起使用
以下标记显示了组件如何 修改为:
<apex:dataTable><apex:facet>
<apex:page standardController="Account">
<apex:pageBlock>
<apex:dataTable value="{!account}" var="a">
<apex:facet name="caption"><h1>This is
{!account.name}</h1></apex:facet>
<apex:facet name="footer"><p>Information
Accurate as of {!NOW()}</p></apex:facet>
<apex:column>
<apex:facet name="header">Name</apex:facet>
<apex:outputText value="{!a.name}"/>
</apex:column>
<apex:column>
<apex:facet
name="header">Owner</apex:facet>
<apex:outputText value="{!a.owner.name}"/>
</apex:column>
</apex:dataTable>
</apex:pageBlock>
</apex:page>
注意
要使此页面显示帐户数据,ID 必须在 页面的 URL。例如:
https://Salesforce_instance/apex/facet?id=001D000000IRosz
页面显示如下:
使用 Facet 扩展 <apex:dataTable>
将 Facet 与 <apex:actionStatus 一起使用>
另一个可以使用分面的组件是 。组件 可以扩展为在刷新页面时显示指示器。 例如,您可以使用以下标记定义进度轮:
<apex:actionStatus><apex:actionStatus>
<apex:page controller="exampleCon">
<apex:form >
<apex:outputText value="Watch this counter: {!count}" id="counter"/>
<apex:actionStatus id="counterStatus">
<apex:facet name="start">
<img src="{!$Resource.spin}"/> <!-- A previously defined image -->
</apex:facet>
</apex:actionStatus>
<apex:actionPoller action="{!incrementCounter}" rerender="counter"
status="counterStatus" interval="7"/>
</apex:form>
</apex:page>
关联的控制器更新 计数器:
public class exampleCon {
Integer count = 0;
public PageReference incrementCounter() {
count++;
return null;
}
public Integer getCount() {
return count;
}
}
页面显示如下:
使用 Facet 扩展 <apex:actionStatus>
页面块组件的最佳实践
将两个以上的子组件添加到<apex:pageBlockSectionItem>一个组件最多只能有两个子组件。不过,有时候, 您想要添加一个额外的子组件。例如,您可能需要 在之前添加星号,并且仍然显示关联的输入文本字段。你可以这样做 通过将星号和输出标签包装在组件中, 如下:<apex:pageBlockSectionItem><apex:outputLabel><apex:outputPanel>
注意
要使此页面显示帐户数据,ID 必须在 页面的 URL。例如:
https://Salesforce_instance/apex/myPage?id=001D000000IRosz
<!-- Page: -->
<apex:page standardController="Account">
<apex:form >
<apex:pageBlock title="My Content" mode="edit">
<apex:pageBlockSection title="My Content Section" columns="2">
<apex:pageBlockSectionItem >
<apex:outputPanel>
<apex:outputText>*</apex:outputText>
<apex:outputLabel value="Account Name" for="account__name"/>
</apex:outputPanel>
<apex:inputText value="{!account.name}" id="account__name"/>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
渲染 PDF 文件的最佳实践
将 Visualforce 页面呈现为 PDF 文件是共享有关 Salesforce 组织信息的好方法。这里有一些最好的 供您考虑的做法。
为了在渲染 Visualforce 页面时获得更好的性能,请参考静态图像和 通过 $Resource 全局的样式表资源 变量。
警告
在远程服务器上引用静态资源会增加所需的时间 将 Visualforce 页面呈现为 PDF 文件。将远程服务器添加到允许的远程站点列表:在“设置”中,输入“快速查找”框,然后选择“远程站点设置”。使用时无法引用远程资源 Visualforce 以 顶点触发器。这样做会导致异常。Remote Sites Settings
<apex:panelbar> 的最佳实践
将子组件的集合添加到组件<apex:panelBarItem><apex:panelBar>一个组件只能有子组件。但是,有时您想要添加一个集合 的子组件。例如,您可能希望为 与一个帐户关联的每个联系人。您可以通过包装组件来执行此操作,如下所示:<apex:panelBar><apex:panelBarItem><apex:panelBarItem><apex:repeat>
注意
要使此页面显示帐户数据,有效帐户的 ID 记录必须指定为页面 URL 中的查询参数。 例如:https:// Salesforce_instance/apex/myPage?id=001D000000IRosz
<apex:page standardController="account">
<apex:panelBar >
<apex:repeat value="{!account.contacts}" var="c">
<apex:panelBarItem label="{!c.firstname}">one</apex:panelBarItem>
</apex:repeat>
</apex:panelBar>
</apex:page>
文档排版约定
Apex 和 Visualforce 文档使用以下排版约定。
公约 | 描述 |
---|---|
Courier font | 在语法说明中,等宽字体表示应 如图所示键入,括号除外。例如:Public class HelloWorld |
Italics | 在语法描述中,斜体表示变量。您提供 实际值。在以下示例中,需要提供三个值:datatype variable_name [ = value];如果语法为粗体和斜体,则文本 表示需要您提供的值的代码元素,例如 类名或变量 价值:public static class YourClassHere { ... } |
Bold Courier font | 在代码示例和语法描述中,粗体 courier 字体强调 部分代码或语法。 |
< > | 在语法描述中,小于和大于符号 (< >) 是 键入的内容与所示完全相同。<apex:pageBlockTable value="{!account.Contacts}" var="contact"> <apex:column value="{!contact.Name}"/> <apex:column value="{!contact.MailingCity}"/> <apex:column value="{!contact.Phone}"/> </apex:pageBlockTable> |
{ } | 在语法说明中,大括号 ({ }) 的键入方式与所示完全相同。<apex:page> Hello {!$User.FirstName}! </apex:page> |
[ ] | 在语法描述中,括号中包含的任何内容都是可选的。在 以下示例中,指定 自选: valuedata_type variable_name [ = value]; |
| | 在语法描述中,竖线符号的意思是“或”。您可以 执行下列操作之一(不是全部)。在以下示例中,您可以创建一个 通过以下两种方式之一新建未填充的集,也可以填充集:Set<data_type> set_name [= new Set<data_type>();] | [= new Set<data_type{value [, value2. . .] };] | ; |