Lightning框架示例 - 动态建立Lightning组件

动态建立Lightning组件

组件化前端开发是Lightning框架的优点之一。在进行Lightning应用开发时,我们可以将组件进行嵌套、引用,从而实现模块的封装和重用,提高开发效率。

组件的嵌套和引用最常用的方法是在Lightning组件中直接使用组件标签,比如:

<aura:component controller="ExampleController">
    <c:ExampleChildComponent />
</aura:component>

在这段代码中,正在进行开发的Lightning组件中静态地引用了“ExampleChildComponent”组件。

另一种方法就是在控制器或辅助函数的Javascript代码中动态建立组件,主要使用“$A.createComponent()”函数(官方文档)。

本文将通过一个实例来阐述如何动态建立组件。

示例目标

本示例的目标是实现一个类似于Salesforce标准列表视图的应用,可以显示一个电话为“1234567890”的“客户”对象的列表,并可以更改它们的名字。

示例将包含以下几个部分:

  • Lightning应用
  • 列表组件,用于显示“客户”对象的列表
  • 更新组件,在运行时动态建立,包括一个文本框和提交按钮,接收用户的输入并将输入的值更新到“客户”对象的“名字”字段中
  • Lightning事件,用于在组件中传递数据

建立Lightning组件的Apex控制器

建立一个Apex类,取名为“AccountListViewController”,作为即将建立的Lightning组件的控制器。在这个Apex类中我们将编写“客户”对象相关的函数,包括了查找“客户”对象和更新“客户”对象。

为了演示简单起见,我们略去异常处理以及单元测试等代码。

代码如下:

public class AccountListViewController {
    @AuraEnabled
    public static String loadAccounts() {
        List<Account> accountList = [SELECT Id, Name, AccountNumber, Phone, Website FROM Account WHERE Phone = ‘1234567890‘];

        return JSON.serialize(accountList);
    }

    @AuraEnabled
    public static String updateAccount(String jsonString) {
        Account acc = (Account)JSON.deserialize(jsonString, Account.class);

        update acc;

        return ‘Success‘;
    }
}

建立更新事件

为了在两个组件中传递数据(列表组件、更新组件),需要建立一个Lightning事件,取名为“accountListViewEvt”,其中包含了“客户”对象的ID和名字两个属性。

代码如下:

<aura:event type="COMPONENT">
    <aura:attribute name="accountId" type="String" />
    <aura:attribute name="accountName" type="String" />
</aura:event>

建立更新组件

建立一个新的Lightning组件,命名为“AccountNameUpdateCmp”,用于接收用户的输入,其中包含:

  • 两个属性:“客户”的ID和名字
  • 输入框,用于让用户输入“客户”名字
  • 提交按钮,用于调用更新的函数
  • 事件注册,用于调用刚才建立的更新事件,传递数据

组件外观代码如下:

<aura:component >
    <aura:attribute name="accountId" type="String" access="public" />
    <aura:attribute name="accountName" type="String" access="public" />

    <aura:registerEvent name="accountListViewEvt" type="c:accountListViewEvt" />

    <div class="slds-form slds-form_horizontal">

        <div class="slds-form-element">
            <label class="slds-form-element__label">名字</label>
            <div class="slds-form-element__control">
                <lightning:input value="{!v.accountName}" />
            </div>
        </div>

        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning:button variant="brand" label="Submit" onclick="{!c.submit}" />
            </div>
        </div>
    </div>
</aura:component>

组件控制器代码如下:

({
    submit : function(component, event, helper) {
        var cmpEvent = component.getEvent("accountListViewEvt");

        cmpEvent.setParams({
            ‘accountId‘: component.get(‘v.accountId‘),
            ‘accountName‘: component.get(‘v.accountName‘),
        });

        cmpEvent.fire();
    },
})

从上面可以看出:

  • 此组件没有相关联的Apex控制器,只负责接收用户输入的值,作为“客户”对象的名字
  • 当用户点击提交按钮后,在控制器中使用“component.getEvent()”函数启用更新事件,并用“fire()”函数将用户的输入发送出去。

接下来要建立的列表组件将动态创建此组件,并在此组件执行结束后接收用户的输入(通过更新事件发送的值)。

建立列表组件

建立一个Lightning组件,取名为“AccountListViewCmp”,并在其中建立:

  • 一个列表类型的属性,用于存储要显示的“客户”对象
  • 一个表格,用于显示“客户”对象的内容
  • 一个初始化函数,用于读取“客户”对象
  • 一个创建更新组件的函数,动态建立更新组件
  • 一个事件处理函数,用于在更新组件提交后接收用户的输入,并通过Apex控制器更新“客户”对象的名字

