Skip to main content
Build the future with Agentforce at TDX in San Francisco or on Salesforce+ on March 5–6. Register now.

导航和编辑源代码

学习目标

完成本单元后，您将能够：
  • 创建 Apex 类。
  • 执行 Apex 代码。
  • 创建 Lightning 组件。
  • 创建 Visualforce 页面。
备注

备注

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

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

创建并执行 Apex 代码

现在，您已经对 Developer Console 有所了解，让我们用它来查看、修改和运行为飞船提供动力的各种系统。换句话说，让我们来看看如何编写代码！

创建 Apex 类

Apex 是一种 Salesforce 编程语言，可用于自定义组织中的各种业务流程。如果用华丽的词藻来形容，可以将 Apex 称为一种强大的、面向对象的语言，它允许开发人员在 Lightning 平台服务器上执行流程和事务控制语句，并结合对 Lightning 平台 API 的调用。或者，您可以将其称为一种编程语言，它看起来很像 Java 代码，还可以和组织中的数据进行交互。您可以使用它来添加业务逻辑。例如，Apex 可以提醒客户负责人，客户联系信息有所更改。

想要详细了解 Apex 及其运行方式，请查看 Apex 基础知识和数据库模块。现在，我们无需过分关注代码，我们的目标是了解 Developer Console。

假设现在您需要更改飞行轨道，以避开小行星 2014 QO441。但是您没有时间联系地面控制团队，告诉他们航向修改情况。我们来编写一些 Apex 代码，在每次更改飞行航向时都会向地面任务专家发送电子邮件。

  1. 在 Developer Console 中，选择文件 | 新建 | Apex 类。
  2. 出现提示时，将 Apex 类命名为 EmailMissionSpecialist。
  3. 文本编辑器打开后，将以下代码复制并粘贴到 EmailMissionSpecialist.apxc 选项卡中，以替换选项卡的原始内容。
    public class EmailMissionSpecialist {
   // Public method
   public void sendMail(String address, String subject, String body) {
      // Create an email message object
      Messaging.SingleEmailMessage mail = new Messaging.SingleEmailMessage();
      String[] toAddresses = new String[] {address};
      mail.setToAddresses(toAddresses);
      mail.setSubject(subject);
      mail.setPlainTextBody(body);
      // Pass this email message to the built-in sendEmail method 
      // of the Messaging class
      Messaging.SendEmailResult[] results = Messaging.sendEmail(
                                new Messaging.SingleEmailMessage[] { mail });
      // Call a helper method to inspect the returned results
      inspectResults(results);
   }
   // Helper method
   private static Boolean inspectResults(Messaging.SendEmailResult[] results) {
      Boolean sendResult = true;
      // sendEmail returns an array of result objects.
      // Iterate through the list to inspect results. 
      // In this class, the methods send only one email, 
      // so we should have only one result.
      for (Messaging.SendEmailResult res : results) {
         if (res.isSuccess()) {
            System.debug('Email sent successfully');
         }
         else {
            sendResult = false;
            System.debug('The following errors occurred: ' + res.getErrors());                 
         }
      }
      return sendResult;
   }
}
  4. 使用文件 | 保存保存代码。Developer Console 会进行检查，以确保保存代码时不包含任何错误。
    注意：如果代码的语法不正确，则“问题”选项卡中会显示错误。您可以使用错误详细信息来更正代码。
如果关闭此窗口，可以使用控制台打开此类或任何其他保存的 Apex 类。我们现在就来试一试。
  1. 要关闭 EmailMissionSpecialist 类，点击选项卡顶部的 EmailMissionSpecialist.apxc 旁边的“X”。
  2. 选择文件 | 打开。
  3. 在“实体类型”列中，单击类。从打开窗口中选择类
  4. 在“实体”列中，双击要打开的类。

执行 Apex 类

您已经创建了一个 Apex 类，下一步是使用 Developer Console 中方便易用的匿名执行功能来执行类。要测试代码及其结果时，这是一个很有用的工具。

