皮肤分离机制
   皮肤分离机制对制作可复用的外观比较有优势
那对于只使用一次的皮肤呢?如果也拆分出两个文件,显然不太方便。这里我们针对单次使用的皮肤定制了内部类的功能
  每个组件都有一个childrenCreated()方法,它会在组件初始化完成后回调,子类通常覆盖这个方法来访问一些延迟实例化的子项。
皮肤部件 在皮肤附加到逻辑组件上时,会自动匹配双方的同名变量和id,这些同名变量就叫做“皮肤部件”(SkinPart)
  。当为某个组件定制皮肤时,实际上就分为创建对应的皮肤部件和显示图片素材两部分。如果只添加了图片素材,而没有声明并实例化对应变量名的皮肤部件,逻辑组件将无法正常工作
  所有的可定制皮肤组件都必须继承自eui.Component或它的子类
视图状态
可以看出自定义逻辑组件中扩展视图状态的方法就是使用invalidateState()和getCurrentState()这一对方法 
  我们还提供了一种在组件外快速设置视图状态的方法。就是直接对组件的currentState属性赋值即可,例如:button.currentState = "down";
配置主题
default.thm.json
{
"skins": {
    "eui.Button": "skins/ButtonSkin.exml"
},
"exmls": [ ],
"autoGenerateExmlsList": true //设为true后,会自动在exmls里生成EXML文件信息
}
 
skins 指定组件的默认皮肤,其中键是组件的类名,值是你需要赋值给这个组件skinName属性的值,可以是exml文件路径,也可以是Exml文件上注册的类名
exmls  表示需要主题预加载的 EXML 文件列表。Theme 文件加载之后,它会优先加载这个列表中的EXML文件,由于 EXML 可能会存在相互依赖,所以 Theme
按照列表中的顺序编译 EXML。你可以监听 egret.Event.COMPLETE 来确认该列表中的EXML已经加载完成
 
autoGenerateExmlsList 表示是否需要使用命令行工具自动生成 EXML 列表。build 命令会查找项目中的 EXML 文件,
并根据 EXML 文件的依赖关系自动排序后,放到这个列表中。在项目发布时,命令行工具会将 EXML 文件的内容直接集成到 theme 文件中,
减少网络请求的次数(参考下面的示例)。如果您想要自定义 EXML 列表,请将值设置为 false
 
设置版本号:防止缓存
"exmls": [
"resource/eui_skins/ButtonSkin.exml?v=20151211"
]
启用主题
public constructor(){
this.once(egret.Event.ADDED_TO_STAGE,this.onAddedToStage,this);
}
public onAddedToStage(event:egret.Event):void{
new eui.Theme("resource/default.thm.json", this.stage);
}
 
创建了Theme之后,它会开始异步加载指定的主题文件并解析,在加载的过程中,如果已经有组件在创建,也不需要额外处理,这部分组件在主题加载完成后会自动重新查询一次默认皮肤
 
特别注意一下,主题配置文件只是起到设置默认值的作用,并不能运行时切换所有默认皮肤。因为这么做需要遍历整个显示列表,开销比较大。
使用自定义的皮肤 方式一
加载文件
class TestSkin extends eui.Component {
constructor() {
super();
this.addEventListener(eui.UIEvent.COMPLETE,this.onComplete,this);
this.skinName = "resource/testSkin.exml";// 还可以写成 this.skinName = “mySkin.TestSkin”
}
protected createChildren() {
super.createChildren();
console.log("createChildren")
}
private onComplete():void{
console.log("onComplete");
          }
}
直接把skinName设置为exml文件的路径。这种方式要注意的是,在 createChildren 的时候,是获取不到内部组件的,因为此时 exml 文件还没有加载完成,要通过监听 eui.UIEvent.COMPLETE 这个事件获取组件创建完成的消息。
 
像上面这个例子,console 会先输出 createChildren 再输出 onComplete
 
需要注意的是:如果已经在主题中加载了 EXML 文件,会先输出 onComplete 再输出 createChildren.
自定义加载根目录
如何想改变resource的位置 可以用EXML.prefixURL来实现
EXML.prefixURL = "another/";//更改目录位置
var theme = new eui.Theme("resource/default.thm.json", this.stage);
theme.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);

