ponybai，作者白白随笔 - 第87页共104页

Salesforce API（4）Bulk

学习目标

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

描述异步请求与同步请求的不同之处。
在Workbench中使用REST Explorer创建批量作业。
通过向作业添加数据将数据导入到您的Salesforce组织。
监控工作的进展。
得到一份工作的结果。

批量API和异步请求

批量API基于REST原则，并针对大量数据集进行了优化。您可以使用它来异步插入，更新，插入或删除多个记录，这意味着您提交一个请求并稍后返回结果。 Salesforce在后台处理请求。
相反，SOAP和REST API使用同步请求，并针对一次更新几条记录的实时客户端应用程序进行了优化。您可以使用这两个API来处理许多记录，但是当数据集包含数十万条记录时，它们不太实用。批量API的异步框架旨在使处理从数千条到数百万条记录的数据变得简单高效。

使用Bulk API最简单的方法是使用CSV文件在Data Loader中处理记录。使用Data Loader，您不必编写自己的客户端应用程序。有时候，独特的需求需要编写一个自定义的应用程序。 Bulk API可以让您将自己的轮子放在您自己的手中，并引导课程走向适合您的解决方案。

对于本机，您使用称为批量API 2.0的较新版本的批量API。如果您想将本单元中学到的东西应用于之前支持的批量API版本，则需要使用不同的资源URI，并创建和管理批次以及作业。有关以前版本的Bulk API的更多信息，请参阅批量API开发人员指南。

将数据导入您的组织

要探索Bulk API，我们将使用Workbench创建一些帐户记录。

创建一个批量作业

批量API是基于REST的，因此我们可以使用Workbench的REST Explorer来制作批量API请求。

登录到您的Trailhead DE组织并导航到Workbench。
对于环境，请选择 Production. 对于API版本，请选择可用的最高编号。确保您选择 I agree to the terms of service.
点击 Login with Salesforce.
在顶部菜单中，选择 utilities | REST Explorer.

现在我们准备上传我们的数据了。第一步是创造一个工作。作业指定我们正在使用的操作和数据对象的类型。它起着一个桶的作用，我们添加数据进行处理。

我们将使用/ jobs / ingest资源来创建一个工作。此资源也可用于获取当前作业的列表。

为了创建一个工作，我们提交一个POST请求到/ jobs / ingest请求体内的作业属性。因为批量API是基于REST的，所以请求采用熟悉的REST请求形式，包含四个组件：URI，HTTP方法，头文件和正文。正如我们刚刚提到的，方法是POST。

对于URI，请将URI文本框中的文本替换为以下内容：/services/data/XX.0/jobs/ingest，其中XX.0对应于您正在使用的API版本。让我们注意一下这个URI的一些事情。

我们正在使用/ services / data，这是与REST API相同的端点。批量API使用与REST API使用的框架相同的框架，这意味着批量API支持许多相同的功能，例如OAuth认证。
与SOAP API类似，API版本号不包含v前缀。
/jobs/ingest 表示我们正在访问创建批量API作业的资源。

对于请求正文，请复制并粘贴以下文本。

{
  "operation" : "insert",
  "object" : "Account",
  "contentType" : "CSV",
  "lineEnding" : "CRLF"
}

您的REST资源管理器看起来像这样。

点击 Execute 并签出响应。

答复包括各种有关工作的属性，其中大部分现在对我们没有用处，因为我们还没有添加数据。虽然我们要注意一些属性。查看作业ID（id）并将其复制到文本文件中。我们用它来将数据添加到作业中，并检查作业的状态。还要检查州属性。创建作业时，立即将其设置为打开状态。这意味着它已经准备好开始接收数据。最后，看看contentUrl属性。该属性显示我们用来加载作业数据的URL。

将数据添加到作业

现在我们可以将帐户数据插入我们的工作。作业的数据作为PUT请求中的一组记录发送到服务器。服务器处理记录集，确定将数据加载到Salesforce中的最佳方式。你所要做的就是上传数据。

在Workbench中创建一个新的请求。将URI文本框中的文本替换为以下内容: /services/data/XX.0/jobs/ingest/jobID/batches. 用您复制的作业ID替换jobID。对于HTTP方法，请选择PUT。

对于这个例子，我们添加一组只有四个客户的记录。通常情况下，您使用Bulk API来添加数千或数百万条记录，但原理是一样的。将以下CSV文本复制到请求正文中。

"Name"
"Sample Bulk API Account 1"
"Sample Bulk API Account 2"
"Sample Bulk API Account 3"
"Sample Bulk API Account 4"

单击 Headers 并将Content-Type更改为 text/csv. 你的请求看起来像这样。

点击 Execute.

响应仅包含状态码201（已创建），表示Salesforce已成功接收作业数据。

关闭工作

现在我们已经提交了数据，我们需要让Salesforce知道是时候处理数据了。通过将作业状态从“打开”更改为“上传完成”来完成此操作。
将URI文本框中的文本替换为以下内容： /services/data/XX.0/jobs/ingest/jobID. 同样，将XX替换为您正在使用的API版本，并使用作业ID替换jobID。对于HTTP方法，选择PATCH。点击Headers并将Content-Type设置为application / json。在请求正文中，将文本替换为以下JSON文本。

{
   "state" : "UploadComplete"
}

检查作业的状态

我们已经提交了数据。我们让Salesforce知道我们已经完成上传数据。现在由服务器来处理请求。我们可以通过API或通过Salesforce UI检查作业的状态来监视服务器的进度。在Salesforce中，从“设置”中，在“快速查找”框中输入 Bulk Data Load Jobs. 然后选择批量数据加载作业。您可以在此页面上检查作业的状态。或者，您可以单击工作ID来检查状态并获得该工作的详细结果。

在API中，我们使用 /jobs/ingest/jobID 资源来监视作业。将URI文本框中的文本替换为以下内容： /services/data/XX.0/jobs/ingest/jobID, 并使用通常的替换。对于HTTP方法，请选择GET。

点击 Execute. 你看到这样的东西。

如果您的状态仍然是UploadComplete而不是JobComplete，则Salesforce仍在处理该作业。别担心，它会在几分钟内处理完毕。同时，当你回来的时候，去对待一杯美酒，再次尝试同样的要求。如果你很幸运，你的工作已经完成，继续取回工作结果，或者随时都可以休息一下。

获得工作结果

一旦作业处于JobComplete状态（或失败状态），我们就可以以成功和失败的处理记录的形式获取结果信息。我们先看看成功处理的记录。在Workbench的REST资源管理器中，将URI文本框中的文本替换为以下内容：/services/data/XX.0/jobs/ingest/jobID/successfulResults, 并使用通常的替换。对于HTTP方法，请选择GET。

点击 Execute. 你看到这样的东西。

Salesforce将返回一个CSV，其中包含已成功处理的作业中的所有记录的列表。在这个模块中，我们创建了多个Account记录。 CSV数据包含创建的记录的记录标识，sf__Created列的值为true。

偶尔有些记录不能被处理。也许这个工作试图创建已经存在的账户记录。也许工作数据缺少一些必填字段。在这些情况下，我们可以向Salesforce询问处理过程中出现错误的记录列表，以及有关错误的更多信息。

返回到REST资源管理器，将URI文本框中的文本替换为以下内容：

/services/data/XX.0/jobs/ingest/jobID/failedResults, 并使用通常的替换。对于HTTP方法，请选择GET。

点击 Execute. 结果看起来像这样。

Salesforce提供一个CSV，其中包含处理期间遇到错误的记录列表以及记录标识和错误消息。在这种情况下，所有记录都成功插入，所以记录列表是空的。整齐的工作，队长！

Salesforce API（3）SOAP

学习目标

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

为您的组织生成一个WSDL文件。
使用SoapUI从WSDL文件创建一个SOAP项目。
使用SOAP API登录您的DE组织。
使用SOAP API创建一个帐户。

企业和合作伙伴WSDL

如果您已经航行了另一个基于SOAP的API的海峡，您知道Web服务描述语言（WSDL）文件基本上是您了解如何使用API的地图。它包含进行API调用的绑定，协议和对象。
Salesforce为两种不同的使用情况提供了两个SOAP API WSDL。企业WSDL针对单个Salesforce组织进行了优化。它是强类型的，它反映了你的组织特定的配置，这意味着从两个不同的组织生成的两个企业WSDL文件包含不同的信息。

合作伙伴WSDL针对许多Salesforce组织进行了优化。它是松散的类型，它不会根据组织的特定配置进行更改。

通常，如果您要为单个Salesforce组织编写集成，请使用企业WSDL。对于多个组织，请使用合作伙伴WSDL。

对于这个单元，我们使用企业WSDL来研究SOAP API。第一步是为您的组织生成一个WSDL文件。在您的组织架构中，从快速查找框中输入API，然后选择API。在API WSDL页面上，单击 Generate Enterprise WSDL.

在“生成企业WSDL”页面上，单击“Generate”。生成WSDL时，右键单击页面并将WSDL文件保存在计算机上的某个位置。我们很快就会使用它。

这里有一个关于使用企业WSDL的技巧。企业WSDL反映了您的组织的特定配置，因此无论您何时对您的组织进行元数据更改，都需要重新生成WSDL文件。这样，WSDL文件就不会与您的组织配置不同步。

使用SoapUI创建一个SOAP项目

现在我们有了我们的WSDL文件，我们需要一种方法来提取信息来开始制作SOAP API请求。用网络来说，这个过程被称为使用WSDL。就像一个kraken消耗一艘满载不幸船员的船，Force.com Web服务连接器（WSC）等工具使用WSDL文件。然后这些工具创建类，使您能够使用通用编程语言使用SOAP API发出请求。
对于这个单元，我们使用称为SoapUI的第三方工具来使用我们的企业WSDL文件。 SoapUI是一个免费的开源应用程序，用于测试Web服务。要开始，请从SoapUI网站下载并安装SoapUI OpenSource。只安装SoapUI组件。

SoapUI安装并启动后，从File菜单中选择New SOAP Project。对于项目名称，输入Exploring Salesforce SOAP API。对于初始的WSDL，浏览到您保存企业WSDL文件的位置并选择它。不要更改任何其他选项。你的SoapUI窗口看起来像这样。

Exploring Salesforce SOAP API with SoapUI

点击OK。处理几秒钟后，在屏幕左侧的导航器窗格中将出现Exploring Salesforce SOAP API文件夹。它下面是一个名为SoapBinding的条目，其中包含几个操作。

那么我们在这里看什么？每个操作都对应于我们可以创建的SOAP API请求。每个操作的属性都是从WSDL文件中的信息中提取的。每个操作还包含一个示例XML请求，其中包含操作的HTTPS端点和预填充的SOAP消息。

