Aura Basics

Aura基础知识

我最近在Salesforce Lightning框架上工作了很多,并在将Salesforce Classic Apps转换为使它们准备好了,完成了超过5个大型小型项目。让我总结我最近学到的内容。

什么是光环?

Aura是一个用于开发移动和桌面设备的动态Web应用程序的UI框架。AURA支持桥接客户端和服务器的分区多层组件开发。它使用客户端的javascript和服务器端的Java。

下面的屏幕截图只是给你一个暗示Aura应用程序的外观:

 What is an APP?
截图上方的线“一个光环的外观和感觉 应用程序“。 Word App(粗体)就像在Aura中的容器,即它包含具有其字段和按钮的组件。让我们对以上屏幕截图进行一点技术说明。组件文件将具有 .cmp. 扩展名为应用程序将有。应用程序 扩大。

组件aura_basic(aura_basic.cmp)

<aura:component >

<!-- Below div is used for header designing -->

<div class="slds-page-header" role="banner">

     <div class="slds-grid">

       <div class="slds-col">

         <p class="slds-text-heading--label">Aura</p>

         <h1 class="slds-text-heading--medium">Component</h1>

       </div>

     </div>

   </div>

<!-- this form is being design so as to create complete  input form -->

    <form class="slds-form--stacked">     

<div class="slds-form-element slds-is-required">

         <div class="slds-form-element__control">

             <ui:inputText aura:id="expname" label="Input Text Field"  class="slds-input" labelClass="slds-form-element__label"/>

         </div>

    </div>
    <div class="slds-form-element slds-is-required">

         <div class="slds-form-element__control">

             <ui:inputNumber aura:id="amount" label="Number Field"  class="slds-input" labelClass="slds-form-element__label"/>
         </div>

     </div>
     <div class="slds-form-element">

         <div class="slds-form-element__control">

             <ui:inputDate aura:id="expdate" label="Date Field" class="slds-input" labelClass="slds-form-element__label" displayDatePicker="true"/>

         </div>

     </div>
     <div class="slds-form-element">

         <ui:inputCheckbox aura:id="reimbursed" label="Checkbox" class="slds-checkbox" labelClass="slds-form-element__label"/>

     </div>
     <div class="slds-form-element">

         <ui:button label="Submit" class="slds-button slds-button--brand" />

     </div>
    </form>

</aura:component>

 

 应用程序(aura_basicapp.app):
<!– “force: slds”  attribute is used to give the page as lightning effect–>

<aura:application extends=”force:slds”>

<c:aura_basic />

</aura:application> 

 

闪电捆绑:

现在让我向你介绍一下这个词 雷击。 闪电捆绑基本上,以下文件的协作名称:

  • 成分
  • 控制器JS文件(客户端javascript文件)
  • 帮手 JS文件(服务器端JavaScript文件)
  • 样式文件(CSS文件)
  • 渲染器
  • 文件
  • SVG(折旧)

我们基本上在前四个文件(粗体)上工作。 SVG用于图标,但它已经过时,现在Salesforce正在引入闪电图标。

让我们单独讨论组件,控制器JS,Helper JS和样式文件。

成分: 组件是应用程序的独立和可重复使用的单位。它们代表UI的可重复使用部分,可以从单一文本到整个应用程序的粒度范围。

组件可以包含其他组件,以及HTML,CSS,JavaScript或任何其他支持Web的代码。这使您可以构建具有复杂UI的应用程序。

控制器JS: 客户端控制器处理组件内的事件。它是一个JavaScript资源,用于定义所有组件的函数’行动。客户端控制器被括号和卷曲括号包围,以表示包含名称值对地图的JSON对象。

({

myAction : function(component, event, helper){

// add code for the action

}

}) 

 

每个动作函数需要三个参数:

  • 组件 - 控制器所属的组件。
  • 事件 - 动作正在处理的事件。
  • 助手 - 组件的助手,可选。帮助程序包含可以通过组件包中的任何JavaScript代码重用的函数。    

帮手JS: 辅助资源是组件捆绑的一部分,并通过命名约定自动接线,<componentName>Helper.js。要使用Developer控制台创建帮助程序,请单击组件侧栏中的Helper。此辅助文件在范围内有效 它是自动连线的组件。

以下代码向您展示了如何调用Controller中的Updatileem Helper函数,该函数可以与自定义事件处理程序一起使用。

控制器JS文件:

({

newItemEvent : function(component, event, helper){

helper.updateItem(component, item, callback);

}

})

 

帮手 JS文件:

({

updateItem : function(component, item, callback){

//Update the items via a server-side action

var action = component.get(“c.saveItem”);

action.setParams({“item” : item});

//Set any optional callback and enqueue the action

if (callback){

action.setCallback(this, callback);

}

$ a.EnqueueAction(行动);

}

})

 

