云苍穹自定义控件开发

2020-08-01  本文已影响0人  涎涎

正文

什么是自定义控件?

自定义控件,顾名思义即是开发者可以自己开发业务组件。苍穹本身提供比较丰 富的通用控件,业务控件。特殊业务场景下,系统提供的控件无法满足需求,例如需要 使用甘特图,时间轴等系统内本身没有的组件,此时通过自定义控件,按照苍穹自定义 控件的标准封装,即可把这些组件引入到系统中。自定义控件也有特定的JAVA插件事 件,在表单插件中可以轻松获取到自定义控件的数据或者往自定义控件中传入值。

自定义控件的封装

一个完整的自定义控件目录:

index.js方法

(function(KDApi, $) {
    function MyComponent(model) {
        this._setModel(model);
    }

    MyComponent.prototype = {
        _setModel: function(model) {
            this.model = model;
        },
        init: function(props) {
            console.log('-----init', this.model, props);
        },
        update: function(props) {
            console.log('-----update', this.model, props)
        },
        destoryed: function() {
            console.log('-----destoryed', this.model)
        }
    }
    KDApi.register('avatar_map', MyComponent)
})(window.KDApi, jQuery);

生命周期

index.js 参数详解

控件参数:

  1. model

模型对象,自定义控件默认提供,值不能修改,其中包含以下内容 :

  1. prop

自定义控件数据对象,其中包含以下内容:

init

init为自定义控件的初始化事件,常用于对控件渲染,状态的设置

update

update事件,自定义控件接收到服务端的数据触 发此事件

CustomControl control = this.getControl("customcontrolap"); control.setData("xxxxxx");

即会触发自定义控件的update事件

参数 prop

自定义控件数据对象,其中包含以下内容:

destory
KDApi.loadFile(path,model,callBack)

将js、css文件加载到苍穹前端,参数:

KDApi.templateFilePath(path,model,callBack)

通过文件路径加载HTML片段:

KDApi. template(tpl,data)

通过传入字符串加载HTML片段:

KDApi. getNameSpace(model)

获取当前服务的路径前缀: 常用来加载添加拼接图片地址

KDApi.register(type , ctrl)

将自定义控件注册到苍穹平台中,所有自定义控件 都需调用,接收两个参数

服务端控件编程模型

@KSObject
@DataEntityTypeAttribute(name = "kd.bos.ext.form.control.CustomControl")
public class CustomControl extends Control {
    @KSMethod
    public String getData() {
        IClientViewProxy proxy = (IClientViewProxy) this.view.getService(IClientViewProxy.class);

        return (String) proxy.getViewState(this.getKey());
    }

    @KSMethod
    public void setData(Object data) {
        IClientViewProxy proxy = (IClientViewProxy) this.view.getService(IClientViewProxy.class);
        proxy.setFieldProperty(this.getKey(), "v", data);
        proxy.postBack(this.getKey(), data);
    }

    @KSMethod
    public void setConfigItems(List<Map<String, String>> items) {
        if ((items != null) && (items.size() > 0)) {
            IClientViewProxy proxy = (IClientViewProxy) this.view.getService(IClientViewProxy.class);
            proxy.setFieldProperty(this.getKey(), "ci", items);
        }
    }
}

自定义控件的后台编程模型,提供以下方法:

如何使用?

自定义控件可放置在以下容器:

使用步骤:

  1. 将自定义控件拖拽到合适的容器

  2. 点击控件方案属性,选择控件方案后返回数据

使用步骤:

  1. 选择方案时可点击新增方案

  2. 方案id必须和自定义控件index.js中 KDApi.register('avatar_xxx', MyComponent)注册的id一致,否则无法加载

  3. 领域ID填写相关领域即可,例如hr,fi,注意:填写后 即保存会在静态资源文件下创建同名文件夹

  4. 开发商标示自动根据当前开发商填写 tips:点击开发文档超链接,可下载自定义控件开发指南

以上就是我关于 云苍穹自定义控件开发 知识点的整理与总结的全部内容。


分割线

上一篇 下一篇

猜你喜欢

热点阅读