标签： 创建和使用自定义组件

创建和使用自定义组件

Salesforce 提供了一个 可用于开发 Visualforce 页面的标准预构建组件库，例如 和 。在 此外，您可以构建自己的自定义组件来扩充此库。本章概述了自定义组件和 如何创建它们：

<apex:relatedList><apex:dataTable>

  • 什么是自定义组件？
  • 自定义组件标记
  • 在 Visualforce 页面中使用自定义组件
  • 自定义组件属性
  • 自定义组件控制器
  • 定义自定义组件

什么是自定义组件？

类似于封装一件作品的方式 代码，然后在 程序中，您可以将通用设计模式封装在自定义组件中 ，然后在一个或多个 Visualforce 页面中多次重复使用该组件。

例如，假设您要使用 Visualforce 页面。相册中的每张照片都有自己的边框颜色和文本 显示在其下方的标题。而不是重复 Visualforce 标记 需要 要显示相册中的每张照片，您可以定义自定义组件 named 具有 image、边框颜色和标题，然后使用这些属性来显示 页面上的图像。定义后，组织中的每个 Visualforce 页面都可以 利用 与页面可以利用标准组件（如 或 ）的方式相同。singlePhotosinglePhoto<apex:dataTable><apex:relatedList>与页面模板不同，页面模板也使开发人员能够重用 标记、自定义组件提供了更强大的功能和灵活性，因为：

  • 自定义组件允许开发人员定义可传递到 每个组件。然后，属性的值可以更改标记的方式 显示在最后一页上，以及执行的基于控制器的逻辑 该组件的实例。此行为与模板的行为不同， 无法从使用 模板添加到模板的定义本身。
  • 自定义组件描述显示在应用程序的组件中 参考对话框以及标准组件描述。模板 另一方面，描述只能通过“设置”区域引用 Salesforce，因为他们是 定义为页面。

定义自定义组件

要定义用于 Visualforce 页面的自定义组件，请执行以下操作：

  1. 在 Salesforce 的“设置”中，输入“快速” “查找”框，然后选择“Visualforce 组件”。Components
  2. 单击“新建”。
  3. 在“标签”文本框中，输入应用于 在设置工具中识别自定义组件。
  4. 在“名称”文本框中，输入应标识此名称的文本 Visualforce 标记中的自定义组件。此名称只能包含下划线和 字母数字字符，并且在您的组织中必须是唯一的。它必须以字母开头，而不是 包含空格，不以下划线结尾，不包含两个连续 强调。
  5. 在“说明”文本框中，输入自定义项的文本说明 元件。此描述与其他标准一起出现在组件参考中 单击“保存”后立即查看组件描述。
  6. 在正文文本框中，输入自定义的 Visualforce 标记 组件定义。单个组件最多可以容纳 1 MB 的文本，或者大约可以容纳 1,000,000 个字符。
  7. 单击“版本设置”以指定 Visualforce 的版本，然后 与此组件一起使用的 API。您还可以为任何托管软件包指定版本 安装在您的组织中。
  8. 单击“保存”以保存更改并查看自定义 组件的详细信息屏幕，或单击“快速保存”以保存 更改并继续编辑组件。您的 Visualforce 标记必须在 您可以保存组件。

注意

您还可以通过添加对自定义组件的引用，在 Visualforce 开发模式下创建自定义组件 尚不存在的 Visualforce 页面标记。保存标记后，将显示一个快速修复链接，该链接显示 允许您创建新的组件定义（包括任何指定的 attributes） 基于您为组件提供的名称。

例如，如果您尚未定义 自定义组件命名并插入到现有页面标记中，单击“保存”后，快速修复允许 您可以定义一个新的自定义组件，该组件使用以下默认值命名 定义：myNewComponent<c:myNewComponent myNewAttribute=”foo”/>myNewComponent

<apex:component>
  <apex:attribute name="myattribute" type="String" description="TODO: Describe me"/>
  <!-- Begin Default Content REMOVE THIS -->
  <h1>Congratulations</h1>
  This is your new Component: mynewcomponent
  <!-- End Default Content REMOVE THIS -->
</apex:component>

