salesforce lightning 入门（一）

本文参考自原文：

salesforce lightning零基础学习(三) 表达式的！(绑定表达式)与 #(非绑定表达式)

salesforce lightning零基础学习(二) lightning 知识简单介绍----lightning事件驱动模型

原文作者写的很详细，我只是copy过来，稍加改动，如有侵权，请联系我。

 

Lightning

1. aura:id

A local ID is an ID that is only scoped to the component. A local ID is often unique but it’s not required to be unique.

e.g.

Note: aura:id doesn't support expressions. You can only assign literal string values to aura:id.为了避免出错，所以一般都用aura:id而不是用html 标签自带的id属性，避免出错。

1. Component

一个component是一个包含了定义着的资源信息，标签，也可以包含表达式或者是其他可选的资源，比如controller属性信息，stylesheet等信息。lightning component中头标签为，所有的内容均需要在此内容中编写。一个component中也可以嵌套其他的component，父、子的component引用时，父的style sheet样式会影响到子。

1. 1. implements="force:appHostable"

创建一个componet用于自定义的lightning tab；

1. 1. implements="flexipage:availableForAllPageTypes"and access="global"

创建一个component用于lightning page或者用于lightning app builder；

1. 1. implements="flexipage:availableForRecordHome,force:hasRecordId" and access="global" 

创建一个component用于lightning的记录home page，此种方式可以直接应用当前记录的ID；

1. 1. implements="forceCommunity:availableForAllPageTypes" and access="global" 

创建一个component用于Community Builder；

1. 1. implements="force:lightningQuickAction"

创建一个component用于quick action。

1. Lightning Component 基础知识
   1. 部分页面元素

此标签用于声明Component中需要引用的内容信息的变量。

此标签用于引入自定义的注册事件。

此标签用于处理自定义的注册事件以及标准的事件，比如初始化（init）等handler。

 此标签用于引入静态资源

1. 1. 1. 元素标签

lightning封装了很多元素标签，常用的可以归纳为容器(container)元素，按钮(button)元素，导航(navigation)元素，可视化(Visual)元素，字段(Field)元素以及格式化(format)元素。

1. 1. 元素详解

lightning中，Component attribute很像apex中的成员变量，他们可以使用表达式语句应用在组件元素标签中进行信息渲染。

attribute必须有两个属性：name以及type， aura:attribute写法如下.

    

    test for {!v.testAttribute}

 

上面的demo声明了一个类型为string的attribute，名称为testAttribute。组件如果引用相关的属性信息，引用方式为{!v. + attributeName}。lightning中，使用"v"去访问attribute内容（v可以简单的理解成view）。如果想要在后面设置attribute的值，也可以通过来更改attribute值，aura:set通常可以和标签一起使用。

 attribute的type基本涵盖了所有的类型，type取值如下：

基本类型：

• Boolean：定义一个布尔类型attribute。eg:
• Date：定义一个日期类型，不含Time，默认格式：YYYY-MM-dd。 eg: 
• Datetime：定义一个日期类型，含Time。eg:
• Decimal：定义一个浮点型小数，比Double类型更容易接收currency类型的数据。eg:
• Double： 定义一个double类型小数，通常可以被Decimal替代
• Integer：定义一个整数类型。eg:
• Long：定义一个长整型类型，如果Integer盛装不了，需要使用Long。eg:aura:attribute name="numRecords" type="Long" />
• String：定义一个字符串类型。eg:

(注：上述基本类型也可以使用数组类型，eg:)

函数类型：与javascript类型相一致的attribute 类型。

对象类型：定义一个自定义的object或者sObject类型。eg:Account" />

集合类型：

• type[](Array)：声明一个数组类型。eg:
• List：声明一个有序列表(和type[]相似，个人认为此处可以替代为type[])。eg:
• Map：声明一个Map类型，包含键值对。eg:
• Set：声明一个无序列表。eg:

自定义Java类型：如果创建Java类型，这个类必须要实现JsonSerializable接口。

特定的Frame-work类型（Framework-Specific）：

