我最近在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文件)
  • Helper 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);

}

})

 

Helper 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中。

Helper.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用于访问控制器。