UI模块添加数据绑定装饰器

1.添加数据基类,子类自动添加代理,数据变化自动通知 2.支持同属性多装饰器
2025-10-29 10:25:48 +00:00 · 2025-08-29 15:25:10 +08:00
parent b62a4af8db
commit e48011d941
45 changed files with 1354 additions and 21 deletions
--- a/demo/FguiCreator3.8/assets/Data/DataItem.xml
+++ b/demo/FguiCreator3.8/assets/Data/DataItem.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component size="150,150">
+  <displayList>
+    <graph id="n0_c2y1" name="n0" xy="0,0" size="150,150" type="rect">
+      <relation target="" sidePair="width-width,height-height"/>
+    </graph>
+    <text id="n1_c2y1" name="lab_level" xy="0,0" size="150,150" fontSize="36" align="center" vAlign="middle" autoSize="shrink" bold="true" text="组件">
+      <relation target="" sidePair="center-center,middle-middle"/>
+    </text>
+  </displayList>
+</component>
--- a/demo/FguiCreator3.8/assets/Data/DataWindow.xml
+++ b/demo/FguiCreator3.8/assets/Data/DataWindow.xml
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="utf-8"?>
+<component size="750,1334">
+  <displayList>
+    <graph id="n0_73ie" name="n0" xy="-1,0" size="750,1334" type="rect" lineSize="5" lineColor="#ffff0000" fillColor="#ff003399" corner="20">
+      <relation target="" sidePair="width-width,height-height,center-center,middle-middle"/>
+    </graph>
+    <component id="n22_sf8l" name="btn_close" src="ukhni" fileName="btns/btn_close.xml" pkg="mkwn34a7" xy="323,1154">
+      <relation target="" sidePair="center-center,bottom-bottom"/>
+    </component>
+    <component id="n1_zmnj" name="btn_refresh_level" src="kofe0" fileName="btns/button1.xml" pkg="mkwn34a7" xy="55,758" size="222,73">
+      <relation target="" sidePair="left-left,bottom-bottom"/>
+      <Button title="更新关卡" titleFontSize="26"/>
+    </component>
+    <component id="n23_rrvv" name="btn_refresh_storey" src="kofe0" fileName="btns/button1.xml" pkg="mkwn34a7" xy="55,841" size="222,73">
+      <relation target="" sidePair="left-left,bottom-bottom"/>
+      <Button title="更新层数" titleFontSize="26"/>
+    </component>
+    <component id="n24_rrvv" name="btn_refresh_bool" src="kofe0" fileName="btns/button1.xml" pkg="mkwn34a7" xy="55,924" size="222,73">
+      <relation target="" sidePair="left-left,bottom-bottom"/>
+      <Button title="更新bool" titleFontSize="26"/>
+    </component>
+    <component id="n25_rrvv" name="btn_refresh_data" src="kofe0" fileName="btns/button1.xml" pkg="mkwn34a7" xy="496,758" size="222,73">
+      <relation target="" sidePair="right-right,bottom-bottom"/>
+      <Button title="更新对象" titleFontSize="26"/>
+    </component>
+    <component id="n26_rrvv" name="btn_refresh_min" src="kofe0" fileName="btns/button1.xml" pkg="mkwn34a7" xy="496,841" size="222,73">
+      <relation target="" sidePair="right-right,bottom-bottom"/>
+      <Button title="更新min" titleFontSize="26"/>
+    </component>
+    <component id="n33_gsjf" name="btn_refresh_max" src="kofe0" fileName="btns/button1.xml" pkg="mkwn34a7" xy="496,924" size="222,73">
+      <relation target="" sidePair="right-right,bottom-bottom"/>
+      <Button title="更新max" titleFontSize="26"/>
+    </component>
+    <component id="n27_rrvv" name="btn_refresh_all" src="kofe0" fileName="btns/button1.xml" pkg="mkwn34a7" xy="264,1048" size="222,73">
+      <relation target="" sidePair="center-center,bottom-bottom"/>
+      <Button title="更新全部" titleFontSize="26"/>
+    </component>
+    <text id="n28_rrvv" name="lab_level" xy="60,105" size="138,49" fontSize="36" color="#ffffff" align="center" vAlign="middle" bold="true" text="关卡：1">
+      <relation target="" sidePair="left-left,top-top"/>
+    </text>
+    <text id="n29_rrvv" name="lab_storey" xy="60,166" size="102,49" fontSize="36" color="#ffffff" align="center" vAlign="middle" bold="true" text="层：1">
+      <relation target="" sidePair="left-left,top-top"/>
+    </text>
+    <text id="n30_rrvv" name="lab_bool" xy="60,227" size="189,49" fontSize="36" color="#ffffff" align="center" vAlign="middle" bold="true" text="bool: true">
+      <relation target="" sidePair="left-left,top-top"/>
+    </text>
+    <text id="n31_rrvv" name="lab_datamin" xy="60,288" size="280,49" fontSize="36" color="#ffffff" align="center" vAlign="middle" bold="true" text="对象属性min：1">
+      <relation target="" sidePair="left-left,top-top"/>
+    </text>
+    <text id="n32_rrvv" name="lab_datamax" xy="60,349" size="291,49" fontSize="36" color="#ffffff" align="center" vAlign="middle" bold="true" text="对象属性max：2">
+      <relation target="" sidePair="left-left,top-top"/>
+    </text>
+    <component id="n34_c2y1" name="n34" src="c2y12" fileName="DataItem.xml" xy="544,49">
+      <relation target="" sidePair="right-right,top-top"/>
+    </component>
+    <component id="n35_c2y1" name="n35" src="c2y12" fileName="DataItem.xml" xy="544,230">
+      <relation target="" sidePair="right-right,top-top"/>
+    </component>
+  </displayList>
+</component>
--- a/demo/FguiCreator3.8/assets/Data/package.xml
+++ b/demo/FguiCreator3.8/assets/Data/package.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<packageDescription id="87hfwn3d">
+  <resources>
+    <component id="rrvv1" name="DataWindow.xml" path="/" exported="true"/>
+    <component id="c2y12" name="DataItem.xml" path="/"/>
+  </resources>
+  <publish name=""/>
+</packageDescription>
--- a/demo/FguiCreator3.8/assets/Home/HomeWindow.xml
+++ b/demo/FguiCreator3.8/assets/Home/HomeWindow.xml
@@ -30,6 +30,10 @@
      <relation target="" sidePair="center-center,top-top"/>
      <Button title="界面功能" titleFontSize="26"/>
    </component>