组件外观的代码如下:

<aura:component controller="AccountListViewController">
    <!-- 将需要动态建立的组件作为依赖注册在此 -->
    <aura:dependency resource="c:AccountNameUpdateCmp" />

    <!-- Aura.Component[] 类型的属性用于保存动态建立的组件 -->
    <aura:attribute name="updateWidget" type="Aura.Component[]" access="public" />

    <aura:attribute name="accountList" type="Object[]" access="public" />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <!-- 在更新事件启动之后,接收事件传递的值,并更新“客户”对象 -->
    <aura:handler name="accountListViewEvt" event="c:accountListViewEvt" action="{!c.handleUpdate}"/>

    <!-- 这个部分默认是隐藏的,其中包括了变量“updateWidget”,所以更新组件建立后将被显示在此 -->
    <div>
        <section role="dialog" tabindex="-1" aria-modal="true" class="slds-modal" aura:id="modalBody">
            <div class="slds-modal__container">
                <div class="slds-modal__content slds-p-around_medium">
                    {!v.updateWidget}
                </div>
            </div>
        </section>
        <div class="slds-backdrop" aura:id="modalBackdrop"></div>
    </div>

    <!-- 列表的外观,用于显示“客户”对象 -->
    <table class="slds-table slds-table_bordered">
        <thead>
            <tr class="slds-text-title">
                <th scope="col">
                    <div class="slds-truncate" title="客户名">客户名</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="电话">电话</div>
                </th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.accountList}" var="acc">
                <tr>
                    <td>
                        <div class="slds-truncate">
                            <a class="slds-th__action" href="javascript:void(0);" role="button"
                                onclick="{!c.startUpdate}" data-account-id="{!acc.Id}" data-account-name="{!acc.Name}">
                                {!acc.Name}
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="slds-truncate">
                            {!acc.Phone}
                        </div>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>

</aura:component>

组件的控制器代码如下:

({
    doInit : function(component, event, helper) {
        helper.loadAccountList(component, helper);
    },

    startUpdate : function(component, event, helper) {
        var accountId = event.currentTarget.dataset.accountId;
        var accountName = event.currentTarget.dataset.accountName;

        // 动态建立更新组件,并将“客户”的ID和当前的“名字”的值传递到更新组件中
        $A.createComponent(
            "c:AccountNameUpdateCmp",
            {
                "accountId": accountId,
                "accountName": accountName
            },
            function(newComponent, status, errorMessage){
                if (status === "SUCCESS") {
                    component.set(‘v.updateWidget‘, newComponent);

                    var modalBody = component.find(‘modalBody‘);
                    var modalBackdrop = component.find(‘modalBackdrop‘);
                    $A.util.addClass(modalBody,‘slds-fade-in-open‘);
                    $A.util.addClass(modalBackdrop,‘slds-backdrop--open‘);
                }
            }
        );
    },

    handleUpdate : function(component, event, helper) {
        // 在更新事件结束后,得到其中包含的值,即“客户”对象的ID和用户输入作为对象新名字的值
        var updateInfo = {
            Id: event.getParam(‘accountId‘),
            Name: event.getParam(‘accountName‘)
        };

        // 调用Apex控制器的代码进行更新
        var action = component.get(‘c.updateAccount‘);
        action.setParams({
            jsonString: JSON.stringify(updateInfo)
        });
        action.setCallback(this, function(response) {
            var result = response.getReturnValue();
            if (result == ‘Success‘) {
                helper.loadAccountList(component, helper);
            }
        });
        $A.enqueueAction(action);  

        var modalBody = component.find(‘modalBody‘);
        var modalBackdrop = component.find(‘modalBackdrop‘);
        $A.util.removeClass(modalBody,‘slds-fade-in-open‘);
        $A.util.removeClass(modalBackdrop,‘slds-backdrop--open‘);
    },
})

辅助函数代码如下:

({
    loadAccountList : function(component, helper) {
        var action = component.get(‘c.loadAccounts‘);
        action.setCallback(this, function(response) {
            var result = response.getReturnValue();
            var accountList = JSON.parse(result);
            component.set(‘v.accountList‘, accountList);
        });
        $A.enqueueAction(action);
    },
})

建立Lightning应用

建立一个Lightning应用,取名为“AccountListViewApp”,包含了刚才的列表组件。代码如下:

<aura:application extends="force:slds">
    <c:AccountListViewCmp />
</aura:application>

小结

动态建立组件可以实现组件的灵活复用。

比如上面示例中的更新组件,我们可以再增加几个属性,扩展为通用的文本更新组件。它没有相关联的Apex控制器,没有很多逻辑,只负责接收和发送文本框中的数据(相关的逻辑由调用此组件的代码来处理)。

