在Visualforce页面中使用Lightning组件

到目前为止，您已经学会了如何使您的Visualforce页面看起来像Lightning Experience，并学习了创建Lightning组件的基础知识。你甚至已经创建了一个很棒的Similar Properties组件。

但是还有最后一件事情要完成，这真是太神奇了。

我们将采用类似的属性组件，并在Visualforce中使用它！是的，你没看错。闪电组件不仅仅是闪电体验。使用闪电，我们可以在任何地方使用闪电组件！

第1部分 – 创建容器应用程序

要在Lightning体验外使用Lightning组件，我们需要将其封装在Lightning应用程序中。闪电应用程序基本上是一个闪电组件，它运行在自己的窗口中，没有典型的Lightning Experience UI（例如全局导航）。事实上，在这个项目中，您已经多次使用了Lightning应用程序。闪电应用程序生成器是一个闪电应用程序！

1. 在开发者控制台中，点击 New > Lightning Application. 将其命名为SimilarPropertiesApp并选择Lightning Out Dependency App。

   通过选择Lightning Out Dependency App，应用程序实现extends =“ltng：outApp”，它基本上告诉App使用Lightning Out框架。

2. 为组成SimilarProperties组件的三个组件中的每个组件添加一个依赖关系 – 用以下代码替换缺省代码：

   <aura:application extends="ltng:outApp" >
       <aura:dependency resource="c:SimilarProperties" />
     <aura:dependency resource="c:SimilarProperty" />
       <aura:dependency resource="c:SimilarPropertyEdit" />
       <aura:dependency resource="markup://force:*" type="EVENT"/>
   </aura:application>
   

   我们基本上告诉Lightning应用程序，我们将使用这些Lightning组件。即使其他组件仅包含在SimilarProperties组件中，也包含所有组件。

   我们将该组件添加到Visualforce页面，所以我们需要确保当用户点击属性名称时，我们正在正确处理该记录的导航。这意味着我们需要检测组件是在Lightning Experience页面上使用，正在Lightning Experience中显示的Visualforce页面中使用，还是在Salesforce Classic中的Visualforce页面中使用。

   最后的依赖包括force：namespace中的事件，例如导航事件。当Lightning组件在Lightning Experience中运行时，它将自动访问这些事件。所以我们不必为了在navToRecord函数中调用$ A.get（“e.force：navigateToSObject”）而做任何事情。在Lightning Experience的Visualforce页面中运行的Lightning组件也可以访问这些事件，但语法略有不同。但是，在Salesforce Classic的Visualforce页面中运行Lightning组件时，我们必须使用完全不同的方法来执行导航等操作。

3. 保存文件。

第2部分 – 更新Visualforce页面

由于我们已经有一个嵌入在Property Record页面中的Visualforce页面，所以我们可以更新标记来使用Similar Properties组件。

1. 在开发人员控制台中，选择 File > Open Resource, 然后打开“Similar_Properties.vfp”页面。
2. 更新页面如下：

   <apex:page standardController="Property__c" standardStylesheets="false" applyBodyTag="false">
   
       <style>
           html, body {
           margin: 0;
           padding: 0;
           }
           #lightningComponent {width: 100%;}
       </style>
   
       <div id="content">
           <div id="lightningComponent" />
       </div>
   
   </apex:page>
   

   不要恐慌，但是，你基本上只是摧毁了页面。没关系，因为页面只包含Lightning组件，我们将把这个组件放在带有lightningComponent的id的<div>中。

第3部分 – 在Visualforce页面中加载SimilarProperties组件

1. 在打开的<apex：page>标签之后立即添加<apex：includeLightning />标签。

   该指令在页面中包含Lightning Out框架。

2. 在关闭</ apex：page>标记之前立即添加以下JavaScript代码：

   <script>
   var recordId = '{!Property__c.Id}';
   var myUserContext = "{!$User.UITheme}";
   $Lightning.use("c:SimilarPropertiesApp", function() {
       $Lightning.createComponent("c:SimilarProperties",
                                  {recordId: recordId},
                                  "lightningComponent",
                                  function(cmp) {
                                      $A.eventService.addHandler({
                                          event: 'force:navigateToSObject',
                                          handler: function(event) {
                                              if (myUserContext == 'Theme4t' || myUserContext == 'Theme4d') {
                                                  // Visualforce页面位于S1或Lightning Experience中
                                                  sforce.one.navigateToSObject(event.getParams().recordId);
                                              } else if (myUserContext == 'Theme3') {
                                                  // Visualforce页面正在Classic中运行
                                                  window.parent.location = '/' + event.getParams().recordId;
                                              } else {
                                                  console.log("Unsupported theme");   
                                              }
                                          }
                                      });
                                  }
                                 );
   });
   </script>
   

   这是魔术发生的地方！该脚本从标准控制器中检索记录的Id并获取用户的主题，并将其分配给变量。然后$ Lightning.use（）指示页面包含您刚刚创建的SimilarPropertiesApp。然后在应用程序中创建SimilarProperties组件的一个实例，将recordId传递给组件，然后将它放在页面中具有lightningComponent的id的<div>中。

   最后，在创建组件之后，我们添加了一个事件处理程序$ A.eventService.addHandler，并将force：navigateToSObject事件声明为我们有兴趣监听的事件。当用户点击组件中的一个Property Name时，脚本拦截对$ A.get（“e.force：navigateToSObject”）的调用并执行定义为该处理程序的函数。这个函数使用脚本第二行定义的myUserContext变量来检测用户的主题。如果用户的主题是Theme4t（Salesforce1）或Theme4d（Lightning Experience），则脚本将使用在Lightning Experience内的Visualforce页面中运行的Lightning Component的正确语法来触发navigateToSObject方法。如果用户的主题是Theme3，则我们知道Classic中的用户，并使用window.parent.location指示页面导航到新页面。

3. 保存文件。
4. 刷新“属性记录”页面并向下滚动到“类似属性”部分以查看组件。
   雷电体验类似的属性部分。

   

   多么酷啊？这是Lightning页面中Visualforce页面中的闪电组件。这是一个Salesforce Turducken！

5. 单击组件中的“属性名称”以确认导航正在工作。
6. 点击您的个人资料图片，然后选择切换到Salesforce Classic。
7. 在最近的项目列表中点击一个属性。
8. 向下滚动以查看在Salesforce Classic中运行的美丽的Lightning组件！
   
9. 单击组件中的不同Property Name，然后使用脚本中的window.location方法导航到正确的记录。
10. 点击你的名字，然后选择切换 Switch back to Lightning Experience.

    轻拍自己的背部！您不仅创建了令人惊叹的Lightning组件，还了解了在Visualforce中利用Lightning组件的轻松方式，无论您是在Lightning Experience中还是在Salesforce Classic中使用Visualforce页面。接下来的步骤中，您可能需要编辑页面布局编辑器中的页面布局，以使Visualforce页面的空间更高一些。但是我们会把这个留给你。现在是时候吹嘘一下，去展示你的同事们！