还有一点，Salesforce需要所有连接才能使用TLS 1.1或更高版本。如果您在Java 7中使用SoapUI，则默认情况下不启用TLS 1.1。如果您尝试使用旧版本的TLS连接到Salesforce，则会收到错误消息。好消息是，这是一个非常简单的修复。看看这个方便的博客文章了解更多信息。

现在我们都准备发出SOAP API请求。完全航行，cap’n！

登录您的DE组织

在SoapUI中，向下滚动到login 操作。展开它，然后双击请求1.将出现一个示例SOAP登录请求。

这是对端点URI（1）的快速分解。

https://—指定安全的HTTP。
login.salesforce.com—登录请求的顶级域名。
/services/Soap—指定我们正在发出SOAP API请求。
/c—指定我们正在使用企业WSDL。使用/ u作为伙伴WSDL。
/36.0—API版本号。 v前缀缺失，因为某些API在版本号之前包含它，有些则不包含。这种行为只是Salesforce API的一个怪癖。
/0DF36000000LHZw—软件包版本号。

我们在这个例子中没有使用托管包，所以我们可以从URI的末尾删除包版本号。现在就去做吧。
SOAP消息（2）包含了我们希望在SOAP消息中找到的所有内容：信封，标题和正文。

LoginScopeHeader元素中的属性涉及自助服务和客户门户用户的身份验证。由于我们不必担心这些值，因此请删除整个<urn：LoginScopeHeader>元素（从<urn：LoginScopeHeader>到</ urn：LoginScopeHeader>中的所有内容）。突出显示窗口中的文本，然后按Delete键。

接下来，看一下消息正文中的<urn：login>元素。这个元素是登录请求的大部分。这是我们提供用户凭据的地方。用你的用户名和密码替换你的DE组织。 Trailhead游乐场组织将需要重置密码。

由于您从Salesforce发出的未知IP地址发出API请求，因此您需要将安全令牌附加到密码末尾。例如，如果您的密码是mypassword并且您的安全令牌是XXXXXXXXXX，请在<urn：password>元素内输入mypasswordXXXXXXXXXX。在注册您的DE组织后，您首次重置密码时，您的安全令牌已通过电子邮件发送给您。如果您之后重置密码，则会通过电子邮件将新安全令牌发送给您。如果找不到，可以在Salesforce中重置。

从您的个人设置中，在快速查找框中输入重置，然后选择 Reset My Security Token.
单击 Reset Security Token. 新的安全令牌发送到您的Salesforce个人设置中的电子邮件地址。

你的SOAP消息看起来像这样。

A sample SoapUI login request with our DE org credentials

点击请求窗口左上方的播放按钮（绿色三角形）。这个按钮发送请求，把你的SOAP消息放在一个瓶子里。下面是我们扩展响应时的样子。

恭喜，船长。您已成功登录。响应中包含有关您的组织和用户的大量信息。最重要的是，它包含您组织的实例（或自定义域，如果您使用的是我的域）以及将用于提出未来请求的会话ID。

Instance server and session ID are contained in the login response

将实例和会话ID复制到文本文件中。我们在一分钟内使用它们。

由于您的组织实例可能发生更改，因此在开始构建集成时，请不要对引用进行硬编码！而是使用Salesforce功能我的域配置一个自定义域。自定义域不仅可以消除更改实例名称的麻烦，还可以使用它来突出显示品牌，使组织更安全，并使您的登录页面个性化。

创建一个帐户

就像我们使用REST API所做的那样，让我们使用SOAP API创建一个帐户。在屏幕左侧的导航窗格中，找到create操作。展开它，然后双击 Request 1.因为创建记录比登录更复杂，所以create（）SOAP消息包含更多的元素。大部分元素都包含在请求标题中，其中大部分是可选的。为了简化，我们将删除大部分标题信息，但请记住，在创建记录时，这些标题提供的选项是可用的。有关每个头文件的信息，请查阅SOAP API开发人员指南中的SOAP Headers主题。

但是，我们不想删除的一个头是SessionHeader。它将包含我们从login（）响应中获得的会话ID。继续并删除其他标题，从<urn：EmailHeader>到<urn：AssignmentRuleHeader>。你的消息看起来像这样。

获取复制到文本文件的会话ID并将其粘贴到<urn：sessionId>标记中，替换？

我们对邮件正文做了一些更多的调整。首先，我们指定我们正在创建一个帐户。将<urn：sObjects>标记中的文本更改为如下所示：<urn：sObjects xsi：type =“urn1：Account”xmlns：xsi =“http://www.w3.org/2001/XMLSchema-instance” >。此调整使用XML实例架构声明指定正确的记录类型。

我们也想给这个帐户一个名字。在sObjects元素中添加<Name>示例SOAP Account </ Name>。也删除fieldsToNull和Id元素。现在你的消息看起来像这样。

Create() request with extraneous elements removed

在我们提出请求之前最后要做的事情。更改端点以指定您的组织的实例而不是登录，并从URI的末尾删除软件包版本。端点URI如下所示：https://na30.salesforce.com/services/Soap/c/36.0.

我们准备发送请求。再次点击绿色的三角形。有效！我们来看看回应。

注意LimitInfoHeader。此标题返回有关您的API使用情况的信息。在上面的例子中，我们今天在15,000个允许的呼叫中取得了9个。

在响应正文中，注意<result>元素。 <success> true </ success>表示记录已成功创建。 <id>包含记录的ID，您可以在以后的请求中使用该记录。

我们介绍了使用SOAP API进行请求的基础知识。当然，每个操作都有自己的参数和特点。确保在开始使用SOAP API编写集成时，将SOAP API开发人员指南用作映射。

Salesforce API（2）REST

学习目标

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

登录到Workbench并导航到REST Explorer。
使用描述资源。
使用REST API创建一个帐户。
使用REST API执行查询。

REST资源和方法

登陆！队长之前，我们已经看到了REST岛。在我们停靠并开始使用API之前，让我们来谈谈REST资源和方法。
REST资源是一条信息或某个操作（如单个数据记录，一组记录或一个查询）的抽象。 REST API中的每个资源都由一个已命名的统一资源标识符（URI）标识，并使用标准的HTTP方法（HEAD，GET，POST，PATCH，DELETE）进行访问。 REST API基于资源的使用情况，它们的URI以及它们之间的链接。

您使用资源与您的Salesforce组织进行交互。例如，您可以：

检索有关可用的API版本的摘要信息。
获取有关Salesforce对象的详细信息，例如帐户，用户或自定义对象。
执行查询或搜索。
更新或删除记录。

REST请求包含四个组件：资源URI，HTTP方法，请求标头和请求主体。请求标头指定请求的元数据。请求主体在需要时指定请求的数据。如果没有要指定的数据，则请求中将省略正文。

描述客户对象

现在是时候弄湿我们的脚了。我们将使用Workbench进行一些API调用。 Workbench是一套通过API与您的Salesforce组织进行交互的工具。因为您可以从任何HTTP发件人发出REST请求，所以还有其他许多工具可供您使用（例如，检出cURL或Postman）。但是，由于Workbench为Salesforce API提供了一个友好的框架，因此在您准备开始全面集成之前，这是一个完美的方式。

第一步是登录Workbench。

登录到您的Trailhead DE组织并导航到Workbench。
对于环境，请选择 Production.
对于API版本，请选择可用的最高编号。
确保您选择 I agree to the terms of service.
点击 Login with Salesforce.

您已经到达Workbench主页。对于这个模块，我们只使用Workbench的许多工具之一，即REST资源管理器。

在顶部菜单中，选择 utilities | REST Explorer.

您可以从REST资源管理器调用REST API调用，就像从任何其他HTTP接口调用一样。文本框中的文本表示资源URI。为了方便起见，显示的URI中省略了顶级域名。例如，预填充到URI文本框中的资源的完整URI是https://foo.my.salesforce.com/services/data/v36.0。

URI上方的单选按钮表示标准的HTTP方法。要进行API调用，请输入资源URI，选择适当的方法，根据需要添加标题，然后单击 Execute.

我们来试试SObject Describe资源。此资源与GET方法结合使用时，将返回有关对象及其字段的元数据。

我们将尝试描述Account对象。将URI文本框中的现有文本替换为/services/data/vXX.0/sobjects/account/describe，其中XX映射到您正在使用的API版本。

让我们花一分钟来分解这个资源的URI。

/services/data—指定我们正在发出一个REST API请求
/v36.0—API版本号
/sobjects—指定我们正在访问sObject分组下的资源
/account—sObject被执行;在这种情况下，客户
/describe—Action; 在这种情况下，描述请求

现在确保选择GET方法，然后单击 Execute.

Response after we describe the account object

好的工作，队长。客户元数据出现在屏幕上。 Workbench已经很好地格式化了响应。要查看原始JSON响应，请单击 Show Raw Response.

JSON response after we describe the account object

帐户元数据以JSON形式显示在某些HTTP响应标头下方。因为REST API同时支持JSON和XML，所以让我们更改请求头以指定XML响应。在HTTP方法旁边，单击标题。对于Accept头值，将application / json替换为application / xml。您的请求标题看起来像这样。

点击 Execute。原始的XML响应被返回。欢呼！

创建一个客户

现在让我们使用SObject资源和POST方法创建一个帐户。在URI文本框中，将现有文本替换为/services/data/vXX.0/sobjects/account，其中XX映射到您正在使用的API版本。选择POST。请注意，出现了请求正文文本区域，这是我们为新帐户指定字段值的位置。首先，让我们把Accept头改回JSON。

点击 Headers. 将Accept：application / xml改为Accept：application / json。你的请求看起来像这样。

在请求正文中，输入以下文本。

{
  "Name" : "NewAccount1",
  "ShippingCity" : "San Francisco"
}

Successful account creation response in REST API

如果 success: true,则使用返回的ID创建帐户。展开错误文件夹以检查错误。

只是开球，让我们创建第二个帐户，而不指定帐户名称。将请求正文中的文本替换为以下文本。

{
  "ShippingCity" : "San Francisco"
}

哦，哦。您是否收到REQUIRED_FIELD_MISSING个响应？展开REQUIRED_FIELD_MISSING文件夹，然后展开字段文件夹。您的扩展响应如下所示。

We get an error when we don't provide an account name

由于名称是创建帐户的必填字段，因此服务器不处理请求，并且收到错误。谢天谢地，我们需要修复请求的所有信息都在错误响应中。让我们指定名称NewAccount2，然后在请求正文中更改运输城市。将请求正文中的文本替换为以下文本。

{
  "Name" : "NewAccount2",
  "ShippingCity" : "New York"
}

