使用表单输入数据

学习目标

完成本单元后，您将能够：

阐述 Visualforce 表单的基本要求。
区分使用与不使用平台视觉风格的 Visualforce 表单元素。
列出四个或四个以上的标准输入表单标签。
创建 Visualforce 表单以编辑和保存记录。

备注

用中文（简体）学习？在此徽章中，Trailhead 实践挑战验证使用英文。括号中提供了译文，用作参考。确保复制粘贴英文值，将 Trailhead Playground 切换为英语，将区域设置切换为美国。按此处说明进行。

查看 Trailhead 本地化语言徽章了解如何利用 Trailhead 译文。

Visualforce 表单简介

创建和编辑数据是应用程序的基础。Visualforce 提供您轻松创建页面所需的一切，通过这些页面可以创建新记录、检索记录、编辑值并将更改内容保存至数据库。

我们将标准控制器与 <apex:form> 组件和一些易于理解的表单元素相结合，以创建一个较复杂的记录编辑页面。

创建基础表单

使用 <apex:form> 和 <apex:inputField> 创建页面以编辑数据。将 <apex:commandButton> 与标准控制器中内置的保存操作相结合，以创建新记录，或保存对现有记录的更改。

允许编辑和更新记录的页面需要执行以下所有操作。

查找要编辑的记录并从数据库中检索记录。
将相关记录数据以可编辑的形式放置在页面上。
接收带有更改数据的表单提交。
验证新值。
将有效更改保存至数据库。
向提交更改的用户提供适当的消息，提示新数据是成功保存还是存在错误。

当您使用标准控制器和 <apex:form> 组件时，Visualforce 会自动为您完成大部分工作。

我们先从基础开始说起。

要创建新的 Visualforce 页面，请打开 Developer Console，然后单击 File（文件） | New（新建） | Visualforce Page（Visualforce 页面）。输入 AccountEdit 作为页面名称。

在编辑器中，将标记替换为以下内容。

<apex:page standardController="Account">
    <h1>Edit Account</h1>
    <apex:form>
        <apex:inputField value="{! Account.Name }"/>
        <apex:commandButton action="{! save }" value="Save" />
    </apex:form>
</apex:page>

单击 Preview（预览）可打开页面预览，您可以在进行更改时查看该预览。此时会打开一个新窗口，显示一个在正文中包含空白字段的表单。
在预览窗口中，将客户 ID 添加到 URL，然后按 ENTER。URL 应该是这样的：https://MyDomainName.lightning.force.com/apex/AccountEdit?core.apexpages.request.devconsole=1&id=001D000000JRBes。现在您应该会在表单字段中看到客户名称。

验证您是否使用了标准控制器和有效的记录 ID。

表单字段并不多，在六行标记中，您就有了一个用于更新客户名称功能齐全的表单。试一试！

这些都是了解表单的基础知识。

页面使用了 <apex:page> 组件中定义的客户标准控制器。
<apex:form> 是一个 Visualforce 组件，它将内部的所有内容打包成页面操作的一部分，并将其发送回服务器。如果您需要将数据发送回 Salesforce，大多数情况下您会在 <apex:form> 中进行。
<apex:inputField> 为与之关联的记录数据字段创建单页表单字段。您可以通过引用 value 属性中相关字段的表达式来实现。{!Account.Name } 就是这个表达式，应该很容易想到这是客户的名称字段。
最后，<apex:commandButton> 将一个按钮添加到页面的用户界面。单击此按钮时会触发一个操作。这种情况下，操作是标准控制器中的 save()操作方法。与 <apex:inputField> 一样，通过引用要提供给 <apex:commandButton> 操作属性的表达式中调用的操作方法，将 <apex:commandButton> 与操作关联起来。

添加字段标签和平台样式

将表单元素放置在 <apex:pageBlock> 和 <apex:pageBlockSection> 标签中以对其进行组织和分组，并让表单采用平台视觉样式。

让我们修订下表单，让它看起来更熟悉。

在 <apex:form> 组件内部，将两个表单元素封装在 <apex:pageBlock> 和 <apex:pageBlockSection> 标签中，因此您的标记看起来是这样的。

<apex:page standardController=”Account”>
	<apex:form>
		<apex:pageBlock title=”Edit Account”>
			<apex:pageBlockSection>
				<apex:inputField value=”{! Account.Name }”/>
			</apex:pageBlockSection>
			<apex:pageBlockButtons>
				<apex:commandButton action=”{! save }” value=”Save” />
			</apex:pageBlockButtons>
		</apex:pageBlock>
	</apex:form>
</apex:page>

该版本表单的样式完全不同！与输出组件类似，当您在 <apex:pageBlock> 和 <apex:pageBlockSection> 标签中使用输入组件时，它们会采用平台视觉样式。

在客户名称字段下方再添加三个字段，此时标记看起来是这样的。

