Application of eui in Egret

default.thm.json

If there is no default.thm.json in the project, create a new one manually, then enter { "autoGenerateExmlsList": true,} in it, and then the compilation will automatically generate some paths into exmls

{
  "autoGenerateExmlsList": true,
  "exmls": [
    "resource/exml/classicBtn.exml",
    "resource/exml/headerDiamondsSkin.exml",
    "resource/exml/headerGlodSkin.exml"
  ],
  "skins": {}
}

required documents

You can copy AssetAdapter.ts and ThemeAdapter parsing materials and parsing themes to the project in the demo of eui. The material is then parsed in Math.ts. Below is.

Main.ts

The first is that Matin.ts inherits eui.UILayer

class Main extends eui.UILayer {

    /**
     * 加载进度界面
     * Process interface loading
     */
    private loadingView: LoadingUI;

    public constructor() {
        super();
    }

    protected childrenCreated() {
        //注入自定义的素材解析器
        let assetAdapter = new AssetAdapter();
        egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());

        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin

            context.onUpdate = () => {
                // console.log('hello,world')
            }
        })

        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
        }

        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
        }

        //初始化Resource资源加载库
        //initiate Resource loading library
        RES.addEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        RES.loadConfig("resource/default.res.json", "resource/");
    }

    private a = false;
    private b = false;

    private onThemeLoadComplete(): void {
        this.a = true;
        this.createGameScene();
    }

    /**
     * 配置文件加载完成,开始预加载preload资源组。
     * configuration file loading is completed, start to pre-load the preload resource group
     */
    private onConfigComplete(event: RES.ResourceEvent): void {
        let theme = new eui.Theme("resource/default.thm.json", this.stage);
        theme.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);

        RES.removeEventListener(RES.ResourceEvent.CONFIG_COMPLETE, this.onConfigComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
        RES.addEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
        RES.addEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
        RES.loadGroup("loading");//先加载loading资源
    }

    /**
     * preload资源组加载完成
     * Preload resource group is loaded
     */
    private onResourceLoadComplete(event: RES.ResourceEvent) {
        if (event.groupName == "preload") {
            this.stage.removeChild(this.loadingView);
            RES.removeEventListener(RES.ResourceEvent.GROUP_COMPLETE, this.onResourceLoadComplete, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_LOAD_ERROR, this.onResourceLoadError, this);
            RES.removeEventListener(RES.ResourceEvent.GROUP_PROGRESS, this.onResourceProgress, this);
            RES.removeEventListener(RES.ResourceEvent.ITEM_LOAD_ERROR, this.onItemLoadError, this);
            this.b = true;
            this.createGameScene();
        }
        if (event.groupName == "loading") {
            //设置加载进度界面
            //Config to load process interface
            this.loadingView = new LoadingUI();
            this.stage.addChild(this.loadingView);
        }
    }

    /**
     * 资源组加载出错
     *  The resource group loading failed
     */
    private onItemLoadError(event: RES.ResourceEvent) {
        console.warn("Url:" + event.resItem.url + " has failed to load");
    }

    /**
     * 资源组加载出错
     *  The resource group loading failed
     */
    private onResourceLoadError(event: RES.ResourceEvent) {
        //TODO
        console.warn("Group:" + event.groupName + " has failed to load");
        //忽略加载失败的项目
        //Ignore the loading failed projects
        this.onResourceLoadComplete(event);
    }

    /**
     * preload资源组加载进度
     * Loading process of preload resource group
     */
    private onResourceProgress(event: RES.ResourceEvent) {
        if (event.groupName == "preload") {
            this.loadingView.setProgress(event.itemsLoaded, event.itemsTotal);
        }
    }


    //场景
    private game: egret.DisplayObjectContainer;
    private BeginGame: egret.DisplayObjectContainer;
    /**
     * 创建游戏场景
     * Create a game scene
     */
    private createGameScene() {
       //.....................
    }
   



}

custom skin

See the official website for basic custom skins.

There are situations where you need to add events to an element in your skin.

class headerGlod extends eui.Component {
    private addBtn: eui.Image;
    private glodNumStr: eui.Label;
    constructor() {
        super();
        this.skinName = "headerGlodSkin"
    }

    protected childrenCreated(): void {
        super.childrenCreated();
        this.init();
    }

    private init(): void {
        this.glodNumStr.text = "12345";
        this.addBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.touchAddBtn, this);
    }

    private touchAddBtn(e: egret.TouchEvent): void {
                console.log("touchAddBtn");
    }


}

The first is to declare member variables, the variable name is the id of an element in your exml skin. Then you can operate on the elements in the skin through this member variable.

The value of this.skinName can be seen in libs/exml.d.ts to see the class name corresponding to your custom skin exml before (you can only see it after compilation). The value defaults to the name of the file you first named exml. If you want to modify, modify the class name under the usual attributes in exml