执行查询

现在让我们想象一下，您或其他用户创建了数百个帐户。您想要查找航运城市是旧金山的所有帐户的名称。您可以使用查询资源执行SOQL查询，并根据需要输入确切的记录，就像定制的宝藏地图一样。/services/data/vXX.0/query/?q=SELECT+Name+From+Account+WHERE+ShippingCity=’San+Francisco’, 其中XX映射到：用以下文字替换URI文本框中的文本您正在使用的API版本。

我们用查询字符串中的+字符替换空格，以正确编码URI。您可以从参考资料部分的链接阅读HTML URL编码。确保选择了GET方法，然后单击 Execute.

展开记录文件夹。您是否看到一个名为我们创建的第一个帐户NewAccount1的文件夹？大。点击它。现在点击属性文件夹。 url旁边是返回的帐户的资源URI。你的回应看起来像这样。

Query response returns one account record

当您编写集成时，您可以从响应中获取该URI以访问有关该帐户的更多详细信息。

Node.js和Ruby示例

现在，您对REST API的可能性有了一个甜头。当然，当您从Workbench转到编写代码时，您将使用您选择的编程语言与REST API进行交互。幸运的是，专业的Salesforce开发人员已经为几种语言编写了包装器，简化了使用REST API的过程。以下是分别使用包装器Nforce和Restforce在Node.js和Ruby中编写的两个示例查询。

使用Nforce的Node.js示例

var nforce = require('nforce');

// 创建与Salesforce连接的应用程序的连接
var org = nforce.createConnection({
  clientId: process.env.CLIENT_ID,
  clientSecret: process.env.CLIENT_SECRET,
  redirectUri: process.env.CALLBACK_URL,
  mode: 'single'
});

// 认证并返回OAuth令牌
org.authenticate({
  username: process.env.USERNAME,
  password: process.env.PASSWORD+process.env.SECURITY_TOKEN
}, function(err, resp){
  if (!err) {
    console.log('Successfully logged in! Cached Token: ' + org.oauth.access_token);
    // 执行查询
    org.query({ query: 'select id, name from account limit 5' }, function(err, resp){
      if(!err && resp.records) {
        // 输出帐户名称
        for (i=0; i<resp.records.length;i++) {
          console.log(resp.records[i].get('name'));
        }
      }
    });
  }
  if (err) console.log(err);
});

使用Restforce的Ruby示例

require 'restforce'

// 创建与Salesforce连接的应用程序的连接
client = Restforce.new :username => ENV['USERNAME'],
  :password       => ENV['PASSWORD'],
  :security_token => ENV['SECURITY_TOKEN'],
  :client_id      => ENV['CLIENT_ID'],
  :client_secret  => ENV['CLIENT_SECRET']

// 执行查询
accounts = client.query("select id, name from account limit 5")

// 输出帐户名称
accounts.each do |account|
  p account.Name
end

Salesforce API（1）

学习目标

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

描述以API为先的开发方法的好处。
REST API，SOAP API，Bulk API和Streaming API的状态用例。
命名这两种类型的API限制并描述它们的计算方式。

API首先在Salesforce

嗨，妈呀！您是否准备好在公海上航行，寻找完美的Salesforce API来进行集成？那么，船长，抓住你的眼罩，找到一只鹦鹉。您即将浏览Force.com区域并了解我们的所有API。
Salesforce API环境和海蓝一样广阔。这是因为Salesforce采用API优先方法来构建Salesforce平台上的功能。 API首先意味着在专注于设计UI之前，为功能构建强大的API。这种方法使Salesforce开发人员能够灵活地根据需要操作数据。

Salesforce知道其客户和合作伙伴总是在想办法扩展Salesforce功能和令人兴奋的AppExchange应用程序。提供一个用于在平台上开发的综合工具箱是重中之重。这种方法还可以让Salesforce在API之上构建UI，确保它们之间的行为相同。

把这个模块想象成你的API第一个伴侣。我们将一起浏览一些常规的API信息，对Salesforce的API套件进行调查，并深入使用一些常见的API。所有这些信息将为您提供所需的知识，以便为您的项目选择正确的API。

Salesforce数据API

在Salesforce API的海洋中，有一个我们在本模块中关注的常用API的关键群组。它们是REST API，SOAP API，Bulk API和Streaming API。他们一起组成了Salesforce数据API。他们的目的是让您操纵您的Salesforce数据，而其他API让您可以自定义页面布局或构建自定义开发工具。您也可以使用其他Salesforce API来操纵Salesforce数据的子集。例如，Analytics（分析）REST API侧重于分析。但是这四个API广泛应用于Salesforce核心数据的各个区域。

REST API

REST API是基于RESTful原则的简单而强大的Web服务。它通过REST资源和HTTP方法公开各种Salesforce功能。例如，您可以创建，读取，更新和删除（CRUD）记录，搜索或查询数据，检索对象元数据以及访问组织中有关限制的信息。 REST API支持XML和JSON。

由于REST API具有轻量级的请求和响应框架，并且易于使用，所以对于编写移动应用程序和Web应用程序非常有用。

SOAP API

SOAP API是基于具有相同名称的行业标准协议的功能强大且功能强大的Web服务。它使用Web服务描述语言（WSDL）文件来严格定义通过API访问数据的参数。 SOAP API仅支持XML。大部分SOAP API功能也可以通过REST API获得。这取决于哪个标准更好地满足您的需求。

因为SOAP API使用WSDL文件作为API和使用者之间的正式契约，所以编写服务器到服务器的集成是非常好的。

Bulk API

批量API是一种专门用于一次加载和查询大量数据的RESTful API。我们的意思是5万条记录或更多。批量API是异步的，这意味着您可以提交请求并稍后返回结果。处理大量数据时，这种方法是首选方法。 Bulk API有两个版本（1.0和2.0）。两个版本都处理大量的数据，但是我们在这个模块中使用Bulk API 2.0，因为它使用起来更容易一些。

批量API非常适合执行涉及大量记录的任务，例如首次将数据加载到组织中。

Streaming API

Streaming API是一个专门的API，用于设置在对数据进行更改时触发的通知。它使用发布 – 订阅（pub-subscribe）或发布/订阅（pub / sub）模型，用户可以在其中订阅广播某些类型的数据更改的频道。

发布/订阅模型通过消除轮询的需要来减少API请求的数量。流式API对编写应用程序非常有用，否则这些应用程序需要经常轮询更改。

API访问和身份验证

您不需要宝藏地图来访问Salesforce API。所有您需要的是以下版本之一的组织：企业版，无限制版，开发人员版，性能版或专业版（带附加组件）。确保您具有“API启用”权限，并且您已准备好开始集成。
除了SOAP API login（）调用之外，所有API调用都需要身份验证。您可以使用其中一个受支持的OAuth流，也可以使用从SOAP API login（）调用中检索的会话标识进行身份验证。查看开发者指南，了解您所选择的API。

API限制

任何值得他或她的盐的船长都知道何时为了船的利益而限制船员。如果船长让水手整天喝酒，什么事都做不了。同样，Salesforce也会限制每个组织的API调用次数，以确保实例的健康状况。这些限制是为了防止流氓脚本将我们的服务器砸成浮木。他们不妨碍你的日常工作。尽管如此，熟悉它们是个好主意。
有两种类型的API限制。并发限制限制了同时运行的长时间呼叫（20秒或更长）的数量。总限制限制了在24小时内滚动的呼叫数量。

并发限制因组织类型而异。对于开发者版本组织，限制是一次五个长时间运行的调用。对于沙箱组织来说，这是25个长时间运行的呼叫。

根据您购买的组织版本，许可证类型和扩展包，总数限制会有所不同。例如，Enterprise Edition组织每个Salesforce许可证可获得1000个呼叫，每个Force.com Light App许可证可获得200个呼叫。使用无限的应用包，相同的企业版组织可以获得额外的4000个电话。根据组织版本，总限制也受到最低限额和最高限额的限制，但我们不会在这里进行讨论。如果您想了解更多信息，请参阅参考资料部分中的API请求限制链接。

你有几种方法来检查你的剩余的API调用。您可以在“系统概述”页面的“API使用情况”框中查看它们。从“设置”中，在快速查找方框中输入系统概览，然后选择系统概览。您也可以在您的组织超出您指定的多个API调用时设置通知。为此，从安装程序中，在快速查找框中输入API使用通知，然后选择API使用通知。

使用REST或SOAP API时，LimitInfoHeader响应标题可以为您提供有关剩余呼叫的信息。您还可以访问REST API限制资源，了解组织中各种限制的信息。

我使用哪个API？

为您的整合需求选择正确的API是一个重要的决定。以下是我们最常用的API的一些信息，包括支持的协议，数据格式，通信范例和用例。将本节作为参考，您可以在考虑使用哪个API时返回。

请注意我们已经谈到的四个数据API。接下来我们将深入其中。

API名称	协议	数据格式	通讯
REST API	REST	JSON, XML	同步
SOAP API	SOAP (WSDL)	XML	同步
Chatter REST API	REST	JSON, XML	同步（照片异步处理）
Analytics REST API	REST	JSON, XML	同步
Bulk API	REST	CSV, JSON, XML	同步
Metadata API	SOAP (WSDL)	XML	同步
Streaming API	Bayeux	JSON	异步（数据流）
Apex REST API	REST	JSON, XML, Custom	同步
Apex SOAP API	SOAP (WSDL)	XML	同步
Tooling API	REST or SOAP (WSDL)	JSON, XML, Custom	同步

何时使用REST API

REST API提供了一个强大，方便，简单的基于REST的Web服务接口，用于与Salesforce进行交互。它的优点包括易于集成和开发，并且是移动应用程序和Web项目使用的最佳技术选择。但是，如果您有多个要处理的记录，请考虑使用Bulk API，该API基于REST原则并针对大量数据集进行了优化。

何时使用SOAP API

SOAP API为与Salesforce进行交互提供了一个强大，方便且简单的基于SOAP的Web服务界面。您可以使用SOAP API创建，检索，更新或删除记录。您还可以使用SOAP API执行搜索等等。使用任何支持Web服务的语言使用SOAP API。

例如，您可以使用SOAP API将Salesforce与您的组织的ERP和财务系统集成。您还可以向公司门户网站提供实时销售和支持信息，并使用客户信息填充关键业务系统。

何时使用Chatter REST API

使用Chatter REST API来显示Salesforce数据，尤其是在移动应用程序中。除Chatter提要，用户，组和追随者外，Chatter REST API还提供对文件，推荐，主题，通知，Data.com采购等的编程式访问。 Chatter REST API类似于其他公司提供的API，例如Facebook和Twitter，但也暴露了Chatter之外的Salesforce功能。

