EUI库 - EXML

Posted 阿里P7之路

tags:

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

 

  EXML是可以运行时加载解析的
  <e:Skin class="skins.ButtonSkin" states="up,down,disabled" minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui">
<e:Image width="100%" height="100%" scale9Grid="1,3,8,8" alpha.disabled="0.5"source="button_up_png"source.down="button_down_png"/>
 
<e:Label id="labelDisplay" top="8" bottom="8" left="8" right="8"size="20" fontFamily="Tahoma ‘Microsoft Yahei‘"verticalAlign="middle" textAlign="center" text="按钮" andtextColor="0x000000"/>
 
<e:Image id="iconDisplay" horizontalCenter="0" verticalCenter="0"/>
</e:Skin>
 
描述了一个按钮的皮肤class 是 skins.ButtonSkin
 
alpha.disabled = 0.5source.downtextAlign left center right (和horizontalAlign的布局值一样)
直接引用Exml文件 假设 exml的要节点是 Skin这时可以直接这样var button = new eui.Button();button.skinName = "resource/skins/ButtonSkin.exml"this.addChild( button ) ;
动态加载Exml文件 如果 exml的根节点不是 SkinEXML.load( "skins/ButonSkin.exml", this.onLoaded, this ) ;private onLoaded( clazz:any, url:string ):void{   var button = new eui.Button();   button.skinName = clazz ;   this.addChild( button ) ;}
嵌入EXML到代码 var className = "skins.ButtonSkin";var exmlText = `<e:Skin class="${className}" states="up,over,down,disabled" xmlns:s="http://ns.egret.com/eui"> ...</e:Skin>`;var button = new eui.Button();   button.skinName = exmlText  ;   this.addChild( button ) ;
 
或者先用HttpRequest去加载然后用EXML.parse( exmlText ) 去解析,直接可以返回类定义
  <e:Group class="app.MyGroup" xmlns:e="http://ns.egret.com/eui">
</e:Group>
 
和下面代码含义一样:module app {
export class MyGroup extends eui.Group {
public constructor(){super();}}}
 
注意一定要加 class
最基本的图片 <e:Image source="image/button_up.png" x="10"/><e:Image source="image/button_up.png" x="10"> <e:scale9Grid> <e:Rectangle x="10" y="10" width="45" height="35"/> </e:scale9Grid>
id属性
这个id属性与html中的id并不是一回事,它的结果相当于给解析后的类声明了一个公开变量
 
我们可以在节点上声明一个id属性,注意这个id属性与HTML中的id并不是一回事,它的结果相当于给解析后的类声明了一个公开变量。例如:
 
- <e:Group class="app.MyGroup" xmlns:e="http://ns.egret.com/eui">
<e:Image id="iconDisplay" />
</e:Group>
 
等价于:
 
- module app {
- export class MyGroup extends eui.Group {
- public iconDisplay:eui.Image;
- public constructor(){- super();- var image = new eui.Image();- this.addChild(image);- this.iconDisplay = image;- }- }- }
语法糖
<e:Image source="image/button_up.png" x="10" scale9Grid="10,10,45,35" />
 
<e:Image source="image/button_up.png" width=“100%” height="100%" />等价于:var image = eui.Image();image.source = "image/button_up.png";image.percentWidth = 100;image.percentHeight = 100;
 
 
节点默认属性我们已经知道了复杂属性节点的声明方式,要先显式声明一个属性名称的节点,内部再跟上要赋值的节点。这里还有一个类似语法糖的写法,eui库内的组件,通常都会有一个默认属性,如果子节点是赋值给父节点的默认属性,那么可以省略属性名节点。我们来看一个例子:
<e:Scrollerclass="app.MyScroller"xmlns:e="http://ns.egret.com/eui">
     <e:viewport>
          <e:Group/>
     </e:viewport>
</e:Scroller>
 
这个例子中,我们将Group实例赋值给了一个滚动容器Scroller的viewport属性。由于viewport是Scroller的默认属性,因此我们可以直接省略<e:viewport>节点,改成如下写法:
 
<e:Scrollerclass="app.MyScroller"xmlns:e="http://ns.egret.com/eui">
      <e:Group/>
           </e:Scroller>
默认属性除了支持省略属性名节点外,若默认属性的类型是一个数组,还可以省略Array节点。其实添加子项也只是省略默认属性的一种特例,因为容器的默认属性是elementsContent,类型正是数组。最开始添加子项的那个例子完整写法如下:
<e:Groupclass="app.MyGroup"xmlns:e="http://ns.egret.com/eui">
    <e:elementsContent>
         <e:Array>
              <e:Image/>
         </e:Array>
    </e:elementsContent>
</e:Group>
当然,我们直接用最简洁的省略默认属性写法即可。
内部类 除了皮肤,ItemRenderer也是一个典型的使用率很高且不复用的组件。我们现在也可以直接内嵌ItemRender的皮肤到List节点中:
视图状态
也算是语法糖的一种
 
在根节点上,我们声明了视图状态名称列表 states="up,over,down,disabled",它表示这个皮肤具有up,over,down,disabled这四种状态,当皮肤的currentState属性被逻辑组件设置为这四个状态之一时
 
1.添加移除对象, includeIn之外,还有一个excludeFrom
 
2.设置属性。 textColor.down="0x009aff"
 

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

EUI库 - EXML

EUI库 - 容器

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

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

EUI库 - 自动布局

EUI库 - 皮肤