您可以修改此项 通过输入快速从设置中定义 “查找”框，然后选择“Visualforce 组件”，然后 ，然后单击 myNewComponent 自定义项旁边的编辑 元件。Components

创建组件后，您可以在 http:// yourSalesforceOrgURL/apexcomponent/nameOfNewComponent 中查看它。 其中用于访问您的 Salesforce 组织的 URL （例如，MyDomainName.my.salesforce.com） 和 value of 是自定义组件定义上“名称”字段的值。yourSalesforceOrgURLnameOfNewComponent

该组件的显示方式就好像它是 Visualforce 页面一样。 因此，如果组件依赖于属性或组件的内容 标记的正文，此 URL 可能会生成您意想不到的结果。查看更多 准确测试自定义组件，将其添加到 Visualforce 页面，然后查看该页面。

自定义组件标记

自定义组件的所有标记都在 一个标签。 此标记必须是自定义组件定义中的顶级标记。 例如：<apex:component>

<apex:component>
    <b>
        <apex:outputText value="This is my custom component."/> 
    </b>
</apex:component>

请注意，标记可以是 Visualforce 和 HTML 标记的组合，就像其他 Visualforce 页面一样。对于更复杂的示例，您可以使用自定义组件来 创建一个跨多个 Visualforce 页面使用的表单。创建一个新的自定义组件，并复制以下内容 法典：

recordDisplay

<apex:component>
    <apex:attribute name="record" description="The type of record we are viewing."
                    type="Object" required="true"/>
                     
    <apex:pageBlock title="Viewing {!record}">   
        <apex:detail />
    </apex:pageBlock>
</apex:component>

接下来，创建一个名为 法典：

displayRecords

<apex:page >
  <c:recordDisplay record="Account" />
</apex:page>

为 此示例要正确呈现，您必须关联 Visualforce 页面 在 URL 中具有有效的客户记录。例如，如果是账户 ID，则 生成的 URL 应 是：

001D000000IRt53

https://Salesforce_instance/apex/displayRecords?id=001D000000IRt53

你 应该会看到一个页面，其中包含有关您作为 同上。现在，将代码替换为以下示例：

displayRecords

<apex:page>
  <c:recordDisplay record="Contact" />
</apex:page>

同样，在之前传入联系人的 ID 刷新页面。您应该会看到页面显示有关以下方面的信息 您的联系人。

自定义组件属性包含有关使用组件的更多信息。<apex:attribute>

在 Visualforce 页面中使用自定义组件

标记的正文是添加到标准 Visualforce 页面的标记，每当 组件包括在内。例如，以下 Visualforce 页面使用该组件 在自定义组件标记中定义（在此示例中，组件使用名称保存）：<apex:component>myComponent

<apex:page standardController="Account">
   This is my <i>page</i>. <br/>
   <c:myComponent/>
</apex:page>

它产生以下输出：

This is my page.
This is my custom component.

要在 Visualforce 页面中使用自定义组件，您必须在 组件的名称，其中包含定义组件的命名空间。例如，如果 命名的组件在 命名空间调用，组件可以 在 Visualforce 页面中引用为 .myComponentmyNS<myNS:myComponent>

为了便于使用，在 命名空间作为关联页面也可以使用命名空间前缀。因此，如果定义了上述示例中的页面和组件 在同一命名空间中，可以将组件引用为 。c<c:myComponent>

如果要将内容插入到自定义组件中，请使用 <apex：componentBody> 标记。

与标准组件类似，当更新或编辑自定义组件时， 引用它的 Visualforce 页面也会更新。

管理自定义组件的版本设置

设置 Visualforce 的 Salesforce API 和 Visualforce 版本 页面或自定义组件：

  1. 编辑 Visualforce 页面或组件，然后单击版本设置。注意您只能修改 “版本设置”中页面或自定义组件的版本设置 选项卡，在“设置”中编辑页面或组件时。
  2. 选择 Salesforce API 的版本。这也是 与页面或组件一起使用的 Visualforce 版本。
  3. 点击保存。

自定义组件属性

