创建和编辑 Visualforce 页面

学习目标

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

• 阐述 Visualforce 页面的含义并描述其关键属性。
  
• 列举并打开组织中的现有 Visualforce 页面。
  
• 使用 Developer Console 创建和编辑 Visualforce 页面。
  
• 在编辑器中识别、添加和定制 Visualforce 标签和属性。
  

备注

用中文（简体）学习？在中文（简体）Trailhead Playground 中开始挑战，用括号中提供的译文完成挑战。仅复制并粘贴英文值，因为挑战验证基于英文数据。如果在中文（简体）组织中没有成功通过挑战，我们建议您 (1) 将区域设置切换为美国，(2) 按此处说明将语言切换为英文，(3) 再次单击“检查挑战”按钮。

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

创建 Visualforce 页面简介

Visualforce 页面是应用程序开发人员的基本构建块。Visualforce 页面类似于标准网页，但它包含访问、显示和更新组织数据的强大功能。页面可以通过唯一的 URL 进行引用和调用，就像在传统的 Web 服务器上一样。

Visualforce 使用类似于 HTML 的基于标签的标记语言。每个 Visualforce 标签对应一个粗粒度或细粒度的用户界面组件，例如页面的一部分，列表视图或单个字段。Visualforce 拥有近 150 个内置组件，并为开发人员提供了一种创建自己组件的方式。Visualforce 标记可以与 HTML 标记、CSS 样式以及 JavaScript 库自由组合，从而为您实现应用程序用户界面的方式提供了极大的灵活性。

在 Salesforce 中，您可以通过多种方式查看、创建和编辑 Visualforce 页面，还可以使用 Salesforce API 创建和修改 Visualforce 页面，从而启用各种外部工具。

在 Developer Console 中创建 Visualforce 页面

通过 Developer Console，您可以创建和编辑 Visualforce 页面，并访问其他功能强大的 Lightning 平台开发工具。Developer Console 具有自动语法突出显示、标签对匹配、自动建议和自动完成、智能缩进等功能，旨在为编辑标记和代码提供有益的帮助。当您在同一页面上工作一段时间时，或者对于具有自定义控制器、更长、更复杂的代码等的 Visualforce 页面时，它是最好的内置工具。

请按照以下步骤在 Developer Console 中创建 Visualforce 页面。

1. 在您的名字或快速访问菜单 () 下打开 Developer Console。Developer Console 将在新窗口中打开。
   
2. 单击 File（文件） | New（新建） | Visualforce Page（Visualforce 页面）。
   
3. 输入 HelloWorld 作为新页面的名称，然后单击确定。在 Developer Console 中将打开一个空白的 Visualforce 新页面。
   
4. 在编辑器中，为页面输入以下标记。
   

   <apex:page>
       <h1>Hello World</h1>
   </apex:page>

5. 单击 File（文件） | Save（保存）。
   
6. 要查看新页面，请单击 Preview（预览）。呈现的页面将在新窗口中打开。请注意，该页面预览显示您的页面缺少 Salesforce 样式。要在 Lightning Experience 上下文中查看您的页面，请返回您的 Lightning Experience 主浏览器窗口。打开浏览器的 JavaScript 控制台并输入以下代码。请不要忘记将 pageName 替换为您的页面名称。此 JavaScript 触发 Lightning Experience navigateToURL 事件，等同于在 Classic 中输入了 /apex/PageName URL。
   

$A.get("e.force:navigateToURL").setParams({"url": "/apex/pageName"}).fire();

7. 在编辑器中，将部分附加文本添加到页面中，然后保存。当您保存页面时，预览窗口会自动刷新以反映更改的内容。接下来我们会省略保存指令，但是您应该在每一个步骤之间保存页面。
   

8. 单击 File（文件） | Open（打开），以查看现有的 Visualforce 页面列表。双击打开此页面。您还可以打开其他 Salesforce 实体，例如 Apex 类和触发器、Visualforce 组件等。
   

使用自动建议添加属性

通过设置 Visualforce 组件属性来自定义组件行为。使用自动建议将属性和值快速添加到 Visualforce 组件标签。

按照以下步骤添加和修改 Visualforce 标签上的属性。

1. 在 HelloWorld 页面，在闭合 > 前的起始 <apex:page> 标签中单击。输入一个空格，然后输入 s。自动建议会针对您输入的信息列出您可能需要补全的内容。当您输入其他字符时，建议列表将缩减为仅匹配值。
   
2. 按向下箭头键，直到选中 sidebar（侧栏）。按回车键。Sidebar（侧栏）属性被添加至标记中的 <apex:page> 标签，并且自动建议功能会显示它的可能值。
   
3. 使用箭头键或输入 f 选择 false，然后按回车键。您的代码如下所示。
   

   <apex:page sidebar="false">
       <h1>Hello World</h1>
   </apex:page>

4. 保存更改。
   
5. 重复上述步骤将 showHeader="false” 添加到 <apex:page> 标签，并保存更改。您的代码如下所示。
   

   <apex:page sidebar="false" showHeader="false">
       <h1>Hello World</h1>
   </apex:page>