EUI库 - 皮肤的更多相关文章

  1. EUI库 - 容器

      eui.UILayer UILayer是Group的子类它只有一个功能,到放到场景上后,宽高永远和场景宽度一致   Group Group 是自动布局的容器基类.如果包含的子项内容太大需要滚动显示 ...

  2. EUI库 - EXML

        EXML是可以运行时加载解析的   <e:Skin class="skins.ButtonSkin" states="up,down,disabled&qu ...

  3. EUI库 - 概述

        新特性 36k   访问EUI组件宽高时,也会跟原生显示对象的表现一致,立即能得到包含子项的宽高值   统一的显示列表  普通对象和eui对象都可用addChild来添加   一个逻辑组件只管 ...

  4. EUI库 - 9 - 数据集合 - 列表

      List 和DataGroup的区别 1 选中一项 会触发 eui.ItemEvent.ITEM_TAP 事件, 2 有选中项的概念,可以设置 List 里的默认选中项    selectedIn ...

  5. EUI库 - 9 - 数据集合 - 数组集合

      ArrayCollection  当数组内的数据被修改了(增删改),组件能有效的获知 myCollection.addEventListener(eui.CollectionEvent.COLLE ...

  6. EUI库 - 9 - 数据集合 - 数据容器

      DataGroup 设置一个数据源 自动创建内部所需的对象 来完成数据展示   还要设置单条数据的模板  叫ItemRenderer   继承关系 eui.List  eui.ListBase e ...

  7. EUI库 - 自动布局

      自适应流式布局 width="100%" top left right horizontalCenter=0 失效验证机制 这些异步过程都封装好了,我们只需要关注那一对方法:  ...

  8. EUI库 - 10 - 使用自定义组件

      步骤 1 在根节点,添加一个自定义的命名空间  2 可以设置skinName 自定义组件规范 1 不复用的不要用自定义组件 2 属性必须要有默认值(赋值为null也可以),因为TS编译器会把没有默 ...

  9. EUI库 - 快速入口之项目配置

      egretProperties.json exmlRoot  指定exml文件存放根目录,该路径必须为相对路径,目录内只能有exml文件 themes    主题文件数组,配置所有主题文件路径,该 ...

随机推荐

  1. springboot#父项目

  2. JDBC--PreparedStatement使用

    1. PreparedStatement是Statement的子接口,可以传入传入带有占位符的SQL语句,并且提供了相应的方法来替换占位符(setXxx(int index, Object value ...

  3. 30 整数中1出现的次数(从1到n整数中1出现的次数)这题很难要多看*

    题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...

  4. Java面向对象之类、接口、多态

    Java面向对象之类.接口.多态 类 class Person { // 实例属性 int age; String name; // 类属性 static int v = 1; // 构造器 publ ...

  5. SSH框架系列:Spring读取配置文件以及获取Spring注入的Bean

    分类: [java]2013-12-09 16:29 1020人阅读 评论(0) 收藏 举报 1.简介 在SSH框架下,假设我们将配置文件放在项目的src/datasource.properties路 ...

  6. Tomcat源码导入celipse

    1.eclipse 源码下载地址 http://svn.apache.org/repos/asf/tomcat/tc7.0.x/tags/ 2.由于tomcat是ant管理构建的,故要先安装ant 构 ...

  7. Windows下使用nginx问题

    1.下载完成后,解压缩,运行cmd,使用命令进行操作,不要直接双击nginx.exe,不要直接双击nginx.exe,不要直接双击nginx.exe 一定要在dos窗口启动,不要直接双击nginx.e ...

  8. [Codeforces]1263C Everyone is a Winner!

    题目 On the well-known testing system MathForces, a draw of nnn rating units is arranged. The rating w ...

  9. 零距离初体验uboot

    一.uboot配置编译步骤 1.开发板光盘的BSP 2.复制到虚拟机,tar -jxvf qt_x210v3_130807.tar.bz2 3.配置:make x210_sd_config 4.出现C ...

  10. vue的MVVM

    Vue的相关知识有 字符串模板 MVVM 虚拟dom和domdiff,查看下一篇笔记 字符串模板 function render(template, data) { const reg = /\{\{ ...