+    <component id="n23_rrvv" name="btn_data" src="kofe0" fileName="btns/button1.xml" pkg="mkwn34a7" xy="215,738" size="320,73">
+      <relation target="" sidePair="center-center,top-top"/>
+      <Button title="数据更新" titleFontSize="26"/>
+    </component>
  </displayList>
  <transition name="t0"/>
  <transition name="t1"/>
--- a/demo/assets/resources/ui/Data.bin
+++ b/demo/assets/resources/ui/Data.bin
--- a/demo/assets/resources/ui/Data.bin.meta
+++ b/demo/assets/resources/ui/Data.bin.meta
@@ -0,0 +1,12 @@
+{
+  "ver": "1.0.3",
+  "importer": "buffer",
+  "imported": true,
+  "uuid": "db12f6e3-dc8e-45aa-ba9f-90edf99cd732",
+  "files": [
+    ".bin",
+    ".json"
+  ],
+  "subMetas": {},
+  "userData": {}
+}
--- a/demo/assets/resources/ui/manual/Home.bin
+++ b/demo/assets/resources/ui/manual/Home.bin
--- a/demo/assets/script/Data/global.meta
+++ b/demo/assets/script/Data/global.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "1bd1aa0a-5c4d-4425-afaa-2a46c0f02a42",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
--- a/demo/assets/script/Data/global/Level.ts
+++ b/demo/assets/script/Data/global/Level.ts
@@ -0,0 +1,62 @@
+/**
+ * @Author: Gongxh
+ * @Date: 2025-08-19
+ * @Description: 
+ */
+
+import { kunpo } from "../../header";
+
+export class Level extends kunpo.DataBase {
+
+    private _levelid: number = 1;
+    private _storey: number = 0;
+    private _ispassed: boolean = false;
+    private _data: { min: number, max: number } = { min: 1, max: 100 };
+
+    constructor() {
+        super();
+    }
+
+    public get levelid() { return this._levelid; }
+    public set levelid(lv: number) { this._levelid = lv; }
+
+    public get storey() { return this._storey; }
+    public set storey(storey: number) { this._storey = storey; }
+
+    public get ispassed() { return this._ispassed; }
+    public set ispassed(bool: boolean) { this._ispassed = bool; }
+
+    public get data(): { min: number, max: number } { return this._data; }
+    public set data(data: { min: number, max: number }) { this._data = data; }
+
+    public init(data: any) {
+        this.data = { min: data.min, max: data.max };
+
+        this.refreshMin(data.min);
+        this.refreshMax(data.max);
+
+        this.ispassed = data.ispassed;
+        this.levelid = data.levelid;
+        this.storey = data.storey;
+    }
+
+    public refreshLevel(lv: number) {
+        this.levelid = lv;
+    }
+
+    public refreshStorey(storey: number) {
+        this.storey = storey;
+    }
+
+    public refreshBool(bool: boolean) {
+        this.ispassed = bool;
+    }
+
+    public refreshMin(min: number) {
+        this.data.min = min;
+    }
+
+    public refreshMax(max: number) {
+        this.data.max = max;
+    }
+}
--- a/demo/assets/script/Data/global/Level.ts.meta
+++ b/demo/assets/script/Data/global/Level.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "632daee7-7c2c-4baf-a4dd-d1a12ad91169",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
--- a/demo/assets/script/Data/runtime.meta
+++ b/demo/assets/script/Data/runtime.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "3edce213-52a5-403f-b57f-52da9d7bcbce",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
--- a/demo/assets/script/Helper/DataHelper.ts
+++ b/demo/assets/script/Helper/DataHelper.ts
@@ -5,8 +5,11 @@
 */

 import { GlobalEvent } from "kunpocc-event";