CSS文件: 使用CSS拟合您的组件。让’查看样本hellohtml.cmp组件。 CSS位于Hellohtml.css中。

 

组件来源:

<aura:component>

<div class=”white”>

Hello, HTML!

</div>

<h2>Check out the style in this list.</h2>

<ul>

<li class=”red”>I’m red.</li>

<li class=”blue”>I’m blue.</li>

<li class=”green”>I’m green.</li>

</ul>
<br/>
</aura:component>

CSS来源:

.THIS {

background-color: grey;

}

.THIS.white {

background-color: white;

}

.THIS .red {

background-color: red;

}

.THIS .blue {

background-color: blue;

}

.THIS .green {

background-color: green;

}

 

完成示例:
让我们一瞥光环,在那里提交帐户名称,您将获得与该帐户相关的所有联系人。

应用:

<aura:application extends=”force:slds”>

<c:GetContactList />

</aura:application>

 

成分:

<aura:component Controller=”ContactListAura”>

  <aura:attribute name=”contList” type=”Object[]” />

<div class=”slds-page-header” role=”banner”>

<div class=”slds-grid”>

<div class=”slds-col”>

<p class=”slds-text-heading–label”>Aura</p>

<h1 class=”slds-text-heading–medium”>Component</h1>

</div>

</div>

</div>

<form class=”slds-form–stacked”>

<div class=”slds-form-element slds-is-required”>

<div class=”slds-form-element__control”>

<ui:inputText aura:id=”accName” label=”Input Text Field”  class=”slds-input” labelClass=”slds-form-element__label” placeholder=”Enter Account Name”/>

</div>

</div>

<div class=”slds-form-element”>

<ui:button label=”Submit”  class=”slds-button slds-button–brand” press=”{!c.getSubmit}” />

</div>

<table class=”slds-table slds-table_bordered slds-table_cell-buffer”>

<thead>

<tr class=”slds-text-title_caps”>

<th scope=”col”>

<div class=”slds-truncate” title=”Name”>Name</div>

</th>

</tr>

</thead>

<tbody>

<aura:iteration items=”{!v.contList}” var=”item”>

           <tr>

                <td>{!item.Name}</td>

            </tr>

    </aura:iteration>

</tbody>

</table>

</form>

</aura:component>

 

控制器:

({

getSubmit : function(component, event, helper){

Helper.getContactListhelper(组件,事件,助手);

},

})

 

帮手:

({

getContactListHelper : function(component, event, helper) {

var action = component.get(“c.getContactLists“);

action.setParams({

“nm” : component.find(“accName“).get(“v.value”)

});

action.setCallback(this, function(a){

component.set(“v.contList“, a.getReturnValue());

console.log(‘v.contList ‘+component.get(“v.contList”));

});

$ a.EnqueueAction(行动);

}

}

})

APEX类:

public class ContactListAura {

@AuraEnabled

public static List<Contact>getContactLists(String nm){

system.debug(‘nm–> ‘+nm);

if(!String.IsBlank(nm)){

return [SELECT ID,Name FROM CONTACT WHERE Account.Name=:nm];

}

return null;

}

}

 

页面流程:

<aura:attribute name=”contList” type=”Object[]” />

第一行之后 <aura:component> 将用于显示组件上的数据。 W.母鸡我已将帐户名称输入到输入文本中,然后单击“提交“。它诱发了 getsubmit. 客户端JS的方法I.。 Controller JS method.

在控制器JS中。

帮手.getContactListhelper(组件,事件,助手);

会打电话给 帮手JS. 方法i.E. 服务器端JS。 在Helper JS线路中

var action = component.get(“c.getContactLists”);

在APEX类中授予AUREENABLED方法的引用 (我们设置了Aura的Controller属性:组件 标签名称 ApexClass Name.)

action.setParams({

           “nm” : component.find(“accName”).get(“v.value”)

       });

 

将设置Apex方法的SET参数,其中包含我们在输入文本中插入的值 Aura ID. as 录音。

action.setCallback(this, function(a){

           component.set(“v.contList”, a.getReturnValue());

           console.log(‘v.contList ‘+component.get(“v.contList”));

       });

 

此行将设置我们将在组件上使用的变量来显示数据。

在上面的赛段中,““关键字用于引用已调用完整执行的当前组件。

$ a.EnqueueAction(行动);

此行最为重要,因为它负责获取Apex类的返回结果,并将其设置为我们将要使用该组件的属性/变量。

注意:字母v用于访问变量,而C用于访问控制器。

SLD之间的差异& Aura Components

SLD之间的差异& Aura Components