何时使用Analytics REST API

您可以使用Google Analytics REST API以编程方式访问Google Analytics资产（如数据集，镜头和仪表板）。将查询直接发送到Analytics平台。访问已导入到Google Analytics平台的数据集。创建和检索镜头。访问XMD信息。检索数据集版本的列表。创建和检索分析应用程序。创建，更新和检索Google Analytics仪表板。检索应用程序的依赖关系列表。确定哪些功能可供用户使用。使用快照。操作复制的数据集。

何时使用批量API

批量API基于REST原则，并针对加载或删除大量数据进行了优化。您可以使用它通过提交批来异步查询，查询所有，插入，更新，插入或删除许多记录。 Salesforce在后台处理批次。

相比之下，SOAP API针对实时客户端应用程序进行了优化，每次更新一些记录。您可以使用SOAP API来处理许多记录，但是当数据集包含数十万条记录时，SOAP API不太实用。批量API旨在使处理从数千条到数百万条记录的数据变得简单。

使用Bulk API最简单的方法是使用CSV文件在Data Loader中处理记录。使用Data Loader可以避免编写自己的客户端应用程序。

何时使用元数据API

使用元数据API检索，部署，创建，更新或删除您的组织的自定义项。最常见的用法是将更改从沙箱或测试组织迁移到生产环境。元数据API旨在用于管理自定义和用于构建可以管理元数据模型的工具，而不是数据本身。

访问Metadata API中功能的最简单方法是使用Force.com IDE或Force.com迁移工具。这两个工具都是基于元数据API构建的，分别使用标准的Eclipse和Ant工具来简化对Metadata API的处理。

Force.com IDE构建在Eclipse平台上，供熟悉集成开发环境的程序员使用。在IDE中编译，编译，测试和部署。
如果您使用脚本或命令行在本地目录和Salesforce组织之间移动元数据，Force.com迁移工具是理想选择。

何时使用流式API

使用Streaming API接收与您定义的SOQL查询匹配的数据更改的通知。

如果要将通知从服务器推送到客户端，则Streaming API非常有用。考虑经常轮询的应用程序的流API。持续轮询Salesforce基础设施的应用程序会消耗不必要的API调用和处理时间。 Streaming API减少了不返回数据的请求的数量，对于需要数据更改的一般通知的应用程序也非常理想。

流式API使您可以减少API调用的数量并提高性能。

何时使用Apex REST API

如果要公开Apex类和方法，请使用Apex REST API，以便外部应用程序可以通过REST体系结构访问您的代码。 Apex REST API支持OAuth 2.0和会话ID进行授权。

何时使用Apex SOAP API

如果要将Apex方法公开为SOAP Web服务API，请使用Apex SOAP API，以便外部应用程序可以通过SOAP访问您的代码。

Apex SOAP API支持OAuth 2.0和会话ID进行授权。

何时使用工具API

使用工具API将Salesforce元数据与其他系统集成。元数据类型公开为sObjects，因此您可以访问复杂类型的一个组件。这个字段级访问加快了对复杂元数据类型的操作。您还可以为Force.com应用程序构建自定义开发工具。例如，使用工具API来管理和部署Apex类和触发器以及Visualforce页面和组件的工作副本。您还可以设置检查点或堆转储标记，执行匿名Apex，并访问日志记录和代码覆盖率信息。

REST和SOAP都支持。

Lightning-设计（6）布置记录主页

学习目标

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

使用网格系统布局一个记录主页。
使用卡组件的两种变体来呈现记录相关列表。

大压轴

感谢您坚持使用模块！在这个最后的单元中，我们将打造另一个全新的页面，神奇地再次符合Lightning UI，而不需要我们写一行CSS。在之前的模块中，我们将使用许多我们已经了解的组件，包括网格系统，页面标题和图标。我们还将介绍一些关键的新组件Card和Tile。

有问题的页面将成为一个记录主页。为什么这个网页？我们认为这是许多应用程序页面的原型，在许多方面它是传统的Salesforce页面。这个例子将是你的应用程序的基础模板。这也是复杂的，但不是太复杂，所以它会很好的练习，你会在这个过程中赚取Trailhead徽章！让我们开始？

记录页面布局

这是我们要去的页面的一个线框。页面顶部有两个相关的列表，左边是一个大的列表，右边是一个紧凑的卡片。在下面，我们有通常的页脚。好消息是，我们将能够重用我们之前编写的一堆标记。

Record home wireframe

让我们从一个名为Trailhead_SLDS_RecordHome的全新Visualforce页面开始使用外部页面框架。

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Salesforce Lightning Design System Trailhead Module</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- 导入设计系统样式表 -->
  <apex:slds />
</head>
<body>

  <!-- 需要的SLDS包装 -->
  <div class="slds-scope">

    <!-- MASTHEAD -->
    <p class="slds-text-heading--label slds-m-bottom--small">Salesforce Lightning Design System Trailhead Module</p>
    <!-- / MASTHEAD -->

    <!-- PAGE HEADER -->
    <!-- / PAGE HEADER -->

    <!-- PRIMARY CONTENT WRAPPER -->
    <div class="myapp">
    </div>
    <!-- / PRIMARY CONTENT WRAPPER -->

    <!-- FOOTER -->
    <footer role="contentinfo" class="slds-p-around--large">
      <!-- 布局网格 -->
      <div class="slds-grid slds-grid--align-spread">
        <p class="slds-col">Salesforce Lightning Design System Example</p>
        <p class="slds-col">&copy; Your Name Here</p>
      </div>
      <!-- / 布局网格 -->
    </footer>
    <!-- / FOOTER --> 

  </div>
  <!-- / 需要的SLDS包装 -->

  <!-- JAVASCRIPT -->
  <!-- / JAVASCRIPT -->

</body>
</html>
</apex:page>

接下来，我们将添加一个Page Header组件，这个比我们在列表视图中使用的组件要多一点。我们将有两排。第一个和列表视图非常相似。第二行将显示记录中的一些关键字段。

第一行的代码现在应该看起来很熟悉。把它放在<！ – PAGE HEADER – >之间：

<!-- PAGE HEADER -->
<div class="slds-page-header">

  <!-- PAGE HEADER TOP ROW -->
  <div class="slds-grid">

    <!-- PAGE HEADER / ROW 1 / COLUMN 1 -->
    <div class="slds-col slds-has-flexi-truncate">

      <!-- HEADING AREA -->
      <!-- 媒体对象 = FIGURE + BODY -->
      <div class="slds-media slds-no-space slds-grow">
        <div class="slds-media__figure">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-user">
            <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#user')}"></use>
          </svg>
        </div>

        <div class="slds-media__body">
          <p class="slds-text-title--caps slds-line-height--reset">Account</p>
          <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="SLDS Inc.">SLDS Inc.</h1>
        </div>
      </div>
      <!-- / 媒体对象 -->
      <!-- HEADING AREA -->

    </div>
    <!-- / PAGE HEADER / ROW 1 / COLUMN 1 -->

    <!-- PAGE HEADER / ROW 1 / COLUMN 2 -->
    <div class="slds-col slds-no-flex slds-grid slds-align-top">
      <div class="slds-button-group" role="group">
        <button class="slds-button slds-button--neutral">
          Contact
        </button>
        <button class="slds-button slds-button--neutral">
          More
        </button>
      </div>
    </div>
    <!-- / PAGE HEADER / ROW 1 / COLUMN 2 -->

  </div>
  <!-- / PAGE HEADER TOP ROW -->

  <!-- 页眉细节行 -->
  <!-- / PAGE HEADER DETAIL ROW -->

</div>
<!-- / PAGE HEADER -->

Record home with partial header

接下来让我们使用另一个Grid System组件实现第二个详细信息行。它将包含四列。在<！ – PAGE HEADER DETAIL ROW – >占位符注释中包含以下代码：