+import { Level } from "../Data/global/Level";

 export class DataHelper {
+    public static level: Level = new Level();
+
    private static _data: Map<string, any> = new Map();

    public static getValue<T>(key: string, defaultValue: T): T {
--- a/demo/assets/script/Helper/DataHelper.ts.meta
+++ b/demo/assets/script/Helper/DataHelper.ts.meta
@@ -2,7 +2,7 @@
  "ver": "4.0.24",
  "importer": "typescript",
  "imported": true,
-  "uuid": "7340bacc-d167-47e8-a83b-2224c46b7fd0",
+  "uuid": "e786f26b-332e-4bb2-88c4-4d1c25b675a5",
  "files": [],
  "subMetas": {},
  "userData": {}
--- a/demo/assets/script/UI/Condition/ConditionWindow.ts
+++ b/demo/assets/script/UI/Condition/ConditionWindow.ts
@@ -5,8 +5,8 @@
 */

 import { ConditionType } from "../../condition/ConditionType";
-import { DataHelper } from "../../Data/DataHelper";
 import { fgui, kunpo } from "../../header";
+import { DataHelper } from "../../Helper/DataHelper";
 const { uiclass, uiprop, uiclick } = kunpo._uidecorator;

@uiclass("Window", "Condition", "ConditionWindow")
--- a/demo/assets/script/UI/Data.meta
+++ b/demo/assets/script/UI/Data.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "d0395b78-5d23-4c60-91ca-8851d9eddc27",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
--- a/demo/assets/script/UI/Data/DataWindow.ts
+++ b/demo/assets/script/UI/Data/DataWindow.ts
@@ -0,0 +1,127 @@
+/**
+ * @Author: Gongxh
+ * @Date: 2025-08-19
+ * @Description: 
+ */
+import { Level } from "../../Data/global/Level";
+import { fgui, kunpo } from "../../header";
+import { DataHelper } from "../../Helper/DataHelper";
+
+const { bindMethod, bindProp } = kunpo.data;
+const { uiclass, uiprop, uiclick } = kunpo._uidecorator;
+
+@uiclass("Window", "Data", "DataWindow")
+export class DataWindow extends kunpo.Window {
+    @uiprop
+    @bindProp(Level, data => data.storey, (item: fgui.GTextField, value: number, data: Level) => {
+        item.text = `关卡：${data.levelid} 层数：${value}`;
+    })
+    @bindProp(Level, data => data.levelid, (item: fgui.GTextField, value: number, data: Level) => {
+        item.text = `关卡：${value} 层数：${data.storey}`;
+    })
+    private lab_level: fgui.GTextField;
+
+
+    @uiprop
+    @bindProp(Level, data => data.storey, (item: fgui.GTextField, value: number, data: Level) => {
+        item.text = `层数：${value}`;
+    })
+    private lab_storey: fgui.GTextField;
+
+    @uiprop
+    @bindProp(Level, data => data.refreshMin, (item: fgui.GTextField) => {
+        item.text = `最小值：${DataHelper.level.data.min}`;
+    })
+    private lab_min: fgui.GTextField;
+
+    @uiprop
+    @bindProp(Level, data => data.refreshMax, (item: fgui.GTextField) => {
+        item.text = `最大值：${DataHelper.level.data.max}`;
+    })
+    private lab_max: fgui.GTextField;
+
+    @uiprop
+    @bindProp(Level, data => data.ispassed, (item: fgui.GTextField) => {
+        item.text = `是否通过：${DataHelper.level.ispassed ? '是' : '否'}`;
+    })
+    private lab_ispassed: fgui.GTextField;
+
+    protected onInit(): void {
+        this.adapterType = kunpo.AdapterType.Bang;
+        this.type = kunpo.WindowType.Normal;
+    }
+
+    protected onShow(userdata?: any): void {
+
+    }
+
+    protected onClose(): void {
+
+    }
+
+    @uiclick
+    private onRefreshLevel(): void {
+        DataHelper.level.refreshLevel(DataHelper.level.levelid + 1);
+    }
+
+    @uiclick
+    private onRefreshStorey(): void {
+        DataHelper.level.refreshStorey(DataHelper.level.storey + 1);
+    }
+
+    @uiclick
+    private onRefreshBool(): void {
+        DataHelper.level.refreshBool(!DataHelper.level.ispassed);
+    }
+
+
+    @uiclick
+    private onRefreshData(): void {
+        DataHelper.level.data = { min: 1, max: 100 };
+    }
+
+    @uiclick
+    private onRefreshMin(): void {
+        DataHelper.level.refreshMin(DataHelper.level.data.min + 1);
+    }
+
+    @uiclick
+    private onRefreshMax(): void {
+        DataHelper.level.refreshMax(DataHelper.level.data.max - 1);
+    }
+
+    @uiclick
+    private onRefreshAll(): void {
+        DataHelper.level.init({ min: 1, max: 100, ispassed: true, levelid: 1, storey: 1 });
+    }
+
+    @uiclick
+    private onTouchClose(): void {
+        kunpo.WindowManager.closeWindow(this.name);
+    }
+
+    @bindMethod(Level, data => data.ispassed)
+    private refreshBool(level: Level): void {
+        this.lab_ispassed.text = `是否通过：${level.ispassed ? '是' : '否'}`;
+    }
+
+    @bindMethod(Level, data => data.refreshMin)
+    private refreshMin(level: Level): void {
+        this.lab_min.text = `对象属性min：${level.data.min}`;
+    }
+
+    @bindMethod(Level, data => data.refreshMax)
+    private refreshMax(level: Level): void {
+        this.lab_max.text = `对象属性max：${level.data.max}`;
+    }
+
+    @bindMethod(Level, data => data.refreshMax)
+    @bindMethod(Level, data => data.refreshMin)
+    @bindMethod(Level, data => data.init)
+    @bindMethod(Level, data => data.data)
+    private refreshData(level: Level): void {
+        console.log('触发回调了');
+        this.lab_min.text = `对象属性min：${level.data.min}`;
+        this.lab_max.text = `对象属性max：${level.data.max}`;
+    }
+}
--- a/demo/assets/script/UI/Data/DataWindow.ts.meta
+++ b/demo/assets/script/UI/Data/DataWindow.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "09bc366d-d2c6-46d1-b5b1-1f7e75f2be09",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
--- a/demo/assets/script/UI/Data/Items.meta
+++ b/demo/assets/script/UI/Data/Items.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "6aabaf5c-aed0-45c8-acc4-9fc86646c3f7",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
--- a/demo/assets/script/UI/Data/Items/DataItem.ts
+++ b/demo/assets/script/UI/Data/Items/DataItem.ts
@@ -0,0 +1,26 @@
+/**
+ * @Author: Gongxh
+ * @Date: 2025-08-30
+ * @Description: 
+ */
+
+
+import { Level } from "../../../Data/global/Level";
+import { fgui, kunpo } from "../../../header";
+const { uiheader, uiprop, uicom, uiclick } = kunpo._uidecorator;
+const { bindMethod, bindProp } = kunpo.data;
+
+@uicom("Data", "DataItem")
+export class DataItem extends fgui.GComponent {
+    @uiprop
+    @bindProp(Level, data => data.levelid, (item: fgui.GTextField, value: number, data: Level) => {
+        item.text = `关卡回调\n关卡:${value}\n层数:${data.storey}`;
+    })
+    @bindProp(Level, data => data.storey, (item: fgui.GTextField, value: number, data: Level) => {
+        item.text = `层数回调\n关卡:${data.levelid}\n层数:${value}`;
+    })
+    private lab_level: fgui.GTextField;
+
+    public onInit(): void {
+    }
+}
--- a/demo/assets/script/UI/Data/Items/DataItem.ts.meta
+++ b/demo/assets/script/UI/Data/Items/DataItem.ts.meta
@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.24",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "8eacd9e1-5ee5-4b18-9e66-4f7e70787268",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}
--- a/demo/assets/script/UI/HomeWindow.ts
+++ b/demo/assets/script/UI/HomeWindow.ts
@@ -97,6 +97,11 @@ export class HomeWindow extends kunpo.Window {
        });
    }