• Aura.Action：传递一个action到lightning:component中。eg:

: 通常用于创建完自定义event后，将event注册到component中，从而通过aura:handler将event进行装载。event包含系统自带的标准事件（init/change等）以及自定义事件，aura:registerEvent用于注册自定义事件。

: lightning中提供了一些标准和自定义事件，将事件装载到lightning component中需要使用aura:handler。标准的事件举例：init（lightning component初始化触发，相当于VF page中的构造函数或者action声明内容）,change（某个aura:attribute改变自动触发）。aura:handler写法如下：

上面的demo声明了一个针对childAttr的change事件，当childAttr更改以后，便会执行controller.js的onChildAttrChange方法。

（点击可查看event的Best Practice）

元素标签：

aura framework提供了大量的可以直接使用的元素标签用来开发，用户也可以通过slds样式更改成需要的样式。官方提供了很多可以直接使用的标签，以ui: / lightning: aura: 开头。元素标签的样式使用slds进行渲染，如果想查看某个元素标签样式或者想要更改相关的样式，可以先查看lightning design system中元素的渲染方式。元素标签可以包含几大类来汇总：

容器组件

lightning:accordion / lightning:accordionSection : 可折叠容器

lightning:card ：卡牌装容器，用于展示一组信息

lightning:layout/lightning:layoutItem : Grid容器

lightning:tab/lightning:tabset : Tab标签

lightning:tile : 瓷砖模型,用于展示一条记录的相关信息

按钮组件

lightning:button: 普通按钮

lightning:buttonIcon:只有一个html icon的按钮

lightning:buttonGroup：一组按钮

lightning:buttonMenu/lightning:menuItem: 一个drop-down 列表展示action

导航组件

lightning:breadcrumb/lightning:breadcrumbs: 展示当前操作记录的层级导航

lightning:tree： 树形结构

lightning:verticalNavigation： 垂直排列的链接列表

可视化组件

lightning:avatar: 对象的可视化表示 （一个图像）

lightning:badge：包含少量信息的文本块标签 

lightning:datatable： 显示table布局 

lightning:dynamicIcon： 动画效果icon

lightning:helptext： hover后提示信息效果

lightning:icon： 显示一个图标

lightning:pill： 展示一个显示X号的内容，可以显示或者不显示

lightning:progressBar： 展示一项操作的进程条

lightning:progressIndicator：进程指示器，显示进程线

lightning:spinner: 显示Loading图形

字段组件

lightning:checkboxGroup ：复选框 

lightning:combobox ：提供一个用户输入的并且可以autocomplete的控件 

lightning:dualListbox ： 两个list间移动option。类似multi picklist效果 

lightning:fileUpload ： 提供上传文件的框

lightning:fileCard ： 展示一系列的上传的文件

lightning:input ： 默认展示输入框，根据type不同展示不同效果。

lightning:radioGroup：展示一组单选按钮

lightning:select：展示一个包含多个option的菜单

lightning:slider : 展示一个可以滑动效果指定范围的输入框 

lightning:inputRichText： 富文本编辑器

lightning:textArea： textArea 

格式化组件

以下标签都是只读的

lightning:formattedDateTime ：格式化 data & time

lightning:formattedEmail ：格式化 email

lightning:formattedLocation  ：使用经纬度格式化Location

lightning:formattedNumber ：格式化数字

lightning:formattedPhone：格式化电话号码

lightning:formattedRichText：格式化富文本区域

lightning:formattedText：格式化字符串

lightning:formattedUrl：格式化URL

一个元素标签包含local ID,global ID。local id 作用域为当前的component，使用aura:id 属性来创建一个local id。aura:id不支持表达式，只支持普通的字符串值作为local id.

local id 理论上是唯一的，但是不强制唯一，比如一组checkbox元素标签，可以设置他们的local id是相同的。local id可以用于在javascript中通过local id获取到元素本身或者元素列表。

eg:

controller或者helper中可以通过cmp.find("name")即可获取到 aura:id为name的元素（或者元素列表），如果不存在所要搜索的aura:id，则返回undefined.

controller.js/helper.js中针对一个元素获取它的local id，可以通过cmp.getLocalId()方法获得。

Global id 很像classic中visualforce 元素组件中的id,运行时生成，并且是唯一的。
eg:
global id可以用来区分不同元素的组件实例化或者用于debugging操作。针对一个组件元素获取它的global id,可以通过cmp.getGlobalId()获取。

1. Controller js介绍

因为component不允许写任何的js，即使类似οnclick="alert(xxx);"这种js也是被禁止的，所以controller js部分作用是至关重要的。它管理着Component中所有的事件驱动操作（即它控制该页面）。

这里假设我们在'showMyInfo' componet中有一个按钮名字是'Button1'，绑定了一个'onclick'事件，οnclick="{!c.handlerClick}".上面我们说过，针对元素组件引用attribute的值，使用v（v代表了view）。

当我们点击按钮或者触发了注册的事件后，会执行controller.js里面的方法，需要写{!c.functionName},其中c可以理解为 client-side controller，functionName为在controller.js中声明的方法名称。

当我们为一个component bundle新建一个Controller js时，我们会发现，每个Controller方法里面默认都有3个参数：

• cmp ： 代表当前操作的action所在的component，这里指的是showMyInfo
• event：代表当前action操作所触发的事件，通过事件可以获取到当前事件所对应的元素；
• helper：helper代表当前的componet对应的helper.js，当然这个参数不是必须的，helper文件可以写js内容用来和后台server controller交互（这样只是为了规范）。当然，如果你想把和server controller交互的代码写在当前的controller js中，也是可以的。
  1. cmp

我们通常用cmp可以获取和设置attribute值，通过cmp.get('v.attributeName')即可获取到lightning component中attribute名称为attributeName的值。通过cmp.set('v.attributeName','testAttributeValue')即可设置lightning componet中名称为attributeName的attribute的值为testAttributeValue.当然，cmp可不止获取设置attribute值这么简单，还可以通过cmp.getEvent('eventName')获取注册的事件等等。我们平时用的cmp比较多的功能就是这两个了。

1. 1. event

event代表当前操作的事件，比如当上面的用户点击了按钮，可以通过event.getSource()获取到事件源Button1以及获取到事件源自身的属性等信息；可以获取到事件源的事件操作。

1. 1. helper

helper代表了helper.js的实例化变量，你可以通过helper.helperMethod用来处理具体的逻辑，包括和后台交互；处理结果集；功能性的方法重用等等。因为有了helper，你的代码有了更好的可读性，可维护性以及可重用性。

 

下面通过几行简单的代码来了解cmp以及event的用法。

1. var btnClicked = event.getSource();此行代码可以理解为获取到点击的button的dom element
2. var btnMessage = btnClicked.get("v.label"); 通过element的get方法可以获取到这个元素上面的属性值，获取属性值或者获取其他的组件中的元素信息，需要使用'v.'来获取；
3. component.set("v.message", btnMessage); 更新component中名称为message的attribute值。
4. controller中有可能有多个方法，每个方法之间使用‘，’分隔；最后一个方法不能有‘，’。

({

    handleClick: function(component, event, helper) {

        var btnClicked = event.getSource();         // the button

        var btnMessage = btnClicked.get("v.label"); // the button's label

        component.set("v.message", btnMessage);     // update our message

    },
　　 handleClick2: function(component,event,helper) {
　　 }
})

1. Helper js 介绍

 如果是controller.js负责了component中的所有业务逻辑，那么helper js就承包了所有的业务细节处理或者公用的方法（显示隐藏loading等）。helper一般需要component这个参数，其他参数可以根据实际需要自动从controller.js获取以及传递。这里举例一个调用后台并对返回数据进行处理的例子。想要连接后台，需要准备以下的工作：