但一定要小心操作。使用此功能运行的所有代码都会对组织产生影响。例如，如果在此处删除数据，也会在数据库中执行删除。

  1. 选择调试 | 打开执行匿名窗口。“输入 Apex 代码”窗口打开。
  2. 复制以下代码并将其粘贴到“输入 Apex 代码”窗口中。 
    EmailMissionSpecialist em = new EmailMissionSpecialist();
em.sendMail('Enter your email address', 'Flight Path Change', 
   'Mission Control 123: Your flight path has been changed to avoid collision '
   + 'with asteroid 2014 QO441.');
  3. 将输入您的电子邮件地址替换为自己的电子邮件地址。
  4. 单击执行，然后检查电子邮件，以查看消息是否已成功发送。

收到电子邮件时，就可以知道通信系统处于正常工作状态——而且离准备好避开那颗小行星又近了一步。

什么是 Lightning 组件？

Lightning 组件是一个用于开发移动和桌面应用程序的框架。您可以用它为 Lightning 平台应用程序创建响应式用户界面。Lightning 组件还支持更轻松地构建可跨移动和桌面设备顺畅运行的应用程序。

备注

从 Spring‘19 版本（API 版本 45.0）开始，您可以使用两种编程模型构建 Lightning 组件：Lightning Web Component 模型和原始 Aura 组件模型。Lightning Web Component 和 Aura 组件可在页面上共存和交互。此内容涵盖 Aura 组件。要了解有关 Lightning Web 组件的更多信息，请参阅 Lightning Web Component 基本知识模块。

您可以使用 Developer Console 创建 Aura 组件。使用 Developer Console，您可以创建组件捆绑包。组件捆绑包就像一个文件夹，它包含组件和所有其他相关资源，例如样式表、控制器和图案。

创建 Aura 组件

躲避小行星 2014 QO441 时，您一定会遇到其他人类，我们希望他们知道您是友好的，这样他们就不会向您开火。幸运的是，您飞船的侧面装有运行 Salesforce 应用程序的大型显示面板。（您知道，有一天这些面板肯定会派上用场！）我们来创建一个组件，用来向附近的任何其他宇宙飞船致意。
  1. 选择文件 | 新建 | Lightning 组件。弹出窗口会提示您输入名称和描述。
  2. 将组件命名为 meetGreet 并单击提交。窗口还可提供各种选项来配置应用程序选项卡、页面、记录页面和社区页面。您可以忽略这些选项。目前，我们只关注编写基本的 Aura 组件代码。
  3. 我们创建了两个选项卡。单击标记为 meetGreet.cmp 的选项卡。本文件包含 Aura 组件的开头和结尾标记。
  4. 在开头和结尾 <aura:component> 和 </aura:component> 标记之间，复制并粘贴此行。
       <p>Greetings, fellow humans! What’s your status?</p>
    meetGreet 标记
  5. 要保存组件，请选择文件 | 保存。

恭喜：您使用 Developer Console 创建了您的第一个 Aura 组件！要完整构建组件，还有几个步骤，但您可以将这项工作委派给一名船员。

现在，先抢先看一下窗口右侧的列表。它包含组件捆绑包中可用于构建组件的所有资源。单击右侧边栏中的任何项目，即可打开相应的资源。您可以在新资源中编写代码，来构建组件捆绑包的不同部分。例如，您可以使用“样式”资源向应用程序添加视觉元素，并使用“助手”添加业务逻辑。

Lighning 组件捆绑包
以下是打开保存的 Aura 组件或任何这些资源的方法。
  1. 选择文件 | 打开 Lightning 资源。
  2. 在搜索框中键入组件名称以查找捆绑包，或从列表中选择其文件夹。
  3. 要查看捆绑包的资源，单击文件夹旁边的箭头。打开 Lightning 资源
  4. 选择要处理的资源，然后单击打开所选资源。

创建 Visualforce 页面和组件

您学习了如何使用控制台创建 Apex 代码和 Aura 组件。现在，我们来介绍 Visualforce。

