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

一  官方教程

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文件。。。