首页 > 代码库 > EUI库 - EXML

EUI库 - EXML

2024-11-19 18:39:02   203人阅读

 

  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 onl oaded( 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


联系
我们