<!-- 页眉细节行 -->
<ul class="slds-grid slds-page-header__detail-row">

  <!-- PAGE HEADER / ROW 2 / COLUMN 1 -->
  <li class="slds-page-header__detail-block">
    <p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 1">Field 1</p>
    <p class="slds-text-body--regular slds-truncate" title="Description that demonstrates truncation with a long text field">Description that demonstrates truncation with a long text field.</p>
  </li>

  <!-- PAGE HEADER / ROW 2 / COLUMN 2 -->
  <li class="slds-page-header__detail-block">
    <p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field2 (3)">Field 2 (3)
      <button class="slds-button slds-button--icon" aria-haspopup="true" title="More Actions">
        <svg class="slds-button__icon slds-button__icon--small" aria-hidden="true">
          <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
        </svg>
        <span class="slds-assistive-text">More Actions</span>
      </button>
    </p>
    <p class="slds-text-body--regular">Multiple Values</p>
  </li>

  <!-- PAGE HEADER / ROW 2 / COLUMN 3 -->
  <li class="slds-page-header__detail-block">
    <p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 3">Field 3</p><a href="javascript:void(0);">Hyperlink</a></li>

  <!-- PAGE HEADER / ROW 2 / COLUMN 4 -->
  <li class="slds-page-header__detail-block">
    <p class="slds-text-title slds-truncate slds-m-bottom--xx-small" title="Field 4">Field 4</p>
    <p>
      <span title="Description (2-line truncation—must use JS to truncate).">Description (2-line truncat...</span>
    </p>
  </li>
</ul>
<!-- / PAGE HEADER DETAIL ROW -->

Record home with complete header

另外，设计系统让我们的生活变得非常简单。这段代码在不输入CSS字符的情况下展示了符合Lightning UI规范的复杂组件。让我们一步一步浏览详细信息的代码。再次，我们建议在您最喜欢的编辑器中打开代码，除了这个窗口，所以你可以交叉引用。

外部的<ul>实例化我们的网格，并添加类slds-page-header__detail-行来正确对齐。

这四个字段使用一系列带有slds-page-header__detail-block类的<li>进行布局。

在每个细节块中，我们有一个或多个带有三个类的<p>元素：slds-text-title，slds-m-bottom-xx-small在它们下面增加空格，以及slds-truncate截断字段值。

您可以在Page Header组件页面上看到完整的记录主页页眉示例。

添加主要相关列表

现在让我们进入记录家庭细节区域，我们想要两个相关的列表并排。

在<！ – PRIMARY CONTENT WRAPPER – >注释中包含以下代码：

<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">

  <!-- 相关名片卡-->

  <div class="slds-grid slds-m-top--large">

    <!-- 主卡 -->
    <div class="slds-col slds-col-rule--right slds-p-right--large slds-size--8-of-12">
      left hand column related list
    </div>
    <!-- / 主卡 -->

    <!-- 狭窄的卡片  -->
    <div class="slds-col slds-p-left--large slds-size--4-of-12">
      right hand column related list
    </div>
    <!-- / 狭窄的卡片  -->

  </div>
  <!-- / 相关名片卡 -->

</div>
<!-- / PRIMARY CONTENT WRAPPER -->

这是左手卡的代码。把它放在<！ – MAIN CARD – >评论：

<!-- 主卡  -->
<div class="slds-col slds-col-rule--right slds-p-right--large slds-size--8-of-12">

  <article class="slds-card">

    <div class="slds-card__header slds-grid">
      <header class="slds-media slds-media--center slds-has-flexi-truncate">
        <div class="slds-media__figure">
          <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
            <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
          </svg>
        </div>
        <div class="slds-media__body slds-truncate">
          <a href="javascript:void(0);" class="slds-text-link--reset">
            <span class="slds-text-heading--small">Contacts</span>
          </a>
        </div>
      </header>
    </div>

    <!-- CARD BODY = TABLE -->
    <div class="slds-card__body">
      <table class="slds-table slds-table--bordered slds-no-row-hover slds-table--cell-buffer">
        <thead>
          <tr class="slds-text-heading--label">
            <th class="slds-size--1-of-4" scope="col">Name</th>
            <th class="slds-size--1-of-4" scope="col">Company</th>
            <th class="slds-size--1-of-4" scope="col">Title</th>
            <th class="slds-size--1-of-4" scope="col">Email</th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          <tr class="slds-hint-parent">
            <th class="slds-size--1-of-4" scope="row"><a href="javascript:void(0);">Adam Choi</a></th>
            <td class="slds-size--1-of-4">Company One</td>
            <td class="slds-size--1-of-4">Director of Operations</td>
            <td class="slds-size--1-of-4">adam@company.com</td>
            <td class="slds-cell-shrink">
              <button class="slds-button slds-button--icon-border-filled slds-button--icon-x-small">
                <svg aria-hidden="true" class="slds-button__icon slds-button__icon--hint slds-button__icon--small">
                  <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/utility-sprite/svg/symbols.svg#down')}"></use>
                </svg>
                <span class="slds-assistive-text">Show More</span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- / CARD BODY = SECTION + TABLE -->

    <div class="slds-card__footer">
      <a href="javascript:void(0);">View All <span class="slds-assistive-text">contacts</span></a>
    </div>

  </article>
</div>
<!-- / MAIN CARD -->

Record home with main related list

现在这个演示只是一个联系人的例子，所以不要把这个展示给你的销售人员！在现实生活中，你会加载更多的人来卖东西！

让我们一步一步通过标记。

卡组件包装在<article class =“slds-card”>元素中。

卡头由一个带有slds-card_header和slds-grid类的<div>元素指定。这两列分别包含一个媒体对象和一个操作按钮。在列表视图中，可以使用Button Group组件轻松扩展第二列。一如既往，您可以在Design System网站上找到所有这些类的更多文档和示例。

卡体是类slds-card__body的<div>元素。里面有一个数据表组件。

该卡片在<div class =“slds-card__footer”>内完成了“查看全部”链接。

添加最终的窄卡

我们的记录家的最后一步是添加右侧窄卡。为此，我们使用卡组件的窄型变体。这里是<！ – NARROW CARD – >注释中的标记：

<!-- 狭窄的卡片 -->
<div class="slds-col slds-p-left--large slds-size--4-of-12">

  <article class="slds-card slds-card--narrow">

    <div class="slds-card__header slds-grid">
      <header class="slds-media slds-media--center slds-has-flexi-truncate">
        <div class="slds-media__figure">
          <svg class="slds-icon slds-icon-standard-lead slds-icon--small" aria-hidden="true">
            <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#lead')}"></use>
          </svg>
        </div>
        <div class="slds-media__body slds-truncate">
          <h2 class="slds-text-heading--small">Team</h2>
        </div>
      </header>
    </div>

    <div class="slds-card__body">
      <div class="slds-card__body--inner">
        <div class="slds-tile">
          <h3 class="slds-truncate" title="Anne Choi"><a href="javascript:void(0);">Anne Choi</a></h3>
          <div class="slds-tile__detail slds-text-body--small">
            <dl class="slds-list--horizontal slds-wrap">
              <dt class="slds-item--label slds-text-color--weak slds-truncate" title="Email:">
                Email:
              </dt>
              <dd class="slds-item--detail slds-truncate" title="achoi@burlingtion.com">
                achoi@burlingtion.com
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>

    <div class="slds-card__footer">
      <a href="javascript:void(0);">View All <span class="slds-assistive-text">team members</span></a>
    </div>

  </article>

</div>
<!-- / 狭窄的卡片 -->

狭窄的卡体是一系列瓷砖组件。平铺是与记录相关的一组相关信息。这个组件有几个变体，每个变体都有不同的信息分组。密切关注文档中提供的示例中的标记，因为每个拼贴布局的构造都是不同的。这里我们使用最简单的基础变体。

每个瓦片都有slds-tile类。在里面，我们提供了一个名片和一些内容。和以前一样，我们使用与其他卡片相同的<div class =“slds-card__footer”>标记来包装窄卡。

您现在应该能够预览完整的记录主页：

Record home with narrow card

这个相当复杂的录制家庭标记的完整示例将使此Trailhead模块关闭。希望你现在在设计系统有一个坚实的基础，并渴望在你自己的应用程序中使用它。

显然，这些示例页面仅仅是开始。在构建自己的应用程序时，下一步就是挂钩实际数据，链接页面，并构建业务逻辑。我们希望设计系统能够让您从CSS的样式化UI中解脱出来，所以您可以专注于构建这个真正的功能。玩得开心，请给我们反馈你如何得到。

Lightning-设计（5）图片

学习目标

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

使用图像组件将头像添加到您的设计中。
使用设计系统SVG精灵贴图将图标包含在您的设计中。
描述在Visualforce中工作时的标记陷阱。

阿凡达告诉千言万语

在本节中，我们将使用图像和一组全新的漂亮图标（更多内容在下面）使事情变得更加明亮。这可能听起来很简单…整个图像单元，真的吗？但是，这些是关键组件，特别是你会看到我们正在使用一些尖端的技术来为我们的图标标记。另外，你需要照亮你的示例页面，以获得这些Trailhead徽章。

在我们进入代码之前，请注意可访问性。请记住，每个<img />标签都应具有辅助技术用户的alt属性。如果图像载有信息，请将alt设置为简明的描述。如果图片仅仅是装饰性的，或者对于相邻的文字是多余的，请设置一个空的alt属性，如下所示：<img alt =“”src =“decorative-image.jpg”/>

图像方面，设计系统包括化身的特殊样式。你知道，那些你周围在互联网上看到的髋关节圆形图像。

Example avatars

头像是通过将<img />元素用类slds-avatar包装在<span>元素中创建的。可以应用其他大小助手类，例如slds-avatar – large。设计系统下载实际上包括/ assets / images下的几个头像示例。请随意将它们包含在您的应用程序中。这是一个标记的例子：

<span class="slds-avatar slds-avatar--x-small">
  <img src="/assets/images/avatar1.jpg" alt="meaningful text" />
</span>

媒体对象

在Web应用程序中包含图像的常见模式是并排包含图像和文本。该设计系统有一个组件，使这超级简单，媒体对象。

让我们直接回到最后一个单元的代码。我们将使用媒体对象在页面标题中包含一个头像。用下面的代码替换页头中的<！ – HEADING AREA – >部分：

<!-- HEADING AREA -->
<div class="slds-media slds-no-space slds-grow">
  <div class="slds-media__figure">
    <span class="slds-avatar slds-avatar--medium">
      <img src="{!URLFOR($Asset.SLDS, 'assets/images/avatar1.jpg')}" alt="" />
    </span>
  </div>
  <div class="slds-media__body">
    <p class="slds-text-title--caps slds-line-height--reset">Accounts</p>
    <h1 class="slds-page-header__title slds-m-right--small slds-align-middle slds-truncate" title="My Accounts">My Accounts</h1>
  </div>
</div>
<!-- / HEADING AREA -->

List view with avatar

媒体对象组件的基类是slds-media。它可以应用于任何容器元素，这里我们使用一个<div>。在容器内部，我们提供一个图形（图像）和一个实体（内容）。

这个数字，也就是我们的头像，被包含在一个带有slds-media__figure类的<span>中。头像图像是用标准的<img />元素指定的。你也可以在这里包含一个图标（见下文）。

正文是类slds-media__body的<div>。这包裹了我们之前使用的标题文本。

图标

在我们开始这项工作时，更新Salesforce图标是我们的首要任务。让我们面对现实，现有的“剪贴画”看起来有点憔悴和90年代。因此，我们非常高兴能够提供这套令人兴奋的Technicolor图标，涵盖各种用例供您在自己的应用程序中使用。

设计系统包括五种不同类型的新图标：

自定义 – 这些图标代表我们UI中的自定义Salesforce对象。它们是我们在创建自定义对象时向Salesforce管理员提供的图标
文档类型 – 常用的文档和文件格式
标准 – 这些图标涵盖了我们UI中的所有标准Salesforce对象
实用程序 – 关闭模式，返回上一页或打开下拉菜单
行动 – 最后，但并非最不重要的，好行动类别。我们在我们的移动用户界面中使用这些图标作为相当具体的用例。你会发现这里有一些重复的标准和自定义设置 – 不要惊慌，你不会发疯。很可能你完全可以忽略这个类别，并且仍然有足够的图标用于你可以梦想的任何用例。

Example icons

这些图标既作为单独的PNG和SVG提供，也包装在SVG sprite地图中。以上每个图标类别在/ assets /图标下都有自己的精灵贴图。雪碧地图是我们推荐的在页面中包含图标的技术。与传统的图标字体相比，SVG sprite映射的优点包括更细粒度的CSS控制和更容易的组件定位，以及更好的基于矢量SVG的可调整性。这最后的好处是响应式设计的福音。基于矢量的图像可以制作任何尺寸的清洁艺术品。

请注意：Edge，Google Chrome，Safari和Firefox的当前版本已经支持SVG精灵贴图。要在Microsoft Internet Explorer 11中使用SVG spritemap图像图标，您需要下载一个名为svg4everybody的小脚本。下载svg4everybody之后，将svg4everybody.min.js脚本添加为静态资源，将其包含在您的页面中，然后在<script>标记中调用它。请参阅svg4everybody网站上的完整说明了解更多详情。使用这种图标技术（如前一段所述）的优点不仅仅是弥补了这一额外的步骤。

  <apex:includeScript value="{!$Resource.REPLACE_WITH_NAME_OF_SVG4EVERYBODY_STATIC_RESOURCE}" />
  <script>
    svg4everybody();
  </script>
</head>

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">

<span class="slds-icon_container slds-icon-standard-account" title="description of icon when needed">
  <svg aria-hidden="true" class="slds-icon">
    <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}"></use>
  </svg>
  <span class="slds-assistive-text">Account Icon</span>