+    @uiclick
+    private onClickData(): void {
+        kunpo.WindowManager.showWindow("DataWindow");
+    }
+
    public getHeaderInfo(): kunpo.WindowHeaderInfo {
        return kunpo.WindowHeaderInfo.create("WindowHeader", "aaa");
    }
--- a/demo/assets/script/UI/Window/Components/CustomComponents.ts
+++ b/demo/assets/script/UI/Window/Components/CustomComponents.ts
@@ -14,4 +14,8 @@ export class CustomComponents extends fgui.GComponent {
    public onInit(): void {
        kunpo.log("CustomComponents onInit");
    }
+
+    public dispose(): void {
+        kunpo.log("CustomComponents dispose");
+    }
 }
--- a/demo/assets/script/condition/Condition1.ts
+++ b/demo/assets/script/condition/Condition1.ts
@@ -4,7 +4,7 @@
 * @Description: 条件1 关联数据conditon1
 */
 import { GlobalEvent } from 'kunpocc-event';
-import { DataHelper } from '../Data/DataHelper';
+import { DataHelper } from '../Helper/DataHelper';
 import { kunpo } from '../header';
 import { ConditionType } from './ConditionType';
 const { conditionClass } = kunpo._conditionDecorator;
--- a/demo/assets/script/condition/Condition2.ts
+++ b/demo/assets/script/condition/Condition2.ts
@@ -4,7 +4,7 @@
 * @Description: 条件2 关联数据condition2
 */
 import { GlobalEvent } from 'kunpocc-event';