当然,动态建立的组件本身也可以包括Apex控制器和相关的逻辑,但是这样会增加和服务器端的通讯次数。为了保证运行效率,我们最好让它们只负责客户端的操作。

Salesforce对于动态建立的组件有垃圾回收机制,这只限于组件被创建后赋值给了“Aura.Component[]”类型的属性。当此组件不再被使用时,会被自动清除。

对于更新“客户”对象的“名字”功能,上面的示例有些过度设计了。但是在实际应用中,可以对和该示例类似的结构进行扩展,用于更复杂的场景,比如对于外部数据的CRUD操作(CRUD操作需要通过网络服务使用,Salesforce的默认功能可能无法使用)。

原文地址:https://www.cnblogs.com/chengcheng0148/p/create_dynamic_lightning_components.html

时间: 2024-10-01 03:09:17

Lightning框架示例 - 动态建立Lightning组件的相关文章

Python框架之Django的相册组件

Python框架之Django的相册组件 恩,没错,又是Django,虽然学习笔记已经结贴,但是学习笔记里都是基础的,Django的东西不管怎么说还是很多的,要学习的东西自然不会仅仅用十几篇博文就能学习的完的.好了,废话不多说,今天介绍的是Django的一个开源的组件photologue,组件被作者放在了Github上,想看源码的点击这里. 准备工作 下载组件.下载地址在这里: http://code.google.com/p/django-photologue/ 解压缩后,进入目录下执行命令行

salesforce lightning零基础学习(六)Lightning Data Service(LDS)

本篇可参看:https://trailhead.salesforce.com/modules/lightning_data_service Lightning中针对object的detail页面,一个lightning app可能包含了多个components,多个components不可避免的会对这个数据进行CRUD操作,如果我们针对每个component都在init操作时后台SQL进行查询,然后赋值给前台变量,进行CUD操作时,还要考虑其他component的数据是否要级联的改变,这种操作以

React-redux框架之connect()与Provider组件 用法讲解

react-redux 在react-redux 框架中,给我提供了两个常用的API来配合Redux框架的使用,其实在我们的实际项目开发中,我们完全可以不用react-redux框架,但是如果使用此框架,就如虎添翼了. 我们来简单聊聊这两个常用的API connect() Provider 组件 React-Redux 将所有组件分成两大类:UI 组件(presentational component)和容器组件(container component). UI 组件 UI 组件有以下几个特征.

Ext如何动态添加一行组件

用的column布局,点击一个按钮能添加一行组件,如文本框,有下拉框等. 如: 效果: 实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

Oracle 动态建立分区表

由于数据太多为了加快检索 将一个表建为分区表 在数据插入是动态添加临时表 as -- Local variables here fq_dm varchar(30); p_count number; -- p_fadm number; p_sql varchar(100); begin -- Test statements here --查询zkz的所有分区 -- SELECT partition_name FROM useR_TAB_PARTITIONS WHERE TABLE_NAME='zh

我的开源框架之交互控制、组件通用工具封装

需求: (1)后期的jquery组件具有一些通用的需求,如ajax请求,数组的处理等 (2)从系统UI与服务器集成的角度看,一个系统的前端交互需要做一个统一的封装来接受用户交互,同时统一于服务器的请求 (3)前端的日志功能需要统一 (4)统一的验证入口 (5)综上:我们需要一个封装了通用表单操作(表单转对象,对象填充到表单,打开一个窗口),封装系统前端的统一ajax交互,ajax交互返回格式统一以便做统一处理. 初步代码实现(后期将会根据实际需求调整) 1 /******************

关于对象的动态建立和释放

#include<iostream> //对象的动态建立和释放 using namespace std; class Object { public: Object() { cout<<"构造函数\n"; }; void prinT() { cout<<"woshi dayinhanshu \n"; } ~Object() { cout<<"析构函数\n"; } private: protected

JavaScript动态修改html组件form的action属性

用javaScript动态修改html组件form的action属性,可以在提交时再决定处理表单的页面. <%--JavaScript部分--%><script language="javascript">    <%--略掉其余代码--%>    if(usertypevalue=="company"){         document.form.action="./company.jsp"        

动态添加Ugui组件

动态添加Ugui组件 动态添加是指:在场景中有一个canvas,使用代码,动态添加一个没有canvas的prefab,但是这个prefab需要挂载到canvas下,就是canvans下的ugui组件 如果anchors 的min和max 不是 (0.5, 0.5)的时候就会有问题,添加的位置是不对的, 具体什么原因不是很懂, 与锚点有关系 一下代码就可以避免这种情况 1 GameObject obj = Resources.Load<GameObject>("btn_info_tes