<apex:pageBlockSection columns="1">
    <apex:inputField value="{! Account.Name }"/>
    <apex:inputField value="{! Account.Phone }"/>
    <apex:inputField value="{! Account.Industry }"/>
    <apex:inputField value="{! Account.AnnualRevenue }"/>
</apex:pageBlockSection>

现在您有一个更完整、更逼真的可行表单可以使用。使用平台样式编辑客户表单

<apex:inputField> 组件根据标准或自定义对象字段的类型呈现相应的输入小部件。例如，当您使用 <apex:inputField> 标记来显示日期字段时，表单上会显示一个日历小部件。如果您使用 <apex:inputField> 标签来显示选项列表字段，正如这里对行业字段的操作一样，会显示一个下拉列表。

<apex:inputField> 可用于捕获任何标准或自定义对象字段的用户输入，并尊重字段定义中设置的任意元数据，例如该字段是必需的还是唯一的，或者当前用户是否拥有查看或编辑权限。

显示表单错误和消息

使用 <apex:pageMessages> 显示任何表单处理错误或消息。

当出现问题时，您的页面应提供有用的反馈，例如缺少必填字段或字段值未通过验证。标准控制器会为您处理这一切。您只需要告诉标准控制器信息放置在页面的哪个位置。

在 <apex:pageBlock> 标签下，添加以下行。
<apex:pageMessages/>
试着删除客户名称，并使用空白名称保存记录。页面显示验证错误。

如您所见，<apex:inputField> 显示其自身字段的错误，但对于较长的表单，在页面顶部任意位置列出所有页面的错误是一种不错的选择。

处理表单时，标准控制器已经收集了所有页面的消息。通过 <apex:pageMessages> 组件，选择在您认为合适的位置显示这些信息。

编辑相关记录

提供相关记录的链接，方便用户编辑相关信息。

目前表单一次只允许编辑一条记录。确切来说，因为客户对象使用了标准控制器，因此表单仅允许更改客户记录。

对于用户来说，这并不总是最有效的工作流程。虽然您无法使用标准控制器在一个请求中保存多个对象类型的更改，但通过对这些记录执行编辑或删除等操作提供链接，您可以轻松地导航到相关记录。

在现有的 </apex:pageBlock> 结束标签下，添加以下标记。

<apex:pageBlock title="Contacts">
    <apex:pageBlockTable value="{!Account.contacts}" var="contact">
        <apex:column>
            <apex:outputLink
                value="{! URLFOR($Action.Contact.Edit, contact.Id) }">
                Edit
            </apex:outputLink>
            <apex:outputLink
                value="{! URLFOR($Action.Contact.Delete, contact.Id) }">
                Del
            </apex:outputLink>
        </apex:column>
        <apex:column value="{!contact.Name}"/>
        <apex:column value="{!contact.Title}"/>
        <apex:column value="{!contact.Phone}"/>
    </apex:pageBlockTable>
</apex:pageBlock>

客户联系人列表显示在客户编辑表单下方。编辑拥有相关联系人记录的客户

试着单击联系人的编辑链接。看看链接链向哪里？当您保存更改或单击该页面上的取消会怎么样？

<apex:pageBlockTable> 组件创建了一个包含客户联系人列表的表格。这里出现了带有 <apex:outputLink> 组件的列。使用了引用全局变量的 $Action 表达式，并将其与 URLFOR() 函数内的联系人 ID 组合在一起。结果是指向联系人的编辑或删除页面的链接，具体取决于引用的操作。对于使用这类表单用户来说，这可能是一个非常有用的快捷方式。

了解详细信息...

显然，关于为您的 Web 应用程序构建实用、可用的表单，还有很多东西需要学习。

对于初学者来说，Visualforce 提供了十多种输入组件，而不仅仅是 <apex:inputField>。<apex:inputField> 可以很好地与标准控制器配合使用，可用于直接编辑记录数据。对于使用自己的自定义控制器代码的页面，或者当表单输入不能直接映射到记录上的字段时，您可能需要了解其他方面的内容。大多数组件的名称都以 apex:input 开头，您可以在组件引用中找到这些组件。对于选择列表和单选按钮控件，查找名称以 apex:select 开头的组件。

对于打算在移动设备上使用的用户界面，您可能会想查看 <apex:input> 组件，该组件专用于 HTML5 页面，允许您使用各种功能，让生成的输入用户元素对移动设备更友好。

您在此处编写的代码使用了页面标准控制器提供的多种操作。调用所有或其中部分标准操作。有一个核心集可用于所有带有标准控制器的对象，但很多内置的标准对象都有您可以使用的附加操作。

说起操作，您可以添加操作来编辑和删除现有的相关联系人。如何添加创建新相关联系人的功能？它不像使用 create 操作来创建链接那么简单，倒跟 edit 和 delete 操作类似。这是因为这些操作作用于现有记录，而这些记录已经与关联客户建立了关系。但是当您创建新记录时，您需要自己建立关系。这需要您编写一些自己的自定义控制器代码。

资源