云蒼穹自定義控件開發(fā)

正文

什么是自定義控件？

自定義控件暑中，顧名思義即是開發(fā)者可以自己開發(fā)業(yè)務(wù)組件壹瘟。蒼穹本身提供比較豐富的通用控件，業(yè)務(wù)控件鳄逾。特殊業(yè)務(wù)場景下稻轨，系統(tǒng)提供的控件無法滿足需求，例如需要使用甘特圖雕凹，時間軸等系統(tǒng)內(nèi)本身沒有的組件殴俱，此時通過自定義控件，按照蒼穹自定義控件的標(biāo)準(zhǔn)封裝枚抵，即可把這些組件引入到系統(tǒng)中线欲。自定義控件也有特定的JAVA插件事件，在表單插件中可以輕松獲取到自定義控件的數(shù)據(jù)或者往自定義控件中傳入值汽摹。

自定義控件的封裝

一個完整的自定義控件目錄：

css 存放自定義控件的樣式
html存放自定義控件的html片段
js 存放自定義控件的js文件
index.js 為自定義控件的主要文件

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

生命周期

init() 控件初始化觸發(fā)李丰，只調(diào)用一次,常用于控件渲染，資源文件加載
update() 后臺插件設(shè)置控件值變化時觸發(fā)逼泣，用以更新控件
destoryed() 控件銷毀趴泌，只調(diào)用一次

index.js 參數(shù)詳解

控件參數(shù):

model

模型對象舟舒，自定義控件默認(rèn)提供，值不能修改嗜憔，其中包含以下內(nèi)容 :

pageId 頁面標(biāo)識
key 控件標(biāo)識
dom 自定義控件掛載的dom元素對象
schemaId 方案id
isvId 開發(fā)商標(biāo)識
moduleId 領(lǐng)域標(biāo)識
invoke 函數(shù)秃励，將自定義控件事件發(fā)送給平臺后端，接收兩個參數(shù):
eventName 執(zhí)行事件名稱吉捶，
eventArgs(String|Object) 執(zhí)行事件所需參數(shù)夺鲜，推薦使用字符串

prop

自定義控件數(shù)據(jù)對象，其中包含以下內(nèi)容：

themeColor 主題色
lock 是否鎖定
data 數(shù)據(jù)對象呐舔，插件中setData接口設(shè)置的數(shù)據(jù)
configItems 控件配置項
cardRowData 卡片行數(shù)據(jù)

init

init為自定義控件的初始化事件币励，常用于對控件渲染，狀態(tài)的設(shè)置

在init事件中可調(diào)用框架方法加載html滋早，css榄审，js等資源文件，加載完畢后即可按照第三方組件的規(guī)范創(chuàng)建控件

update

update事件杆麸，自定義控件接收到服務(wù)端的數(shù)據(jù)觸發(fā)此事件

在后臺插件中調(diào)用：

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

即會觸發(fā)自定義控件的update事件

參數(shù) prop

自定義控件數(shù)據(jù)對象搁进，其中包含以下內(nèi)容：

themeColor 主題色
lock 是否鎖定
data 數(shù)據(jù)對象，插件中setData接口設(shè)置的數(shù)據(jù)
configItems 控件配置項
cardRowData 卡片行數(shù)據(jù)

destory

自定義控件銷毀事件控件被銷毀時會調(diào)用昔头，一般不需要做什么操作

KDApi.loadFile（path,model,callBack）

將js饼问、css文件加載到蒼穹前端，參數(shù)：

filePaths: String|Array 揭斧，模版文件路徑莱革，可以是單個文件，也可以是多個文件路徑數(shù)組讹开，必填盅视，文件路徑為相對路徑
model: Object 組件的model對象，必填
callback: Function 回調(diào)函數(shù)旦万，文件加載完成后進入回調(diào)闹击，必填

KDApi.templateFilePath（path,model,callBack）

通過文件路徑加載HTML片段：

filePath: String 模版文件路徑，文件路徑為相對路徑成艘，必填 +
Mod78 el: Object 組件的model對象赏半，必填
data: Object 模版所需數(shù)據(jù)對象，必填

KDApi. template（tpl,data）

通過傳入字符串加載HTML片段：

tpl: String 模版的html片段淆两，必填
data:模版所需數(shù)據(jù)對象断箫，必須。例如資源文件的地址

KDApi. getNameSpace（model）

獲取當(dāng)前服務(wù)的路徑前綴：常用來加載添加拼接圖片地址

Model :object 秋冰，組件的對象仲义，必填

KDApi.register(type , ctrl)

將自定義控件注冊到蒼穹平臺中，所有自定義控件都需調(diào)用，接收兩個參數(shù)

type: String 組件標(biāo)識埃撵，必須尸诽，值與方案ID相同
ctrl: Object 組件對象，必須盯另，需包含init方法的組件對象

服務(wù)端控件編程模型

@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);
        }
    }
}

自定義控件的后臺編程模型，提供以下方法：

getData: 返回自定義控件當(dāng)前的值
setData: 設(shè)置自定義控件的值,將觸發(fā)前端的update方法
setConfigItems：設(shè)置自定義插件的配置

如何使用洲赵？

自定義控件可放置在以下容器：

頁面容器
Flex面板
高級面板
分割容器
頁簽控件

使用步驟：

將自定義控件拖拽到合適的容器
點擊控件方案屬性鸳惯，選擇控件方案后返回數(shù)據(jù)