Lightning-组件（2）入门

学习目标

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

描述什么是Lightning组件框架，以及它的用途。
列出Lightning组件和其他Web应用程序框架之间的四个主要区别。
列出至少五种不同的方式，您可以使用Lightning组件来自定义Salesforce。

Lightning组件入门

是!你仍然和我们在一起！我们非常高兴地欢迎您来到Lightning Component派对，这是一个派对。当我们说Lightning组件是我们多年来建立的最令人兴奋和最强大的应用程序开发技术时，这是一个大胆的说法。我们知道这是事实，因为我们使用它构建了Salesforce应用程序和Lightning Experience。我们认为，一旦了解Lightning组件，您就会像使用它一样兴奋。

什么是闪电组件框架？

Lightning组件是为移动和桌面设备开发Web应用程序的UI框架。这是一个现代的框架，用于为Force.com应用程序构建具有动态响应用户界面的单页面应用程序。它在客户端使用JavaScript，在服务器端使用Apex。

这是很多流行语。让我们看看我们是否不能再次尝试，用正常的人使用的话。

Again, looking at a very high level architecture

“闪电组件是一个开发Web应用程序的框架。”这似乎是可以理解的。应用程序框架是代码和服务的集合，使您可以更轻松地创建自己的自定义应用程序，而无需亲自编写所有代码。有很多不同的Web应用程序框架，比如Ruby on Rails，Grails，AngularJS，Django，CakePHP等等。我们甚至有我们自己的，Visualforce，客户知道和爱。闪电组件是新的，我们认为它是非常特殊的。我们将讨论为什么它更特别，希望在本单元的最后，你会同意！

“移动和桌面设备的网络应用程序。”再次，这似乎很容易掌握。但是…你注意到那里的订单吗？ Lightning组件诞生于并用于构建移动应用程序的Salesforce平台。 Mobile已经成为Lightning组件的核心，它使开发移动和桌面设备的应用程序比许多其他框架更简单。

“这是一个用于构建单页应用程序的现代框架。”好的，现在我们有点嗡嗡了。 “现代”只是营销，对不对？什么是“单页面应用程序”？

我们不认为现代是“只是”营销。在“闪电体验开发”模块中，我们详细地讨论了Web应用程序如何从简单的，逐页面向的体验演变为具有与原生应用程序相同的行为和交互性的高响应性应用程序，在台式机上尤其是在移动设备上。为了实现这些交互式用户体验，现代Web应用程序被构建为从单个URL加载的紧密绑定的代码集合，然后在您使用它时连续运行。这些单页面应用程序的构建与本机应用程序非常相似，其中管道由一个框架处理。像Lightning组件这样的框架。

“Force.com应用程序的动态响应用户界面”只是将上述想法应用于您在Salesforce之上构建的应用程序。最后，“它在客户端使用JavaScript，在服务器端使用Apex”本身就是不言自明的，即使它遗漏了一些关于什么地方的具体细节。我们很快就会做到的

示例闪电组件

好吧，这是很多谈话谈话，而不是很多的代码。让我们来看看一个真正的Lightning组件，看看这些话题是什么。首先，这是屏幕上显示的组件的外观：

Lightning component: not much to look at, but a fair bit going on

它看起来可能不多，但是还有一点点。这是它的代码;这是我们稍后将详细介绍的一个组件。

<aura:component>

    <aura:attribute name="expense" type="Expense__c"/>
    <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>

    <!-- 如果费用报销 - 将项目变为绿色 -->
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme--success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
            Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
           Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle" 
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around--small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

<lightning：card>围绕一组信息创建一个容器。
<lightning：formattedDateTime>显示格式化的日期和时间。
<lightning：relativeDateTime>显示当前时间和提供的时间之间的相对时间差。

注意

什么是名字（空间）？闪电命名空间提供了许多使用Salesforce Lightning Design System或SLDS的UI组件。我们建议您尽可能在闪电命名空间中使用组件。例如，使用<lightning：input>而不是<ui：inputText>，<ui：inputNumber>等等。大多数输入类型，如文本，数字，电子邮件，还有更多可供您使用。

我们将在后面的单元中找到其余的组件。现在，最后需要注意的是，使用静态HTML和许多以“slds”开头的CSS类名称。我们将使用SLDS来设计我们的组件，虽然我们不会在这个模块中详细解释SLDS，但是我们希望您看到它的实例。

好的，酷，Lightning组件标记是XML。但是，我们之前没有谈过关于JavaScript的东西吗？请注意切换开关上的onchange =“{！c.clickReimbursed}”属性，这是一个真正复杂的复选框，可左右滑动以表示已选中和未选中的值。这意味着“当这个值改变时，调用控制器的clickReimbursed函数。”让我们看看它附加的代码。