我们都知道 闪电 最近已被添加到Salesforce,这是Salesforce的未来。所以很多人都有新的闪电,但有好奇心,有时会发现很难理解。我意识到最佳启动方法是通过描述Salesforce雷电设计系统和Salesforce Lightning组件框架之间有什么差异。所以在这个博客中,我将尝试解释Salesforce Lighting Design System和Salesforce Lightning Components框架之间的主要差异是什么,希望它将清除新开发人员对雷电框架的大多数疑问。

Salesforce Lightning.设计系统简介

它是一个CSS框架,用于创建动态Web应用程序。通过使用SLD,我们可以响应我们的应用程序,也可以提供类似于闪电体验的外观。

安装SLD的步骤Unmanaged Packaged:在我们的Salesforce Org中使用SLD。首先,我们需要安装未被托管包装为静态资源ZIP文件的最新Salesforce Lightning设计系统。

  • 登录您的开发人员组织。
  • 在单独的窗口中打开Salesforce Lightning设计系统。
  • 转到下载部分。
  • 单击最新的非托管包
  • 现在单击“安装”。

完成上述步骤后,程序包将安装到您的组织中。

使用Salesforce Lightning设计系统的好处:

  • 通过使用SLDS,更容易构建响应的应用程序,也有类似的应用程序 260662闪电体验。
  • 它与谷歌Chrome,最新的Mozilla Firefox,最新的Safari最新Internet Explorer 11及以上等多种浏览器兼容。
  • 它提供了一种强大的网格系统,因为它更容易构建响应性布局,响应于不同屏幕尺寸优雅地工作。
  • CSS与SLDS-前缀完全命名为避免CSS冲突。

闪电组件框架简介 

它是使用开源Aura框架建造的。通过使用Aura框架,我们可以完全构建应用程序,完全独立于Salesforce Org中存在的数据。

闪电组件框架的好处:
  • 它为构建应用提供了一组开箱组组件
  • 当我们使用闪电组件框架时,我们不需要担心我们对不同设备的应用程序优化,因为组件通过自己处理这一点。
  • 它使用的状态客户端和无状态服务器体系结构,该架构在客户端上使用JavaScript来管理UI组件元数据和应用程序数据。
  • 它使用事件驱动架构,增强了组件之间的解耦。
  • 它支持最新的浏览器技术,如HTML5,CSS3。
 使用开发人员控制台:

开发人员控制台为我们提供了这些工具 用于开发组件和应用程序。通过使用开发人员控制台,我们可以执行以下功能

  • 我们需要使用文件选项来创建或打开以下闪电资源:
    • 应用
    • 成分Interface.
    • 事件
  •  我们需要使用侧边栏来创建或打开客户端资源。
  • 成分
  • 控制器
  • 帮手
  • 风格
  • 文件
  • 使成为
SLD和Aura之间的差异

免费矢量文件-EPS-87250 框架:

  • 首先,Salesforce Lightning设计系统是基于CSS的框架。
  • 用于在另一个手中创建动态应用程序,闪电组件框架使用Aura组件来创建动态应用程序。

控制器:

  • 在闪电组件框架的情况下,我们需要为客户端编写两个控制器,另一个用于服务器端。在Salesforce闪电设计系统的情况下,我们需要只编写一个控制器,该控制器将成为服务器侧控制器。

注意:Java Script客户端控制器我们将写入闪电组件框架将使用JavaScript编写,而服务器侧控制器将使用顶点写入。

PPO3aSalesforce数据:

  • 通过使用闪电组件框架,我们可以构建一个应用程序,该应用程序将完全独立于Salesforce数据,而在Salesforce Lightning设计系统(SLD)中需要一些Salesforce数据,可以使用JavaScript远程对象访问。

客户中心:

  • 闪电组件框架是客户端为中心的,而Salesforce Lightning Design System是服务器侧中心。

表现:

  • 因为闪电组件是客户端以中心为中心,因此它们更好。
  • 配备创建动态Web应用程序,然后是Salesforce Lightning设计系统。

手机友好:

  • 如上所述,闪电组件是客户端中心,因此与Salesforce Lightning设计系统(SLD)相比,它们更加移动友好。

事件驱动的编程

  • 在闪电组件框架事件中,诸如JavaScript和Java Swing等诸如JavaScript和Java Swing的诸如当时Salesforce设计系统发生但在Salesforce设计系统中的响应界面事件的帮助者中的写作者则不会用于编写效果事件的帮助程序。

复杂

  • 因为在闪电组件框架中,我们需要创建两个控制器,并且它也使用事件驱动的编程语言,如JavaScript,因此,与Salesforce Lightning设计系统(SLD)相比,复杂很多