雲蒼穹自定義控件開發

什麼是自定義控件？

自定義控件，顧名思義即是開發者可以自己開發業務組件。蒼穹本身提供比較豐 富的通用控件，業務控件。特殊業務場景下，系統提供的控件無法滿足需求，例如需要 使用甘特圖，時間軸等系統內本身沒有的組件，此時通過自定義控件，按照蒼穹自定義 控件的標準封裝，即可把這些組件引入到系統中。自定義控件也有特定的JAVA插件事 件，在表單插件中可以輕鬆獲取到自定義控件的數據或者往自定義控件中傳入值。

自定義控件的封裝

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

• 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() 控件初始化觸發，只調用一次,常用於控件渲染，資源文件加載

• update() 後臺插件設置控件值變化時觸發，用以更新控件

• destoryed() 控件銷燬，只調用一次

index.js 參數詳解

控件參數:

1. model

模型對象，自定義控件默認提供，值不能修改，其中包含以下內容 :

• pageId 頁面標識

• key 控件標識

• dom 自定義控件掛載的dom元素對象

• schemaId 方案id

• isvId 開發商標識

• moduleId 領域標識

• invoke 函數，將自定義控件事件發送給平臺後端，接收兩個參數:

• eventName 執行事件名稱，

• eventArgs(String|Object) 執行事件所需參數，推薦使用字符串

2. prop

自定義控件數據對象，其中包含以下內容：

• themeColor 主題色

• lock 是否鎖定

• data 數據對象，插件中setData接口設置的數據

• configItems 控件配置項

• cardRowData 卡片行數據

init

init爲自定義控件的初始化事件，常用於對控件渲染，狀態的設置

• 在init事件中可調用框架方法加載html，css，js等資源文件， 加載完畢後即可按照第三方組件的規範創建控件
  

update

update事件，自定義控件接收到服務端的數據觸 發此事件

• 在後臺插件中調用：

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

即會觸發自定義控件的update事件

參數 prop

自定義控件數據對象，其中包含以下內容：

• themeColor 主題色

• lock 是否鎖定

• data 數據對象，插件中setData接口設置的數據

• configItems 控件配置項

• cardRowData 卡片行數據

destory

• 自定義控件銷燬事件 控件被銷燬時會調用，一般不需要做什麼操作

KDApi.loadFile（path,model,callBack）

將js、css文件加載到蒼穹前端，參數：

• filePaths: String|Array ，模版文件路徑，可以是單個文件，也可 以是多個文件路徑數組，必填，文件路徑爲相對路徑

• model: Object 組件的model對象，必填

• callback: Function 回調函數，文件加載完成後進入回調，必填

KDApi.templateFilePath（path,model,callBack）

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

• filePath: String 模版文件路徑，文件路徑爲相對路徑，必填 +

• Mod78 el: Object 組件的model對象，必填

• data: Object 模版所需數據對象，必填

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3dSBoP0o-1581669633648)(https://upload-images.jianshu.io/upload_images/5227364-071a21b60f941a7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

KDApi. template（tpl,data）

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

• tpl: String 模版的html片段，必填

• data:模版所需數據對象，必須。例如資源文件 的地址

KDApi. getNameSpace（model）

獲取當前服務的路徑前綴： 常用來加載添加拼接圖片地址

• Model :object ，組件的對象，必填

KDApi.register(type , ctrl)

將自定義控件註冊到蒼穹平臺中，所有自定義控件 都需調用，接收兩個參數

• type: String 組件標識，必須，值與方案ID相同

• ctrl: Object 組件對象，必須，需包含init方法的組件對象

服務端控件編程模型

@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: 返回自定義控件當前的值

• setData: 設置自定義控件的值,將觸發前端的update方法

• setConfigItems：設置自定義插件的配置

如何使用？

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

• 頁面容器

• Flex面板

• 高級面板

• 分割容器

• 頁籤控件

使用步驟：

1. 將自定義控件拖拽到合適的容器

2. 點擊控件方案屬性，選擇控件方案後返回數據

使用步驟：

1. 選擇方案時可點擊新增方案

2. 方案id必須和自定義控件index.js中 KDApi.register(‘avatar_xxx’, MyComponent)註冊的id一致，否則無法加載

3. 領域ID填寫相關領域即可，例如hr,fi，注意：填寫後 即保存會在靜態資源文件下創建同名文件夾

4. 開發商標示自動根據當前開發商填寫 tips：點擊開發文檔超鏈接，可下載自定義控件開發指南

以上就是我關於 雲蒼穹自定義控件開發 知識點的整理與總結的全部內容。

---

分割線

---

博主爲咯學編程：父母不同意學編程，現已斷絕關係;戀人不同意學編程，現已分手;親戚不同意學編程，現已斷絕來往;老闆不同意學編程,現已失業三十年。。。。。。如果此博文有幫到你歡迎打賞，金額不限。。。