Visualforce 是一个 Web 开发框架，用于为移动和桌面应用程序构建复杂的用户界面。这些界面托管在 Lightning 平台上。您的用户界面可以看上去像标准的 Salesforce 界面，也可以对其进行自定义。

现在，您一定想知道，Visualforce 和 Lightning 组件之间有什么区别？Visualforce 以页面为中心：保存记录时，Visualforce 页面会与服务器交互并重新加载用户界面 (UI)。相比之下，Lightning 组件框架会在设备（专业的说法叫做客户端）上完成大部分工作。如果您想了解更多信息，请查看 Lightning Web Components for Visualforce Developers（适用于 Visualforce 开发人员的 Lightning Web 组件）模块。

如果想探索 Visualforce 的世界，请查看 Visualforce 基本知识模块。

但首先，让我们开始使用 Developer Console 构建 Visualforce 一个页面。准备好掌控全局！

创建 Visualforce 页面

您有一份“飞行系统检查表”，控制工程师会在执行发动机和油箱安全检查时每 2 小时更新一次。我们来创建一个可供他们用来报告发现结果的 Visualforce 页面。

功能性“飞行系统检查表”页面需要与存储控制工程师输入值的对象进行交互。但是，现在，我们主要关注创建 UI。您可以让下属创建这些自定义对象。

  1. 选择文件 | 新建 | Visualforce 页面。
  2. 将页面命名为 FlightSystemsChecklist。
  3. 在文本编辑器中，复制并粘贴以下代码。
    <apex:page sidebar="false">
<!--Flight Systems Checklist Visualforce Page-->
   <h1>Checklist</h1>
   <apex:form id="engineReadinessChecklist">
      <apex:pageBlock title="Flight Systems Checklist">
         <!--First Section-->
         <apex:pageBlockSection title="Engines">
            <!--Adding Checkboxes-->
            <apex:inputCheckbox immediate="true"/>Engine 1
            <apex:inputCheckbox immediate="true"/>Engine 2
            <apex:inputCheckbox immediate="true"/>Engine 3
            <apex:inputCheckbox immediate="true"/>Engine 4
            <apex:inputCheckbox immediate="true"/>Engine 5
            <apex:inputCheckbox immediate="true"/>Engine 6
         </apex:pageBlockSection>
         <!--Second Section-->
         <apex:pageBlockSection title="Fuel Tanks">
            <apex:inputCheckbox immediate="true"/>Tank 1
            <apex:inputCheckbox immediate="true"/>Tank 2
            <apex:inputCheckbox immediate="true"/>Tank 3
            <apex:inputCheckbox immediate="true"/>Tank 4
            <apex:inputCheckbox immediate="true"/>Tank 5
            <apex:inputCheckbox immediate="true"/>Tank 6
         </apex:pageBlockSection>
         <apex:pageBlockButtons>
            <!--Adding Save Button-->
            <apex:commandButton value="Save" action="{!save}"/>
         </apex:pageBlockButtons>
      </apex:pageBlock>
   </apex:form>
</apex:page>
  4. 选择文件 | 保存。
  5. 在左上角，单击预览。浏览器会打开 Visualforce 页面的预览。页面中的 Visualforce 标记（form、pageBlock、inputCheckbox 等）在预览中呈现。飞行系统 Visualforce 页面预览
我们来看看如何打开保存的 Visualforce 页面。
  1. 选择文件 | 打开。
  2. 在“实体类型”下，单击页面。
  3. 在“实体”下，双击要打开的页面。

您可以在 Developer Console 中使用任何或所有这些方法为组织创建、编辑和自定义应用程序。而且，到目前为止，您已经远离了小行星 2014 QO441 的运行轨道，没有做出任何危及船员安全的草率决定。

在 Salesforce 帮助中分享 Trailhead 反馈

我们很想听听您使用 Trailhead 的经验——您现在可以随时从 Salesforce 帮助网站访问新的反馈表单。

了解更多 继续分享反馈