EUI库 - EXML

Posted 2020-10-01 阿里P7之路

 

	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"