</span>

图标没有背景颜色。为了设置一个，我们将第二个类应用到该跨度。要为特定图标使用默认颜色，请通过连接slds-icon-，sprite映射名称和-icon来构造图标特定实用程序类的名称。将该类应用于<span>元素。在这个例子中，我们使用“标准”精灵图和“客户”图标，所以类是slds-icon-standard-account。

在<span>中，我们有一个带有slds-icon类的<svg>元素。 <svg>元素又包含一个<use>标签，它根据xlink：href属性指定要显示的图标。

为了设置xlink：href路径，请执行以下步骤：

首先从图标页面中选择您要使用的图标。记下它在哪个类别（动作，自定义，文档类型，标准或实用程序）。
通过连接类别精灵（例如“standard-sprite”），/svg/symbols.svg#和其中的特定图标（例如“account”）来完成xlink：href属性。因此，在上面的例子中，路径assets / icons / standard-sprite / svg / symbols.svg＃是客户。

如果图标没有出现，请检查以下内容：

检查是否已将xmlns和xmlns：xlink属性应用于您的<html>元素
如果您使用的是MSIE，请确保使用最新版本，并按照上文所述在页面中包含svg4everybody脚本。
确保在svg路径中正确指定了sprite类型和图标
仔细检查你的静态资源是否有正确的URLFOR路径
最后，请查看浏览器开发者工具中的页面，了解真正疯狂的深奥问题。祝你好运。

在<svg>标签之后，辅助文本被包含在slds-assistive-text类的跨度内。

有关使用图标的更多信息（如更改图标颜色或大小），请参阅Design System网站上的图标组件文档。

将图标添加到列表视图数据表

现在，让一些帐户图标照亮数据表。将updateOutputDiv函数替换为以下内容以添加一个带有图标的附加列：

