lightning的组件区分标准组件、自定义组件和AppExchange组件。标准组件由SF提供,自定义组件由developer自行开发,AppExchange组件由合作伙伴建立。下面我们写一个简单的列表demo来学习下自定义开发组件Component。
第一步:新建一个对象:电影,API:Movie__c,下表是其相关的字段
字段名 | 字段API | 字段类型 | 描述 |
电影名称 | Name | 文本 | |
主演 | ToStar__c | 文本(255) | |
主题曲 | Theme__c | 文本(255) | |
导演 | Director__c | 文本(255) | |
上映时间 | ShowTime__c | 日期 |
第二步:创建一个Component,命名为MyTest_Movie
这时候想必已经有注意到在右侧栏有一列属性如下图:
可以点击这些选项卡看看里面都是什么内容
COMPONENT:
类似与H5页面,将H5页面进行框架式(aura)封装,并能够与Js Controller和Helper进行交互,通过Css进行渲染,也可以调用slds提供的标准样式, 理解为view,叫做组件;
CONTROLLRT:
view层的控制层,能够与view层进行数据交互,是对Js的封装,进行异步页面处理,能够调用helper层的逻辑;
HELPER:
从开发规范来说,是逻辑层,将逻辑代码封装在此供Js Controller进行调用,可以写一些公共方法,同时可以进行与后台apex类进行交互;
STYLE:
针对cmp组件进行渲染,实现页面效果;
简单说,每一个选项卡对应的都是Component的一个子文件,把这些合并在一起我们称之为Bundle。Bundle翻译过来是一批,捆之类的词,也就是说,一个Bundle是包含了component,controller,Helper,Style等文件的一个集合。
下面我们完善MyTest_Movie.cmp
<aura:component controller="MyTestMovieController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="results" type="List" description="电影列表"/>
<aura:attribute name="count" type="Integer" default="0" description="电影记录数"/>
<div> <table id="mTable">
<thead>
<tr>
<th><div>电影名</div></th>
<th><div>导演</div></th>
<th><div>主演</div></th>
<th><div>主题曲</div></th>
<th><div>上映时间</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.results}" var="item">
<tr>
<td><div>{!item.Name}</div></td>
<td><div>{!item.Director__c}</div></td>
<td><div>{!item.To_Star__c}</div></td>
<td><div>{!item.Theme__c}</div></td>
<td>
<lightning:formattedDateTime value="{!item.Release_Time__c}" year="numeric" month="numeric" day="numeric" />
</td>
</tr>
</aura:iteration>
</tbody>
</table>
<div> </div>
<span style="float:right;">共{!v.count}条记录</span>
</div>
</aura:component>
其中的 “<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>”调用了MyTest_MovieController.js中的doInit方法,其中"c"代表的
JS文件中的Controller,其中MyTest_MovieController.js文件如下
({
doInit : function(component, event, helper) { }
})
可以看到现在的doInit方法是空的,然后我们将MyTest_Movie添加到应用程序MyTest.app中进行查看,(Ctrl+Shift+A查看当前所有lightning组件)
<aura:application >
<c:MyTest_Movie />
</aura:application>
点击预览,界面如下
界面效果可以说是很简陋了,然后呢,我们在MyTest_Movie.css中添加一点点样式,设置全局默认字体大小与颜色,控制表格样式,看看CSS是如何控制这个页面显示的
.THIS {
font-size: 12px;
color:red;
}
.THIS table th{
border: 1px solid blue;
color:blue;
padding:15px;
border-width:1px 1px 1px 1px;
}
其中要注意的是,“.THIS”是lightning的component的选择器,必须有,不写则会提示错误
Failed to save MyTest_Movie.css: Issue(s) found by CSS Parser (0Ad7F000000rGrH): CSS selector must begin with '.cMyTest_Movie' or '.THIS' (line 5, col 1)
|
重新预览页面效果
第三步是创建一个Apex类,MyTestMovieController
/*********
* Author:ricardo
* Time:2018-03-21
* Function:MyTest_Movie 后台控制类
* Test:
*/
public class MyTestMovieController{
//初始化
@AuraEnabled
public static List<Movie__c> GetAll(){
List<Movie__c> movieList = new List<Movie__c>();
movieList = [select ShowTime__c,ToStar__c,Theme__c,Director__c,Name from Movie__c limit 50];
return movieList;
}
}
接下来完善MyTest_MovieController.js
({
doInit : function(component, event, helper) {
helper.Init(component,event);
}
})
完善MyTest_MovieHelper.js
({
// 初始化加载
Init : function(component,event){
// 调用后台类
var action = component.get("c.GetAll");
// 设置回调函数
action.setCallback(this,function(response){
// 返回状态
var state = response.getState();
if(state == 'SUCCESS'){
var movieList = response.getReturnValue();
if(movieList == 0){
component.set("v.message",true);
}else{
component.set("v.message",false);
}
//参数传递
component.set("v.results",movieList); component.set("v.count",movieList.length);
}
});
// 队列处理
$A.enqueueAction(action);
}
})
此时初始页面就开发完成了,我们可以查看存储在系统中的电影列表了
到这里为止,我们从系统中获取数据,并显示在页面已经完成了(虽然页面丑的令人难以直视QAQ),那么接下来我们将回顾下这段代码中的运行流程。
不同于传统的MVC架构,Salesforce的lightning使用的架构是VCCM架构
数据从服务器的数据库(M)到页面(V)上被显示出来还经过了后台控制器(APEX Controller)与前端控制器(JAVASCRIPT Controller)两层控制。以上面的Movie为例
具体的运行过程如图所示,需要注意一点的是,APEX类中的方法需要与lightning组件进行交互,则必须加注解: @AuraEnabled
最后,对于这个简陋的页面,我们来使用一次lightning自带的样式库修饰一番
<aura:component controller="MyTestMovieController">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="results" type="List" description="电影列表"/>
<aura:attribute name="count" type="Integer" default="0" description="电影记录数"/>
<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">电影名</div></th>
<th scope="col"><div class="slds-truncate">导演</div></th>
<th scope="col"><div class="slds-truncate">主演</div></th>
<th scope="col"><div class="slds-truncate">主题曲</div></th>
<th scope="col"><div class="slds-truncate">上映时间</div></th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.results}" var="item">
<tr>
<td><div class="slds-truncate">{!item.Name}</div></td>
<td><div class="slds-truncate">{!item.Director__c}</div></td>
<td><div class="slds-truncate">{!item.ToStar__c}</div></td>
<td><div class="slds-truncate">{!item.Theme__c}</div></td>
<td>
<lightning:formattedDateTime value="{!item.ShowTime__c}" year="numeric" month="numeric" day="numeric" />
</td>
</tr>
</aura:iteration>
</tbody>
</table>
<div> </div>
<span class="slds-size_small" style="float:right;">共{!v.count}条记录</span>
</div>
</aura:component>
最后要注意的一点是,给组件加上相关的样式后,在预览之前,要给MyTest.app继承lightning的样式库文件:extends="force:slds"
<aura:application extends="force:slds">
<c:MyTest_Movie />
</aura:application>
预览相关页面如下
总结:本篇主要介绍了component组件的基本开发,以及组件与后台之间的数据交互问题,有错误的地方欢迎指出,有疑问的欢迎在评论区留言
Salesforce Lightning开发学习(二)Component组件开发实践的更多相关文章
-
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
-
Android开发 QRCode二维码开发第三方框架
前言 Android开发里二维码开发经常用到,这里简单的介绍下Android开发里的二维码. 最广泛使用的二维码库zxing zxing是最广泛的二维码库各个平台都可以适用它,但是Android平台使 ...
-
Swift开发学习(二):Playground
http://blog.csdn.net/powerlly/article/details/29674253 Swift开发学习:Playground 关于 对于软件用户.游戏玩家,大家一直都在提倡用 ...
-
vue前端开发那些事——vue组件开发
vue的学习曲线不是很陡(相比其它框架,如anglarjs),官方文档比较全面,分为基础篇和高级篇.我们刚开始学习的时候,肯定像引用jquery那样,先把vue的js引进来,然后学习基础内容.如果仅仅 ...
-
angular2 学习笔记 ( Component 组件)
refer : https://angular.cn/docs/ts/latest/guide/template-syntax.html https://angular.cn/docs/ts/late ...
-
vue.js原生组件化开发(一)——组件开发基础
前言 vue作为一个轻量级前端框架,其核心就是组件化开发.我们一般常用的是用脚手架vue-cli来进行开发和管理,一个个组件即为一个个vue页面,这种叫单文件组件.我们在引用组件之时只需将组件页面引入 ...
-
吴裕雄--天生自然Android开发学习:1.2 开发环境搭建
现在主流的Android开发环境有: ①Eclipse + ADT + SDK ②Android Studio + SDK ③IntelliJ IDEA + SDK 现在国内大部分开发人员还是使用的E ...
-
微信小程序开发(二)----- 云开发
1.概念 微信小程序的云开发是腾讯云与微信团队深度合作推出的一个全新的小程序的解决方案,它提供了云函数.云数据库与云存储这三大基础能力支持,随着云开发的出现,小程序的开发者可以将服务端的部署和运营的环 ...
-
基于GBT28181:SIP协议组件开发-----------第二篇SIP组件开发原理
原创文章,引用请保证原文完整性,尊重作者劳动,原文地址http://www.cnblogs.com/qq1269122125/p/3937590.html,qq:1269122125. 上一节中讲的S ...
随机推荐
-
C语言中关于对目录的操作
原文地址:C语言中关于对目录的操作 目录的操作不论是在嵌入式产品还是应用软件编程都是必不可少的,不同的开发语言可能略有不同,笔者主要是讨论在Linux平台下对目录的一系列操作: 1.获取当前目录操作: ...
-
python生成随机密码
有时候我们会想生成一个随机密码,这样我们通过Python中的一些随机方法,就可生成我们任意长度和复杂度的密码,代码如下: # -*- coding=utf-8 -*- import random im ...
-
sqlmap注入小结
sqlmap注入时: 1.判断可注入的参数 2.判断可以用那种SQL注入技术来注入 3.识别出哪种数据库 4.根据用户选择,读取哪些数据 sqlmap支持五种不同的注入模式: 1.基于布尔的盲注,即可 ...
-
IntelliJ 有的时候移动滚动条后会自动回到光标所在位置的解决方法
关闭有道词典的取词.划词功能.
-
Deep Learning: Assuming a deep neural network is properly regulated, can adding more layers actually make the performance degrade?
Deep Learning: Assuming a deep neural network is properly regulated, can adding more layers actually ...
-
jsp页面加载readyState的五种状态根据我们状态添加进度条
这段代码放在页面最下面 原文如下: document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. function subSomet ...
-
用JS画斐波那契螺旋线(黄金螺旋线)
偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...
-
每天一个linux命令(63):Linux中zip压缩和unzip解压缩命令详解
文章转自:http://www.jb51.net/LINUXjishu/105916.html 1.把/home目录下面的mydata目录压缩为mydata.zipzip -r mydata.zip ...
-
基于HTML5 Canvas的CSG构造实体几何书架
CSG 构造实体几何这个概念在工业水利水电施工上.游戏上已经有很多人使用了,最简单的实体表示叫作体元,通常是形状简单的物体,如立方体.圆柱体.棱柱.棱锥.球体.圆锥等.根据每个软件包的不同这些体元也有 ...
-
php 依赖注入的实现
当A类需要依赖于B类,也就是说需要在A类中实例化B类的对象来使用时候,如果B类中的功能发生改变,也会导致A类中使用B类的地方也要跟着修改,导致A类与B类高耦合.这个时候解决方式是,A类应该去依赖B类的 ...