({
    clickReimbursed: function(component, event, helper) {
        var expense = component.get("v.expense");
        var updateEvent = component.getEvent("updateExpense");
        updateEvent.setParams({ "expense": expense });
        updateEvent.fire();
    }
})

什么关于Visualforce？

我们从客户那里得到的问题是：“我应该使用Lightning组件还是Visualforce？”简短的回答是：是的！

Visualforce和Lightning组件各有其优势。这些在Lightning Experience开发模块中进行了讨论，您可以在这里找到关于每个模块适当使用的长篇答案。在这里，让我们去中等。

首先知道这个：Visualforce不会消失。您的Visualforce代码将在很长一段时间内在Salesforce上运行。您无需转换现有的Visualforce应用程序，也无需停止使用Visualforce创建应用程序。

但是，至少在某些情况下，您可能会想要。例如，Visualforce是在手机上的移动应用成为事物之前创建的。虽然您可以使用Visualforce开发移动应用程序，但是没有任何内置组件是精通移动的。这意味着你写更多的代码。另一方面，Lightning组件专门针对移动设备进行了优化。

再次，我们在Lightning Experience模块的开发中介绍了很多具体内容。如果您仍然对Visualforce和Lightning组件有疑问，那么接下来就是一个好的选择。

关于AngularJS，React和其他JavaScript框架呢？

另一个经常出现的问题是：“Lightning组件如何与MyFavoriteFramework进行比较？”这个最喜欢的框架是另一个现代的JavaScript Web应用框架，比如AngularJS，React或者Ember。

这些都是很好的框架！很多人都认识他们，有很多资源可以学习。您可能会惊讶地发现，我们认为这些框架是构建Force.com应用程序的好方法！

我们建议使用Visualforce，使用我们所谓的容器页面，并将您选择的框架和应用程序代码打包到静态资源中。通过使用空的容器页面，Visualforce可以自由使用，并让您使用所选框架的全部功能。

尽管可以在Lightning组件中使用第三方JavaScript框架，但这有点麻烦。 Lightning组件没有空白页面的概念，并且对于如何执行数据访问以及一些相当具体的安全需求有一些特定的意见。

坦率地说，Lightning组件和大多数现代框架的功能重叠了很多。尽管样式或细节可能不同，但所提供的功能在概念上相似，足以使您有效地运行重复代码。这既不有效也不容易。

另一件需要考虑的事情是：像AngularJS这样的通用框架被设计成与他们在特定数据服务上运行的平台无关。另一方面，Lightning Components设计用于本地连接Salesforce和Force.com平台提供的服务。你认为哪种方法可以帮助你更快地构建应用程序？

注意

我们只是在这里讨论应用程序框架。如果您有一个最喜欢的JavaScript图表或映射库或其他特殊用途的工具包，则受到某些安全要求的限制，现代JavaScript库通常可以正常工作。

好吧，足够的话语单词！让我们快速浏览一下您可以部署Lightning组件应用程序的许多地方。然后让我们深入了解有趣的东西：代码。

你可以在哪里使用闪电元件

您可以使用Lightning组件以多种不同的方式自定义您的Salesforce组织。但是，这不是全部！您可以使用Lightning组件创建托管在Salesforce上的独立应用程序。您甚至可以创建托管在其他平台上的应用程序，包括将这些应用程序从这些平台嵌入到应用程序中。

将应用添加到Lightning Experience应用启动器

您的Lightning组件应用程序和自定义选项卡位于应用程序启动器中，您可以通过单击标题中的“应用程序启动器 App Launcher icon ”图标进行操作。

点击一个自定义的应用程序（1）来激活它。导航栏中显示的应用程序中的项目，包括您添加到应用程序的任何Lightning组件选项卡。请注意，您需要将组件添加到选项卡，以便可以在应用启动器中访问它们。所有项目（2）中均可找到不在应用程序中的闪电组件选项卡。

将应用添加到Lightning Experience和Salesforce App Navigation

如上例所述，您可以将Lightning组件选项卡添加到应用程序，并在应用程序的导航栏中显示为项目。

Add built-in components to the main navigation

为Lightning App Builder和社区生成器创建拖放组件

使用您自己的Lightning组件或从AppExchange安装的桌面和移动设备构建自定义用户界面。

Create Drag-and-Drop Components for Lightning App and Community Builder

将闪电组件添加到闪电页面

Lightning Page是一种自定义布局，可让您设计在Salesforce移动应用程序或Lightning Experience中使用的页面。您可以使用Lightning Page来创建应用程序主页，并将您最喜爱的Lightning组件（如我们将在此模块中创建的Expenses应用程序）添加到该主页中。