当您对要使用的组件以及每个属性的本质和用途都有所了解的情况下，推荐使用自动建议。特别是当您仍在学习 Visualforce 时，您需要经常参考标准组件引用，以了解存在哪些组件、组件都有哪些用途、以及如何使用和自定义组件等内容。

进阶学习

在 Salesforce Classic 中，sidebar 和 showHeader 属性的默认值是 true。但在 Lightning Experience 和 Salesforce 移动应用程序中，这些属性的值被覆盖，并且始终都是 false。无法抑制 Lightning Experience 标头。

该页面包含一些 Salesforce 样式表，可让您匹配 Salesforce 选择的字体、大小等。要抑制 Salesforce 的所有输出，同样需要添加 standardStylesheets="false" 来删除样式。

添加并组成组件以形成页面结构

将组件添加到您的 Visualforce 页面并对组件进行排列，以构建页面结构。

按照以下步骤向页面添加新的 Visualforce 标记，并使用这些标记为页面创建结构。

1. 在 HelloWorld 页面中的 “Hello World” 文本下方添加 <apex:pageBlock> 组件。<apex:pageBlock> 是一种结构化的用户界面元素，用于对页面上的相关项目进行分组。使用自动建议添加该界面元素，并将标题属性设置为 “A Block Title”。
   
2. 在 <apex:pageBlock> 组件内添加 <apex:pageBlockSection> 组件。将标题属性设置为 “A Section Title”。<apex:pageBlockSection> 是向页面添加结构和层级的另一个组件。显示时，用户可以折叠 <apex:pageBlockSection> 元素以隐藏除节标题以外的所有元素。
   
3. 在 <Theapex:pageBlockSection> 组件中添加一些文本，例如 I’m three components deep!。您的代码如下所示。
   

   <apex:page>
       <h1>Hello World</h1>
       <apex:pageBlock title="A Block Title">
           <apex:pageBlockSection title="A Section Title">
               I'm three components deep!
           </apex:pageBlockSection>
       </apex:pageBlock>
   </apex:page>

   您有一个显示部分结构的页面，页面包含顶级标题、带有标题的可折叠章节和一些纯文本。 
   
   
4. 添加第一个组件之后，再添加一个 <apex:pageBlockSection> 组件，并将标题设置为 “A New Section”。与您在第一个组件 <apex:pageBlockSection> 的操作类似，现在向组件主体添加一些文本。您的代码如下所示。
   

   <apex:page>
       <h1>Hello World</h1>
       <apex:pageBlock title="A Block Title">
           <apex:pageBlockSection title="A Section Title">
               I'm three components deep!
           </apex:pageBlockSection>
           <apex:pageBlockSection title="A New Section">
               This is another section.
           </apex:pageBlockSection>
       </apex:pageBlock>
   </apex:page>

   注意 <apex:pageBlockSection> 标签嵌套在 <apex:pageBlock> 标签内的方式。如果不将子标签 <apex:pageBlockSection> 放入父标签 <apex:pageBlock> 中，则无法使用子标签。
   

您已经学习了页面组合的所有基础知识，包括创建页面、向页面添加属性和组件、对页面组件进行排列，为页面搭建结构并优化设计等。

了解详细信息...

Developer Console 是功能强大且齐全的工具，用于 Salesforce 组织内部的 Lightning 平台开发。

还有两种内置方法可用在 Salesforce 中创建和编辑 Visualforce 页面。

• 开发模式下的 quick fix（快速修复）和页脚是快速创建新页面或对现有页面进行简短编辑的快捷方式。适用于快速更改或创建一个简短页面，并在其合并到应用程序页面之前在空白板上测试一些新代码。
  
• 通过在“快速查找”框中输入 “Visualforce 页面”，然后选择 Visualforce Pages（Visualforce 页面），可以在“设置”中使用设置编辑器，这是最基础的编辑器，但它提供了对 Developer Console 或开发模式页脚中不可用页面设置的访问。
  

您还可以使用 Visual Studio Code（一种轻量级且可扩展的代码编辑器）开发 Visualforce 页面。Salesforce Extensions for Visual Studio Code 包括用于在 Salesforce 平台上进行开发的工具。它提供了与开发组织（临时组织、sandbox 和 DE 组织）、Apex、Aura 组件和 Visualforce 合作的功能。

您添加到页面的 <apex:pageBlock> 和 <apex:pageBlockSection> 组件，呈现出与 Salesforce Classic 界面元素相匹配的用户界面。还有其他组件也可以匹配平台视觉样式，包括 <apex:pageBlockSectionItem> 和 <apex:pageBlockButtons>。您能猜出在 <apex:pageBlockSection> 中嵌套了哪个组件吗?

Visualforce 拥有近 150 个内置组件，可提供各种用户界面元素和行为。Visualforce 标准组件引用中列出了这些组件，并记录了它们的属性，包括如何使用组件的示例代码。

资源

• Salesforce 帮助：创建 Visualforce 页面
• Salesforce 帮助：Developer Console 功能
• Salesforce 帮助：使用 Visualforce 编辑器
• Visualforce 开发人员指南：Visualforce 开发工具
• Visualforce 开发人员指南：标准组件引用
• Visual Studio Code 的 Salesforce 扩展
• Salesforce 开发人员博客：使用浏览器开发 Visualforce