Egret 中eui的应用

default.thm.json

如果项目中没有 default.thm.json，手动新建，然后里面输入{ "autoGenerateExmlsList": true,}，然后编译就会自动生成一些路径到exmls中

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

所需要的文件

可到eui的demo中拷贝AssetAdapter.ts和ThemeAdapter解析材料和解析主题两个文件到项目中。然后在Math.ts中解析素材。下文有。

Main.ts

首先是Matin.ts继承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() {
       //.....................
    }
   



}

自定义皮肤

基本自定义皮肤看官网。

有某种情况，就是你需要在你的皮肤中给某个元素添加事件。

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


}

首先是声明成员变量，变量名字是你的exml皮肤中某个元素的id。然后就可以通过这个成员变量对皮肤中的元素进行操作。

其中this.skinName的值在libs/exml.d.ts中可以看到你之前自义定皮肤exml对应的类名(编译后才看得到)。值默认是你第一次命名exml的文件名。如果你要修改，到exml中通常属性下修改类名