var updateOutputDiv = function() {

  account.retrieve(
    { orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
    function(error, records) {
      if (error) {
        alert(error.message);
      } else {
        // 创建数据表
        var dataTable = document.createElement('table');
        dataTable.className = 'slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover';

        // 添加标题行
        var tableHeader = dataTable.createTHead();
        var tableHeaderRow = tableHeader.insertRow();

        var tableHeaderRowCellIcon = tableHeaderRow.insertCell(0);
        tableHeaderRowCellIcon.setAttribute('class', 'slds-cell-shrink');

        var tableHeaderRowCell1 = tableHeaderRow.insertCell(1);
        tableHeaderRowCell1.appendChild(document.createTextNode('Account name'));
        tableHeaderRowCell1.setAttribute('scope', 'col');
        tableHeaderRowCell1.setAttribute('class', 'slds-text-heading--label');

        var tableHeaderRowCell2 = tableHeaderRow.insertCell(2);
        tableHeaderRowCell2.appendChild(document.createTextNode('Account ID'));
        tableHeaderRowCell2.setAttribute('scope', 'col');
        tableHeaderRowCell2.setAttribute('class', 'slds-text-heading--label');


        // 建立表体
        var tableBody = dataTable.appendChild(document.createElement('tbody'))
        var dataRow, dataRowCell1, dataRowCell2, recordName, recordId;
        records.forEach(function(record) {
          dataRow = tableBody.insertRow();

          var sldsSpriteReference = document.createElementNS('http://www.w3.org/2000/svg', 'use');
          sldsSpriteReference.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#account')}');
          var accountIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
          accountIcon.setAttributeNS('http://www.w3.org/2000/svg', 'aria-hidden', true);
          accountIcon.classList.add('slds-icon');
          accountIcon.appendChild(sldsSpriteReference);
          accountIconWrapper = document.createElement('span');
          accountIconWrapper.classList.add('slds-icon_container', 'slds-icon-standard-account');
          accountIconWrapper.appendChild(accountIcon);
          dataRowCellIcon = dataRow.insertCell(0);
          dataRowCellIcon.appendChild(accountIconWrapper);

          dataRowCell1 = dataRow.insertCell(1);
          recordName = document.createTextNode(record.get('Name'));
          dataRowCell1.appendChild(recordName);

          dataRowCell2 = dataRow.insertCell(2);
          recordId = document.createTextNode(record.get('Id'));
          dataRowCell2.appendChild(recordId);
        });

        if (outputDiv.firstChild) {
          // replace table if it already exists
          // see later in tutorial
          outputDiv.replaceChild(dataTable, outputDiv.firstChild);
        } else {
          outputDiv.appendChild(dataTable);
        }
      }
    }
  );
}

Data table with icons

在下一个单元中，我们在最着名的Salesforce页面之一上工作：臭名昭着的记录主页。这将把我们在单元中学到的技能和组件结合到一起，并引入一些额外的设计系统组件。

Lightning-设计（4）读取数据

学习目标

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

描述SLDS数据表和表单组件如何工作。
使用JavaScript远程对象构建包含动态数据的列表视图页面。

将数据添加到混合

让我们面对它，Web应用程序是不是很令人兴奋，除非它们包含一些数据。这个单元是关于使我们的列表视图是真实的，并使用开发者组织的一些示例数据。

我们将使用JavaScript Remote Objects访问Salesforce数据，但您也可以使用JavaScript Remoting。请注意，设计系统尚不支持Apex标签，但Visualforce可视化设计考虑事项上的Trailhead单元解释了遗留代码样式的选项，使其看起来像新的Lightning UI。

本单元中的JavaScript不在设计系统的范围之内，但它有助于将我们的一些关键组件生命化并展示它们的使用方式。再加上它会让事情变得更有趣。

数据表组件

数据表组件是用于使用Lightning UI样式显示表格数据的HTML表格的增强版本。数据表是通过将slds-table类应用于<table>标签而创建的。使用slds-table-bordered类来应用边界。

这是一个包含两列和一个标题行的示例表。您可以看到，其应用了设计系统类的熟悉的HTML标记。再次没有任何CSS可以看到。不用担心输入，下一节我们将使用Salesforce数据动态填充真实的数据表。

<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover">
  <thead>
    <tr class="slds-text-heading--label">
      <th scope="col">Account ID</th>
      <th scope="col">Account name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">123</th>
      <td>Account 1</td>
    </tr>
    <tr>
      <th scope="row">456</th>
      <td>Account 2</td>
    </tr>
  </tbody>
</table>

用动态数据填充数据表

正如我们上面提到的那样，在这个版本中，设计系统不支持内置的Visualforce组件 – <apex：*>，<chatter：*>以及其他您熟悉和喜欢的组件 – 用于布置页面和访问数据。这一点很重要。不要指望将设计系统应用到您的传统Visualforce页面，并让他们立即转化为互联网上最美丽的用户界面。

目前，我们建议使用远程对象，JavaScript Remoting或REST API从基于Design System标记的Visualforce页面访问Salesforce数据。本教程中的示例将使用远程对象。我们在这里专注于设计系统，所以虽然我们将提供完整的代码，但我们不打算深入讨论远程对象部分。如果您想了解有关这些数据访问技术的更多信息，请参阅以下资源。

我们走吧。摇动你的手来预热 – 是时候编码了。使用名称Trailhead_SLDS_Listview_Data克隆您的列表视图页面作为新的Visualforce页面。然后通过在</ head>和<body>标记之间插入以下代码，将Salesforce组织的客户记录连接为远程对象：

</head>    

<apex:remoteObjects>
  <apex:remoteObjectModel name="Account" fields="Id,Name,LastModifiedDate"/>
</apex:remoteObjects>

<body>

<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">

  <!-- 客户列表 -->
  <div id="account-list" class="slds-p-vertical--medium"></div>
  <!-- / 客户列表 -->

</div>
<!-- / PRIMARY CONTENT WRAPPER -->

<!-- JAVASCRIPT -->
<script>
  (function() {
    var account = new SObjectModel.Account();
    var outputDiv = document.getElementById('account-list');

    var updateOutputDiv = function() {

      account.retrieve(
        { orderby: [{ LastModifiedDate: 'DESC' }], limit: 10 },
        function(error, records) {
          if (error) {
            alert(error.message);
          } else {
            // create data table
            var dataTable = document.createElement('table');
            dataTable.className = 'slds-table slds-table--bordered slds-table--cell-buffer slds-no-row-hover';

            // add header row
            var tableHeader = dataTable.createTHead();
            var tableHeaderRow = tableHeader.insertRow();

            var tableHeaderRowCell1 = tableHeaderRow.insertCell(0);
            tableHeaderRowCell1.appendChild(document.createTextNode('Account name'));
            tableHeaderRowCell1.setAttribute('scope', 'col');
            tableHeaderRowCell1.setAttribute('class', 'slds-text-heading--label');

            var tableHeaderRowCell2 = tableHeaderRow.insertCell(1);
            tableHeaderRowCell2.appendChild(document.createTextNode('Account ID'));
            tableHeaderRowCell2.setAttribute('scope', 'col');
            tableHeaderRowCell2.setAttribute('class', 'slds-text-heading--label');

            //建立表体
            var tableBody = dataTable.appendChild(document.createElement('tbody'))
            var dataRow, dataRowCell1, dataRowCell2, recordName, recordId;
            records.forEach(function(record) {
              dataRow = tableBody.insertRow();

              dataRowCell1 = dataRow.insertCell(0);
              recordName = document.createTextNode(record.get('Name'));
              dataRowCell1.appendChild(recordName);

              dataRowCell2 = dataRow.insertCell(1);
              recordId = document.createTextNode(record.get('Id'));
              dataRowCell2.appendChild(recordId);
            });

            if (outputDiv.firstChild) {
              // replace table if it already exists
              // see later in tutorial
              outputDiv.replaceChild(dataTable, outputDiv.firstChild);
            } else {
              outputDiv.appendChild(dataTable);
            }
          }
        }
      );
    }
    updateOutputDiv();
  })();
</script>
<!-- / JAVASCRIPT -->

Populated data table

填充的数据表

我们在这里仍然可以做得更好。让我们互动吧。在这一步中，您将在Visualforce页面的顶部添加一个基本表单，允许用户创建一个新客户。将以下代码插入到您的主要内容包装中，在客户列表上方

<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">

  <!-- 创建新客户  -->
  <div aria-labelledby="newaccountform">

    <!-- 创建新客户表单 -->
    <form class="slds-form--stacked" id="add-account-form">
      <!-- BOXED AREA -->
      <fieldset class="slds-box slds-theme--default slds-container--small">

        <legend id="newaccountform" class="slds-text-heading--medium slds-p-vertical--medium">Add a new account</legend>

        <div class="slds-form-element">
          <label class="slds-form-element__label" for="account-name">Name</label>
          <div class="slds-form-element__control">
            <input id="account-name" class="slds-input" type="text" placeholder="New account"/>
          </div>
        </div>
        <button class="slds-button slds-button--brand slds-m-top--medium" type="submit">Create Account</button>
      </fieldset>
      <!-- / BOXED AREA -->
    </form>
    <!-- 创建新客户表单 -->

  </div>
  <!-- / 创建新客户 -->

</div>
<!-- / PRIMARY CONTENT WRAPPER -->
...

表单标记被封装到一个<div>包装器中以添加页面结构。

现在我们发现另一个设计系统组件：表单。设计系统为多种表单布局提供样式，包括水平，堆叠和内联。在这个例子中，我们使用slds-form-stacked类将一个垂直堆叠布局应用于<form>。

在表单里面是第二个包装元素，一个<fieldset>包含三个类：slds-box，slds-theme-default和slds-container-small。这三个班级创造了一个白色的，盒装的，小的区域，以保持视觉的美观和整洁。 <legend>标签中的标题在框的顶部添加了一个标题。 <legend>元素的id属性对应于包装器<div>元素的aria-labelledby属性，以实现可访问性。

每个标签和输入对都放在一个包含slds-form-element的包装盒中，以提供最佳的间距。在包装器中，<label>元素有一个slds-form-element__label类。 <input>字段放置在另一个包装器<div>中，并带有slds-form-element__control类，以提供最佳的间距。 <input>字段本身具有slds-input类。

在你的表单中添加所有这些标记和类，几乎可以自动地将所有的Lightning样式应用于自己。您添加类，我们提供所有的CSS。

我们不要忘记，用户必须能够提交表单。因此，我们包含一个<按钮>类slds-button，slds-button-brand和slds-m-top-medium。这些现在应该是不言自明的。如果没有，请参阅链接的文档。

最后，我们需要通过一种方式来连接表单，以实际保存表单的数据。我们将使用一个createAccount（）JavaScript函数来完成此工作，该函数再次使用远程对象来完成这项工作。在updateOutputDiv（）函数下面添加以下内容：

var accountForm = document.getElementById('add-account-form');
var accountNameField = document.getElementById('account-name');

var createAccount = function() {
  var account = new SObjectModel.Account();
  account.create({ Name: accountNameField.value }, function(error, records) {
    if (error) {
      alert(error.message);
    } else {
      updateOutputDiv();
      accountNameField.value = '';
    }
  });
}
accountForm.addEventListener('submit', function(e) {
  e.preventDefault();
  createAccount();
});

预览您的页面，然后尝试添加一些客户。每次您使用有效的客户名称提交表格时，表格应自动更新：

Populated data table

那真是个单位！如果你有一切工作，现在就马上做一个胜利圈。真的，你应得的！

在本单元中，我们了解了数据表和表单组件，然后使用远程对象将它们连接到实际数据。然而，这里缺少的东西不是吗？我们已经有了一个闪电式的桌子，但是有点儿单调乏味。该网页真的需要一些图标和图像来活跃起来，你不觉得吗？在下一节中，我们将给你的页面设计TLC值得。

Lightning-设计（3）网格系统

学习目标

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

描述网格系统组件如何工作。
使用网格系统布局对象主页/列表视图页面。

什么是网格系统？

除了最简单的页面和组件外，其他所有的基础都是某种布局网格。设计系统为此目的提供了一个专门的组件，这个目的被称为网格系统。如果您使用了其他CSS框架（如Bootstrap），则您将熟悉网格的概念。如果没有，非常简短地说，一个网格允许你把你的页面分成行和列。然后，您可以安排您的标记，使其呈现在特定的行/列中。网格可以嵌套，以实现复杂的布局。

设计系统网格基于CSS Flexbox，并提供灵活的，移动优先的，设备无关的脚手架系统。设计系统还包含助手类，可以用来改变网格的外观和行为，例如对齐，顺序，流动和填充。

网格系统允许您通过为小型，中型和大型屏幕定义特定布局变体来创建响应式页面。这些分别定义为480px，768px和1024px的断点。裁剪响应式页面的细节超出了本教程的范围，但如果您想了解更多信息，请参阅尺寸实用工具页面文档。

如何使用网格系统

网格系统基于两个关键构建块：网格包装（用slds-grid类指定）和其中的列（用slds-col类指定）。这是一个例子：

要开始，将slds-grid类添加到外部包装器元素。然后在里面添加所需数量的列，通过添加slds-col类到子元素。在这种情况下，我们将使用<div>元素。例如，这是一个简单的三列网格：

<div class="slds-grid">
  <div class="slds-col">Column 1</div>
  <div class="slds-col">Column 2</div>
  <div class="slds-col">Column 3</div>
</div>

Sample easy grid

默认情况下，列的大小与其内容相关。在这个简单的例子中，我们应该看到三个相同间距的列，因为它们拥有相同数量的内容。如果更多的内容被添加到其中一列，它会相对于其他内容增长。

您还可以使用大小助手类来手动指定列的大小。这些使用slds-size-X-Y格式，其中X表示总空间Y的一部分。例如，slds-size-1-2表示宽度为可用空间的50％。使用手动调整大小等级帮助程序，您可以在以下网格中指定列比率 – 2,3,4,5,6和12。

这是修改上面的例子，以便第一列填充屏幕的三分之二。

<!--  基本网格示例-->
<div class="slds-grid">
  <div class="slds-col slds-size--4-of-6">Column 1</div>
  <div class="slds-col slds-size--1-of-6">Column 2</div>
  <div class="slds-col slds-size--1-of-6">Column 3</div>
</div>

Columns in 4:1:1 width ratio

大小助手也可以用来根据屏幕大小指定不同的布局。例如，让我们创建一个两列网格，其中两列是：

全宽，并垂直排列在手机屏幕上
大小为1：1，并排排列在小屏幕上（> 480像素）
大小为3：1，并排放置在较大的屏幕上（> 768像素）

Responsive example

这里是相应的标记：

<!-- 响应网格示例 -->
<div class="slds-grid slds-wrap">
  <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--3-of-4">A</div>
  <div class="slds-col slds-size--1-of-1 slds-small-size--1-of-2 slds-medium-size--1-of-4">B</div>
</div>

创建页眉

我们来创建一个列表视图页面。我确信你在Salesforce中看到过他们。以下线框显示了我们的目标：

顶部标题，适当地摆放
主列表区
底部页脚

List view wireframe

使用以下代码创建一个名为Trailhead_SLDS_Listview的新Visualforce页面：

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Salesforce Lightning Design System Trailhead Module</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- 导入设计系统样式表 -->
  <apex:slds />
</head>
<body>

  <!-- 需要的SLDS包装 -->
  <div class="slds-scope">

    <!-- MASTHEAD -->
    <p class="slds-text-heading--label slds-m-bottom--small">
      Salesforce Lightning Design System Trailhead Module
    </p>
    <!-- / MASTHEAD -->

    <!-- PAGE HEADER -->
    <!-- / PAGE HEADER -->

    <!-- PRIMARY CONTENT WRAPPER -->
    <div class="myapp">
    </div>
    <!-- / PRIMARY CONTENT WRAPPER -->

    <!-- FOOTER -->
    <!-- / FOOTER -->

  </div>
  <!-- / 需要的SLDS包装 -->

  <!-- JAVASCRIPT -->
  <!-- / JAVASCRIPT -->
</body>
</html>
</apex:page>

<!-- PAGE HEADER -->
<div class="slds-page-header" role="banner">
  <div class="slds-grid">
    <div class="slds-col slds-has-flexi-truncate">
      <!-- HEADING AREA -->
      <p class="slds-text-title--caps slds-line-height--reset">Accounts</p>
      <h1 class="slds-page-header__title slds-truncate" title="My Accounts">My Accounts</h1>
      <!-- / HEADING AREA -->
    </div>
    <div class="slds-col slds-no-flex slds-grid slds-align-top">
      <button class="slds-button slds-button--neutral">New Account</button>
    </div>
  </div>
  <div class="slds-grid">
    <div class="slds-col slds-align-bottom slds-p-top--small">
      <p class="slds-text-body--small page-header__info">COUNT items</p>
    </div>
  </div>
</div>
<!-- / PAGE HEADER -->

List view with header complete

由于这是更高级的设计系统组件之一，我们将逐行进行。我们建议您在我们经历的时候，在您最喜欢的开发环境中打开您的源代码：

外部包装器<div>具有应用页面标题样式的类slds-page-header。里面我们有一个两列的Grid System。

第一个网格列包含两个元素，其中一个具有文本标题实用程序类，而另一个具有特定于组件的CSS类slds-page-header__title。

第二栏涉及更多一点。它有多个应用的类：slds-col slds-no-flex slds-grid slds-align-top。 slds-no-flex是设计系统布局实用程序类之一，并通过删除其flex属性来防止列自动调整大小。 slds-align-top是一个对齐工具类，用于调整列内容的垂直位置，使其与顶部对齐。

在第二列中，我们有一个Button组件，它有一个修饰符类，slds-button-neutral，它应用最小的样式。

在网格下面，页面标题的第二行是一个简单的占位符，用于列表视图中项目数的计数。

填写列表视图轮廓的其余部分

接下来，我们将添加一个简单的无序列表作为光荣的数据表的即将到来的占位符。用下面的代码替换标记中的<！ – PRIMARY CONTENT WRAPPER – >部分：

<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp">

  <ul class="slds-list--dotted slds-m-top--large">
    <li>Account 1</li>
    <li>Account 2</li>
    <li>Account 3</li>
    <li>Account 4</li>
    <li>Account 5</li>
    <li>Account 6</li>
    <li>Account 7</li>
    <li>Account 8</li>
    <li>Account 9</li>
    <li>Account 10</li>
  </ul>

</div>
<!-- / PRIMARY CONTENT WRAPPER -->

List view with layout complete

默认情况下，内容将填充屏幕宽度。如果您希望将主要内容在屏幕上水平放置或将其限制在特定宽度，请使用slds-container – * helper类之一。

设计系统样式应用于带有slds-list-dotted和slds-m-top-large类的<ul>。无可否认，这不是很令人兴奋的主要内容，只是等到下一个单位…

让我们暂且放一下。设计系统的重点是作为一个“应用程序框架”，而不是“网页框架”。为此，我们避免在默认情况下添加额外的样式。相反，开发人员可以选择手动添加其他样式，例如在本例中。这使开发人员能够更好地控制确切的布局，并且在空间有限的情况下可以产生很大的影响。在您了解设计系统时，您将会看到很多其他组件（如Button）中的默认样式假设。

要完成我们的列表视图布局框架，我们将使用另一个Grid System组件添加页脚。你现在应该成为这方面的专家！我们使用一些额外的修饰符类：

slds-p-around – large为页脚元素添加填充
slds-grid – align-spread展开主轴上的网格列，第一列从最左边开始，最后一个结束于最右边。

这里是<！ – FOOTER – >评论之间的页脚标记：

<!-- FOOTER -->
<footer role="contentinfo" class="slds-p-around--large">
  <!-- LAYOUT GRID -->
  <div class="slds-grid slds-grid--align-spread">
    <p class="slds-col">Salesforce Lightning Design System Example</p>
    <p class="slds-col">&copy; Your Name Here</p>
  </div>
  <!-- / LAYOUT GRID -->
</footer>
<!-- / FOOTER -->

List view with layout complete

最后一个注意事项：请记住，网格系统可能并不总是实现特定布局的最佳组件。例如，如果您想要并排显示图像和文本，则只需使用“媒体对象”或“拼贴”组件可能会更简单。

Lightning-设计（2）开始

学习目标

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

使用Design System设计一个基本的Visualforce页面。
描述设计系统的类结构和块元素修饰符（BEM）语法。

创建一个首页

在本模块其余部分的过程中，我们将使用设计系统构建Visualforce页面。让我们创建第一个Visualforce页面并包含设计系统。然后，我们将通过测试页面来解释设计系统的类结构。

进入安装程序，然后为“页面”快速查找，创建一个Visualforce页面。完成表格如下：

标签: Trailhead_SLDS_Basic
名称: 应该自动默认为 Trailhead_SLDS_Basic

<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Salesforce Lightning Design System Trailhead Module</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- 导入设计系统样式表-->
  <apex:slds />
</head>
<body>

  <!--  需要的SLDS包装-->
  <div class="slds-scope">

    <!-- MASTHEAD -->
    <p class="slds-text-heading--label slds-m-bottom--small">
      Salesforce Lightning Design System Trailhead Module
    </p>
    <!-- / MASTHEAD -->

    <!-- PRIMARY CONTENT WRAPPER -->
    <div class="myapp">

      <!-- 部分 - 徽章组件 -->
      <section aria-labelledby="badges">
        <h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Badges</h2>
        <div>
          <span class="slds-badge">Badge</span>
          <span class="slds-badge slds-theme--inverse">Badge</span>
        </div>
      </section>
      <!-- / SECTION - BADGE COMPONENTS -->

    </div>
    <!-- / PRIMARY CONTENT WRAPPER -->

  </div>
  <!-- / 需要的SLDS包装 -->

</body>
</html>
</apex:page>

Basic demo page

看起来像新的闪电设计，而不必自己写任何CSS。相当漂亮，是吧？

哦，不要为这些徽章数量太多而感到兴奋。他们是设计系统的组件，而不是Trailhead徽章！我们很乐意帮助你创造自己的，但是Trailhead警察会感到不安。

虽然这个例子非常简单，但它引入了很多设计系统的概念。在进入更多令人兴奋的布局之前，我们会对这些进行评估

与所有Visualforce页面一样，标记的外层包装是<apex：page>元素。

在你的html标签上，一定要包含xmlns =“http://www.w3.org/2000/svg”xmlns：xlink =“http://www.w3.org/1999/xlink”属性。这对于在Visualforce中启用对SVG图标精灵贴图的支持非常重要。注意：我们的示例显示标题，侧栏和内置样式表已关闭。目前，如果您需要使用Salesforce标题或侧栏，则无法在<html>元素上指定额外的属性。在这种情况下，不支持SVG图标。

在我们的<head>部分，我们使用<apex：slds />导入设计系统，它将加载文档中的CSS。

现在进入包含我们的第一个设计系统标记的<body>标签。我们将一行一行地通过它。由于有相当多的事情发生，我们建议在您最喜欢的编辑器中同时打开页面。我们走吧。

每次在Visualforce中使用“设计系统”标记时，都应将其放在具有slds-scope作用域类的外部包装器<div>中。每次。无论您是否拥有Visualforce标题并留下导航，或者不是。得到它了？它会在稍后的测验中。

接下来我们有一个简单的桅杆头标签，其中应用了两个设计系统类。首先，slds-text-heading – 标签应用文本标题样式。第二个类slds-m-bottom-small是一个间隔工具类，用于在标题下添加一些填充。你可能会问这些疯狂的类名是什么？这是双下划线错字？继续阅读，所有将被解释。

在<section>元素中，我们有另一个标题，这次是<h2>，用slds-m-vertical-large spacing工具类来添加顶部和底部填充。

您可能会惊讶于需要明确添加此垂直填充。重要的是要记住，设计系统侧重于应用程序的构建，而不是布置网页。因此，从排版中删除了默认页边距，以便应用程序生成器可以精确地指定他们需要的内容。

最后，我们看到我们的第一个真正的设计系统组件，一个徽章组件。其实有两个，但是谁在计数？每个通过将一个slds-badge类应用到span元素来创建。第二个徽章有一个slds主题 – 逆主题实用程序类，以反转配色方案。请注意如何将多个Design System类应用于同一个元素以逐步自定义它。在这种情况下应用徽章样式，然后反转颜色。稍后你会在模块中看到更多的内容。

这里的所有都是它的！布置你的标记，并应用相应的设计系统类为最新的闪电视觉设计。看马，没有CSS！

所有的设计系统类都记录在设计系统网站上。

SLDS类命名

在我们继续之前，让我们先谈谈在Design System类名称中提到的那些双连字号。我们的CSS使用一个叫做块元素修饰语法（BEM）的标准类命名约定来使得类名不那么含糊：

块表示高级组件（例如.car）
元素表示组件的后代（例如.car_door）
修饰符表示块或元素的特定状态或变体（例如，车门 – 红色）

现在炙手可热的问题，为什么双连字符和下划线？首先，他们可以更容易地看到CSS规则正在被应用（通过分离出块/元素和修饰符）。而且，使用双精度而不是单个连字符和下划线表示块或修饰符本身可以包含连字符或下划线，例如.slds-button__icon-x-small。给它一个去，我们认为你会发现它一样有用，因为我们一旦你习惯了。

Lightning-设计（1）

学习目标

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

描述Salesforce Lightning设计系统是什么以及它的用途。
描述设计系统所依据的关键设计原则。

介绍闪电设计系统

Salesforce用户体验团队一直在努力将Enterprise UX推向21世纪，并为能够提供Lightning设计系统而感到自豪。设计系统使您可以轻松构建符合新Salesforce Lightning外观的应用程序，而无需将UI反向设计为自定义CSS。实际上，使用新的设计系统标记会导致在没有编写任何CSS的情况下具有Lightning外观和感觉的页面。感兴趣吗？激动吗？我们是！阅读。

Lightning Design System website

闪电设计系统是相当的一口，所以我们在这里称之为“设计系统”。

您可能使用了其他类似的设计系统，例如Twitter Bootstrap或Foundation来构建网站。这个设计系统的主要好处是：

它是为构建Salesforce应用程序而量身定制的。使用Design System标记和CSS框架会生成反映Salesforce Lightning外观的UI。关注构建应用程序是一个重要的记住。设计系统不会过度执行诸如填充和边距之类的默认设置，而其他一些框架则专注于构建营销页面。设计系统可让您轻松指定所需的确切布局，同时符合新的Lightning UI。
它不断更新。只要您使用的是最新版本的设计系统，您的页面就会始终与Salesforce UI更新保持同步。
辅助功能被烘焙到组件背后的CSS框架中。
CSS完全由slds-前缀命名，并且使用slds-scope类作用域以避免CSS冲突。

设计系统捆绑了四种类型的资源来帮助您构建应用程序。

CSS framework — 定义UI组件，例如页面标题，标签和表单元素，网格布局系统和单一用途的帮助程序类，以帮助进行间距，大小调整和其他视觉调整。
Icons — 包括我们的动作，自定义，文档类型，标准和实用程序图标的PNG和SVG（包括个人和spritemap）版本。
Font — 印刷术是我们产品的核心。我们从头开始设计了全新的Salesforce Sans字体，为我们的产品提供独特的视觉语音和个性，并将其作为设计系统的一部分提供给您。
Design Tokens — 这些设计变量允许您调整视觉设计的各个方面以匹配您的品牌。可定制的变量包括颜色，字体，间距和大小。

设计系统围绕现代浏览器的功能而构建，并具有一些最低限度的浏览器要求。 Chrome，Safari和Firefox的现代版本已经过全面测试。对于Microsoft Internet Explorer（MSIE），Design System仅支持版本11和Microsoft Edge。早期版本的MSIE的用户可能会遇到诸如缺少图标等问题。

核心设计原则

设计系统代表的Lightning Experience UI是使用四个核心设计原则制作的。我们鼓励您在开发应用程序时记住它们。

清晰 —消除歧义。使人们有信心地看到，理解和行动。新的用户界面减少了混乱，使用户可以很容易地找到他们需要的信息。
效率— 简化和优化工作流程。智能地预测需要帮助人们更好，更聪明，更快地工作。例如，新的Lightning用户界面按钮可以改善行动号召力。
一致性 — 通过对相同的问题应用相同的解决方案，创造熟悉性并增强直觉。例如，新UI在所有上下文中强制执行一个按钮样式。
美丽 — 通过周到和优雅的工艺，展现对人们时间和关注的尊重。一个UI可以美丽吗？我们这么认为！

你可以在哪里使用设计系统

新的设计系统使得在一系列技术堆栈中构建符合Lightning的Salesforce应用程序变得简单易行。

Visualforce pages 通过远程对象或JavaScript远程访问来访问Salesforce数据。设计系统还不兼容<apex>标签，但请留意这个空间。
Lightning pages and components 可用于Salesforce1和Lightning Experience
Mobile apps 通过Mobile SDK或其他API访问Salesforce
Standalone web apps Heroku或类似平台提供

模块先决条件

该模块的其余部分包括一些有趣的手动技术工作。在您进入之前，请查看以下先决条件：

您必须有权访问Salesforce开发者帐户。
示例页面假设您具有Web开发（HTML，CSS，JavaScript）和Salesforce管理的一些知识。
该模块着重于使用Visualforce页面中的设计系统，因此有一定的技术经验是有益的。但是，尽管代码示例是特定于Visualforce的，但您可以在其他堆栈中重复使用它们，但只需进行较小的自定义操作。