Aura基础知识

经过 Akshay. | 2017年3月18日 | Salesforce Aura组件, Salesforce Lightning.

我最近在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正在引入闪电图标。

让’s talk about Component, Controller JS, Helper JS and Style file individually.

成分： 组件是应用程序的独立和可重复使用的单位。它们代表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;

}

完成示例：
让’s have a glimpse of Aura where on submitting the Account Name you will get all the contacts related to that Account.

应用：

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