-import { DataHelper } from '../Data/DataHelper';
+import { DataHelper } from '../Helper/DataHelper';
 import { kunpo } from '../header';
 import { ConditionType } from './ConditionType';
 const { conditionClass } = kunpo._conditionDecorator;
--- a/demo/assets/script/condition/Condition3.ts
+++ b/demo/assets/script/condition/Condition3.ts
@@ -4,7 +4,7 @@
 * @Description: 条件3 关联数据condition3
 */
 import { GlobalEvent } from 'kunpocc-event';
-import { DataHelper } from '../Data/DataHelper';
+import { DataHelper } from '../Helper/DataHelper';
 import { kunpo } from '../header';
 import { ConditionType } from './ConditionType';
 const { conditionClass } = kunpo._conditionDecorator;
--- a/demo/assets/script/condition/Condition4.ts
+++ b/demo/assets/script/condition/Condition4.ts
@@ -4,7 +4,7 @@
 * @Description: 条件4 关联数据condition4
 */
 import { GlobalEvent } from 'kunpocc-event';
-import { DataHelper } from '../Data/DataHelper';
+import { DataHelper } from '../Helper/DataHelper';
 import { kunpo } from '../header';
 import { ConditionType } from './ConditionType';
 const { conditionClass } = kunpo._conditionDecorator;
