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);20 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 组件的基本开发, 以及组件与后台之间的数据交互问题, 有错误的地方欢迎指出, 有疑问的欢迎在评论区留言
来源: https://www.cnblogs.com/luqinghua/p/8990266.html