1. 1. lightning component 的controller属性设置此component后台引用的controller,用法和classic用法相同；
   2. controller（后台）方法需要为静态方法，并且需要添加@AuraEnabled（即返回JSON数据）注解。如果有classic经验的可以想一下remote action的后台要求，把@RemoteAction改成@AuraEnabled就好。

createItem: function(component, camping) {

    var action = component.get("c.saveItem");

    action.setParams({

        "camping": camping

    });

    action.setCallback(this, function(response){

        var state = response.getState();

        if (state === "SUCCESS") {

            var items = component.get("v.items");

            items.push(response.getReturnValue());

            component.set("v.items", items);

        } else if(status == "INCOMPLETE") {
            console.log('execute');
        } else if(status == "ERROR") {
　　　　　　　console.log('error');
        }

    });

    $A.enqueueAction(action);

 }

上述例子功能为后台调用saveItem方法，camping作为参数传递到后台，然后异步调用。调用成功后将这个item写入到前台的camping列表中。

其中有几点需要注意：

1.我们通常使用component.get('v.something')来调用前台的一些属性元素等，在这里使用component.get('c.backgroundMethod')可以调用到后台的方法；

2.通过setParam可以对方法设置参数,通过setCallBack可以对这个方法进行异步处理，我们通常会将这种调用后台的方法进行异步结果处理；

3.response的状态主要有三种：SUCCESS/INCOMPLETE/ERROR。建议方法中将三种情况都进行处理，比如INCOMPLETE展示遮罩层，ERROR/SUCCESS进行相应的业务处理以及解除遮罩等；

4.需要将action放在队列里面，让他排队进行执行。$A为lightning中封装的一个global变量，除了enqueueAction方法外还有很多常用的方法，后面会有涉及，有兴趣的自行查看。

1. .cmp和.app中!和#赋值差别
   1. !方式

此种方式又可以理解为绑定的表达式，即对attribute的赋值非一次性的，改变会贯穿着始终。子项如果修改了这个attribute的赋值，也会影响到父中此attribute的值；同样的，如果父中对此attribute有更改，也会作用到子component中的引用上。

1. 1. # 方式

可以理解成非绑定的表达式，即有嵌套的lightning component,父对子传值仅初始化有效，后期父对这个attribute value的变化不会影响到子，同样子对这个attribute  value的变化同样不会影响到父

1. 公共js方法引用
   1. Helper中

在Helper.js中引用公共js方法，可以直接用this.methodname调用；e.g.:

Helper functions are similar to client-side controller functions in shape, surrounded by parentheses and curly braces to denote a JavaScript object in object-literal notation containing a map of name-value pairs. A helper function can pass in any arguments required by the function, such as the component it belongs to, a callback, or any other objects.

({

    helperMethod1 : function() {

        // logic here

    },


    helperMethod2 : function(component) {

        // logic here

        this.helperMethod3(var1, var2);

    },


     helperMethod3 : function(var1, var2) {

         // do something with var1 and var2 here

    }

})

To call another function in the same helper, use the syntax: this.methodName, where this is a reference to the helper itself. For example, helperMethod2 calls helperMethod3 with this code.

this.helperMethod3(var1, var2);

1. 1. controller中调用公共js

controller中不能调用controller中其他function，

如需调用功能js方法，需要先在helper中定义，再在controller中调用。E.g.:

Add a helper argument to a controller function to enable the function to use the helper. Specify (component, event, helper) in the controller. These are standard parameters and you don't have to access them in the function. You can also pass in an instance variable as a parameter, for example, createExpense: function(component, expense){...}, where expense is a variable defined in the component.

The following code shows you how to call the updateItem helper function in a controller, which can be used with a custom event handler.

/* controller */

({

    newItemEvent: function(component, event, helper) {

        helper.updateItem(component, event.getParam("item"));

    }

})

Helper functions are local to a component, improve code reuse, and move the heavy lifting of JavaScript logic away from the client-side controller where possible. The following code shows the helper function, which takes in the valueparameter set in the controller via the item argument. The code walks through calling a server-side action and returning a callback but you can do something else in the helper function.

/* helper */

({

    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(action);

    }

})