Theme皮肤文件(json解析、多文件管理)

jekeyhui99

一  官方教程

http://developer.egret.com/cn/github/egret-docs/extension/EUI/skin/theme/index.html

 

二 thm主题文件解析

default.thm.json皮肤主题文件范例：

{
  "skins": {
    "eui.Button": "resource/eui_skins/ButtonSkin.exml"
  },
  "autoGenerateExmlsList": false,
  "exmls": [
    "src/HomeSceneSkin.exml"
  ]
}

 skins：

 将exml和ts绑定。

如果绑定，则在新建eui.component不需要设置skinName了。

如果没有绑定，则需要在eui.component的contruct中设置this.skinName = ""。

 

autoGenerateExmlsList
true：发布时将exmls下皮肤自动合并到default.thm.json文件中
false：不会将exmls下的皮肤自动合并到default.thm.json文件中

exmls：
在Main.ts加载主题文件时，预加载exmls列表中的皮肤

let theme = new eui.Theme("resource/default.thm.json", this.stage);

三 exml的几种使用方式：

1 直接引用

public constructor() {
    super();
    this.addEventListener(egret.Event.COMPLETE, this.onComplete, this);
    this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
    this.skinName = "src/HomeSceneSkin.exml";
}

执行顺序。在exml未预先加载的情况下，实时加载。

chilrenCreated 

addToStage

exml加载完成

onComplete

 

2 其他方式不怎么用。。具体看官方教程

 

 

四  皮肤多文件管理

多个json皮肤文件，分类加载不同皮肤，减轻一次性加载大量皮肤解析压力。

需要自己管理exml的加载顺序，因为exml之间可能有依赖关系。

let theme = new eui.Theme("resource/default.thm.json", this.stage);
let theme2 = new eui.Theme("resource/default2.thm.json",this.stage);
theme2.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);

 

default.thm.json

{
  "skins": {
  },
  "autoGenerateExmlsList": false,
  "exmls": [
     "src/SimpleButtonSkin.exml"
  ]
}

default2.thm.json

{
  "skins": {
    
  },
  "autoGenerateExmlsList": false,
  "exmls": [
      "resource/eui_skins/ButtonSkin.exml",
     "src/HomeSceneSkin.exml"
  ]
}

 

另外一说，wing2.5和3都会强行自动修改thm的json文件。。。