除了标准的 Visualforce 标记外，正文 标签还可以指定 在 Visualforce 页面中使用自定义组件时可以传递到自定义组件的属性。的价值观 然后，可以直接在组件中使用此类属性，也可以在组件的控制器中使用（如果适用）。但是，它们不能被使用 在组件控制器的构造函数中。<apex:component>

属性是用标签定义的。例如，以下 自定义组件定义指定了两个必需的属性，分别名为 和 。这些属性的值在自定义中引用 使用标准 Visualforce 表达式语言的组件定义 语法：<apex:attribute>valuetextColor{! }

<apex:component>
    <!-- Attribute Definitions -->
    <apex:attribute name="myValue" description="This is the value for the component."
                    type="String" required="true"/>
    <apex:attribute name="textColor" description="This is color for the text."
                    type="String" required="true"/>

    <!-- Component Definition -->
    <h1 style="color:{!textColor};">
        <apex:outputText value="{!myValue}"/> 
    </h1> 
</apex:component>

在 Visualforce 页面中使用此组件，并使用 以下标记：

<c:myComponent myValue="My value" textColor="red"/>

标签需要以下值 、 和 属性：

<apex:attribute>namedescriptiontype

  • 该属性定义了 自定义属性可以在 Visualforce 页面中引用。名称必须是唯一的 跨组件，并且不区分大小写。例如，如果两个属性是 named 和 ，包对它们的处理方式相同， 可能会导致意外行为。name“Model”“model”
  • 该属性定义了 在组件参考库中出现一次的属性的帮助文本 自定义组件已保存。自定义组件列在 参考库，其中包含可用的标准组件。description
  • 该属性定义 Apex 属性的数据类型。仅允许以下数据类型作为值 对于属性：typetype
    • 基元，例如 String、Integer 或 Boolean。
    • sObject，例如 Account、My_Custom_Object__c 或泛型 sObject 类型。
    • 使用数组表示法指定的一维列表，例如 String[]， 或联系人[]。
    • 映射，使用 指定。您无需指定地图的 特定数据类型。type=”map”
    • 自定义 Apex 类。

有关其他属性的信息，请参阅 apex：attribute。<apex:attribute>

默认自定义组件 属性

始终为自定义组件生成两个属性。这些属性 不需要包含在组件定义中：id允许自定义组件被其他组件引用的标识符 组件。如果未指定，则唯一标识符为 自动生成。rendered一个 Boolean 值，该值指定是否呈现自定义组件 在页面上。如果未指定，则此值默认为 true。

自定义组件控制器

与标准 Visualforce 页面类似，自定义组件可以 与用 Apex 编写的控制器相关联。此关联是通过将组件上的属性设置为 自定义控制器。您可以使用控制器执行其他逻辑，然后再返回 组件的标记到关联页面。controller

访问控制器中的自定义组件属性

若要访问关联的自定义组件控制器中自定义组件属性的值，请执行以下操作：

  1. 在自定义组件控制器中定义一个属性，以存储 属性。
  2. 定义属性的 getter 和 setter 方法。为 例：public class myComponentController { public String controllerValue; public void setControllerValue (String s) { controllerValue = s.toUpperCase(); } public String getControllerValue() { return controllerValue; } }通知 setter 修改值。
  3. 在标签中 组件定义，使用该属性将该属性绑定到您刚刚定义的类变量。为 例：<apex:attribute>assignTo<apex:component controller="myComponentController"> <apex:attribute name="componentValue" description="Attribute on the component." type="String" required="required" assignTo="{!controllerValue}"/> <apex:pageBlock title="My Custom Component"> <p> <code>componentValue</code> is "{!componentValue}" <br/> <code>controllerValue</code> is "{!controllerValue}" </p> </apex:pageBlock> Notice that the controllerValue has been upper cased using an Apex method. </apex:component>注意 当使用属性时，getter 必须定义 setter 方法或具有 和 值的属性。assignTogetset
  4. 将组件添加到页面。例如<apex:page> <c:simpleComponent componentValue="Hi there, {!$User.FirstName}"/> </apex:page>

页面的输出将如下所示：

请注意，Apex 控制器方法已更改，因此它以大写形式显示 字符。

controllerValue