--- a/demo/assets/uiconfig/ui_config.json
+++ b/demo/assets/uiconfig/ui_config.json
@@ -1 +1 @@
-{"Basics":{"AlertWindow":{"props":["bg",1,0,"lab_title",1,4,"lab_content",1,5,"btn_close",1,1,"btn_ok",1,3,"btn_cancel",1,2],"callbacks":["onClickBtnClose",1,1,"onClickBtnOk",1,3,"onClickBtnCancel",1,2],"controls":[],"transitions":[]},"ToastWindow":{"props":["toast",1,1,"labTips",2,1,1,"bgMask",1,0],"callbacks":[],"controls":[],"transitions":[]},"WindowHeader":{"props":["btn_close",1,0],"callbacks":[],"controls":[],"transitions":[]},"WindowHeader2":{"props":["btn_close",1,0],"callbacks":[],"controls":[],"transitions":[]}},"Condition":{"ConditionWindow":{"props":["reddot1",1,4,"reddot2",1,5,"btn_condition1",1,6,"btn_condition2",1,7,"btn_condition3",1,8,"btn_condition4",1,9],"callbacks":["onClickBtnClose",1,1,"onClickBtnCondition1",1,6,"onClickBtnCondition2",1,7,"onClickBtnCondition3",1,8,"onClickBtnCondition4",1,9],"controls":[],"transitions":[]}},"Home":{"HomeWindow":{"props":[],"callbacks":["onClickUI",1,6,"onSocketWindow",1,3,"onClickBtnCondition",1,1,"onClickMiniGame",1,4,"onClickBtnHotUpdate",1,5,"onClickLoadBuffer",1,2],"controls":["sta2","sta2","status","status"],"transitions":["t0","t0","t1","t1"]}},"HotUpdate":{"HotUpdateWindow":{"props":["lab_version",1,4,"lab_desc",1,5],"callbacks":["onClickClose",1,3,"onCheckUpdate",1,1,"onStartUpdate",1,2],"controls":[],"transitions":[]}},"MiniGame":{"MiniGameWindow":{"props":["btn_close",1,5,"lab_adid",1,8,"lab_payQuantity",1,9],"callbacks":["onClickBtnClose",1,5,"onClickBtnInitAds",1,2,"onClickBtnPay",1,3],"controls":[],"transitions":[]}},"Socket":{"SocketTestWindow":{"props":["text_input",1,7,"text_input_message",1,9],"callbacks":["onCloseWindow",1,1,"onConnection",1,3,"onDisconnect",1,2,"onSendText",1,4,"onSendBinary",1,5],"controls":[],"transitions":[]}},"Window":{"CloseAllWindow":{"props":["btn_close",1,2],"callbacks":["onClickBtnClose",1,2],"controls":[],"transitions":[]},"CloseOneWindow":{"props":["btn_close",1,2],"callbacks":["onClickBtnClose",1,2],"controls":[],"transitions":[]},"CustomComponents":{"props":["n1",1,1],"callbacks":[],"controls":[],"transitions":[]},"HideAllWindow":{"props":["btn_close",1,2],"callbacks":["onClickBtnClose",1,2],"controls":[],"transitions":[]},"HideOneWindow":{"props":["btn_close",1,2],"callbacks":["onClickBtnClose",1,2],"controls":[],"transitions":[]},"PopWindow":{"props":["btn_close",1,2],"callbacks":["onCloseWindow",1,2],"controls":[],"transitions":[]},"PopWindowHeader1":{"props":["btn_close",1,2],"callbacks":["onCloseWindow",1,2],"controls":[],"transitions":[]},"PopWindowHeader2":{"props":["btn_close",1,2],"callbacks":["onCloseWindow",1,2],"controls":[],"transitions":[]},"UIBaseWindow":{"props":[],"callbacks":["onClickBtnClose",1,8,"onClickBtnHeader1",1,1,"onClickBtnHeader2",1,2,"onClickBtnEmpty",1,3,"onClickBtnCloseOne",1,4,"onClickBtnCloseAll",1,5,"onClickBtnHideOne",1,6,"onClickBtnHideAll",1,7],"controls":[],"transitions":[]}}}
+{"Basics":{"AlertWindow":{"props":["bg",1,0,"lab_title",1,4,"lab_content",1,5,"btn_close",1,1,"btn_ok",1,3,"btn_cancel",1,2],"callbacks":["onClickBtnClose",1,1,"onClickBtnOk",1,3,"onClickBtnCancel",1,2],"controls":[],"transitions":[]},"ToastWindow":{"props":["toast",1,1,"labTips",2,1,1,"bgMask",1,0],"callbacks":[],"controls":[],"transitions":[]},"WindowHeader":{"props":["btn_close",1,0],"callbacks":[],"controls":[],"transitions":[]},"WindowHeader2":{"props":["btn_close",1,0],"callbacks":[],"controls":[],"transitions":[]}},"Condition":{"ConditionWindow":{"props":["reddot1",1,4,"reddot2",1,5,"btn_condition1",1,6,"btn_condition2",1,7,"btn_condition3",1,8,"btn_condition4",1,9],"callbacks":["onClickBtnClose",1,1,"onClickBtnCondition1",1,6,"onClickBtnCondition2",1,7,"onClickBtnCondition3",1,8,"onClickBtnCondition4",1,9],"controls":[],"transitions":[]}},"Data":{"DataItem":{"props":["lab_level",1,1],"callbacks":[],"controls":[],"transitions":[]},"DataWindow":{"props":["lab_level",1,9,"lab_storey",1,10,"lab_min",1,12,"lab_max",1,13,"lab_ispassed",1,11],"callbacks":["onRefreshLevel",1,2,"onRefreshStorey",1,3,"onRefreshBool",1,4,"onRefreshData",1,5,"onRefreshMin",1,6,"onRefreshMax",1,7,"onRefreshAll",1,8,"onTouchClose",1,1],"controls":[],"transitions":[]}},"Home":{"HomeWindow":{"props":[],"callbacks":["onClickUI",1,6,"onSocketWindow",1,3,"onClickBtnCondition",1,1,"onClickMiniGame",1,4,"onClickBtnHotUpdate",1,5,"onClickLoadBuffer",1,2,"onClickData",1,7],"controls":["sta2","sta2","status","status"],"transitions":["t0","t0","t1","t1"]}},"HotUpdate":{"HotUpdateWindow":{"props":["lab_version",1,4,"lab_desc",1,5],"callbacks":["onClickClose",1,3,"onCheckUpdate",1,1,"onStartUpdate",1,2],"controls":[],"transitions":[]}},"MiniGame":{"MiniGameWindow":{"props":["btn_close",1,5,"lab_adid",1,8,"lab_payQuantity",1,9],"callbacks":["onClickBtnClose",1,5,"onClickBtnInitAds",1,2,"onClickBtnPay",1,3],"controls":[],"transitions":[]}},"Socket":{"SocketTestWindow":{"props":["text_input",1,7,"text_input_message",1,9],"callbacks":["onCloseWindow",1,1,"onConnection",1,3,"onDisconnect",1,2,"onSendText",1,4,"onSendBinary",1,5],"controls":[],"transitions":[]}},"Window":{"CloseAllWindow":{"props":["btn_close",1,2],"callbacks":["onClickBtnClose",1,2],"controls":[],"transitions":[]},"CloseOneWindow":{"props":["btn_close",1,2],"callbacks":["onClickBtnClose",1,2],"controls":[],"transitions":[]},"CustomComponents":{"props":["n1",1,1],"callbacks":[],"controls":[],"transitions":[]},"HideAllWindow":{"props":["btn_close",1,2],"callbacks":["onClickBtnClose",1,2],"controls":[],"transitions":[]},"HideOneWindow":{"props":["btn_close",1,2],"callbacks":["onClickBtnClose",1,2],"controls":[],"transitions":[]},"PopWindow":{"props":["btn_close",1,2],"callbacks":["onCloseWindow",1,2],"controls":[],"transitions":[]},"PopWindowHeader1":{"props":["btn_close",1,2],"callbacks":["onCloseWindow",1,2],"controls":[],"transitions":[]},"PopWindowHeader2":{"props":["btn_close",1,2],"callbacks":["onCloseWindow",1,2],"controls":[],"transitions":[]},"UIBaseWindow":{"props":[],"callbacks":["onClickBtnClose",1,8,"onClickBtnHeader1",1,1,"onClickBtnHeader2",1,2,"onClickBtnEmpty",1,3,"onClickBtnCloseOne",1,4,"onClickBtnCloseAll",1,5,"onClickBtnHideOne",1,6,"onClickBtnHideAll",1,7],"controls":[],"transitions":[]}}}
--- a/demo/extensions-config/fgui/Data/DataItem.json
+++ b/demo/extensions-config/fgui/Data/DataItem.json
@@ -0,0 +1,13 @@
+{
+    "props": {
+        "lab_level": {
+            "name": "lab_level",
+            "idPath": "n1_c2y1",
+            "namePath": "lab_level"
+        }
+    },
+    "callbacks": {},
+    "controls": {},
+    "transitions": {},
+    "__version__": "0.0.1"
+}
--- a/demo/extensions-config/fgui/Data/DataWindow.json
+++ b/demo/extensions-config/fgui/Data/DataWindow.json
@@ -0,0 +1,74 @@
+{
+    "props": {
+        "lab_level": {
+            "name": "lab_level",
+            "idPath": "n28_rrvv",
+            "namePath": "lab_level"
+        },
+        "lab_storey": {
+            "name": "lab_storey",
+            "idPath": "n29_rrvv",
+            "namePath": "lab_storey"
+        },
+        "lab_ispassed": {
+            "name": "lab_bool",
+            "idPath": "n30_rrvv",
+            "namePath": "lab_bool"
+        },
+        "lab_min": {
+            "name": "lab_datamin",
+            "idPath": "n31_rrvv",
+            "namePath": "lab_datamin"
+        },
+        "lab_max": {
+            "name": "lab_datamax",
+            "idPath": "n32_rrvv",
+            "namePath": "lab_datamax"
+        }
+    },
+    "callbacks": {
+        "onRefreshLevel": {
+            "name": "btn_refresh_level",
+            "idPath": "n1_zmnj",
+            "namePath": "btn_refresh_level"
+        },
+        "onRefreshStorey": {
+            "name": "btn_refresh_storey",
+            "idPath": "n23_rrvv",
+            "namePath": "btn_refresh_storey"
+        },
+        "onRefreshBool": {
+            "name": "btn_refresh_bool",
+            "idPath": "n24_rrvv",
+            "namePath": "btn_refresh_bool"
+        },
+        "onRefreshData": {
+            "name": "btn_refresh_data",
+            "idPath": "n25_rrvv",
+            "namePath": "btn_refresh_data"
+        },
+        "onRefreshMin": {
+            "name": "btn_refresh_min",
+            "idPath": "n26_rrvv",
+            "namePath": "btn_refresh_min"
+        },
+        "onRefreshMax": {
+            "name": "btn_refresh_max",
+            "idPath": "n33_gsjf",
+            "namePath": "btn_refresh_max"
+        },
+        "onRefreshAll": {
+            "name": "btn_refresh_all",
+            "idPath": "n27_rrvv",
+            "namePath": "btn_refresh_all"
+        },
+        "onTouchClose": {
+            "name": "btn_close",
+            "idPath": "n22_sf8l",
+            "namePath": "btn_close"
+        }
+    },
+    "controls": {},
+    "transitions": {},
+    "__version__": "0.0.1"
+}
--- a/demo/extensions-config/fgui/Home/HomeWindow.json
+++ b/demo/extensions-config/fgui/Home/HomeWindow.json
@@ -251,6 +251,11 @@
            "name": "btn_ui",
            "idPath": "n22_sf8l",
            "namePath": "btn_ui"
+        },
+        "onClickData": {
+            "name": "btn_data",
+            "idPath": "n23_rrvv",
+            "namePath": "btn_data"
        }
    },
    "controls": {