EUI库 - 概述

Posted 阿里P7之路

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了EUI库 - 概述相关的知识,希望对你有一定的参考价值。

 
  技术分享
新特性 36k
  访问EUI组件宽高时,也会跟原生显示对象的表现一致,立即能得到包含子项的宽高值
  统一的显示列表  普通对象和eui对象都可用addChild来添加
  一个逻辑组件只管代码控制,一个皮肤组件只负责外观
内部类
 <e:Button label="按钮"> 
        <e:Skin states="up,over,down,disable"> 
            <e:Image source="image/button_up.png" includeIn="up" width="100%" height="100%" /> 
            <e:Image source="image/button_down.png" includeIn="down" width="100%" height="100%" /> 
            <e:Label id="LabelDisplay" left="20" right="20" top="10" text="{data.label}" /> 
        </e:Skin> 
    </e:Button>
 
即这个皮肤只应用于这个button 
 
   <e:List id="list" cacheAsBitmap="false"> 
        <e:itemRendererSkinName> 
            <e:Skin states="up,down"> 
                <e:Image source="image/button_up.png" includeIn="up" width="100%" height="100%" /> 
                <e:Image source="image/button_down.png" includeIn="down" width="100%" height="100%" />
                <e:Label id="LabelDisplay" left="20" right="20" top="10" text="{data.label}" />
            </e:Skin> 
        </e:itemRendererSkinName> 
    </e:List>
  。当你需要复用这个按钮皮肤时,再一键将内部皮肤转换为独立EXML文件,变成可复用的。
  运行时解析EXML
  在EXML根节点上设置class属性,class属性的值会被解析并注册为全局类名。若不声明,这个EXML文件解析的类定义会被解析器作为一个临时变量返回。
exml描述非皮肤对象
原来EXML的根节点被限制为Skin皮肤节点
EXML的根节点不再必须是Skin,可以为任意组件。这个特性全面提升了EXML的适用范围,能够简化普通容器的显示列表创建过程。解析后的对象是一个继承自根节点的自定义类。定义了ID的节点,会在自定义类上以ID名声明一个成员变量持有该节点的引用。
动态数据绑定 之前我们通常要写一个ItemRenderer的逻辑类,覆盖dataChanged()方法,访问data属性,然后重新赋值刷新所有相关的视图组件。现在只需要简单地定义一个数据绑定标签,无需任何繁琐的过程

以上是关于EUI库 - 概述的主要内容,如果未能解决你的问题,请参考以下文章

EUI库 - EXML

EUI库 - 容器

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

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

EUI库 - 自动布局

EUI库 - 皮肤