egret_EXML_egret exml 状态

EXML：

eui的分类

• eui.AddItems: 添加状态显示元素操作
• eui.ArrayConllection: 数组的集合类数据结构包装器, 能在数据源发生改变的时候主动通知视图刷新变更数据项
• eui.BasicLayout: 绝对布局类, 要求显示定位每个容器子代。 可以使用子代的x 和y属性, 或使用约束来定位每个子代
• Binding: 绑定工具类, 可以使用此类的方法来配置数据绑定
• BitmapLabel: 一行或多行不可编辑的位图文本
• Button: 常用矩形按钮
• CheckBox: 包含一个可选标签, 类似于h5的单选/多选input
• CollectionEvent: 集合类型数据改变事件
• CollectionEventKind: 定义CollectionEvent 类kind 属性有效值的常量。
• ColumnAlign: 为TileLayout 类的columnAlign定义可能的值
• Component: 定义可设置外观的组件的基类。所使用的外观通常是Skin类的子类。通过设置该类的skinName属性, 将skin类和component类相关联
• DataGroup: 将数据项目转换为可视元素进行显示。通常仅用户包含作为子项的数据项目
• DefaultAssetAdapter: 素材适配器接口类, 实现了eui.IAssetAdapter接口
• DefaultThemeAdapter: 主题适配器接口类, 实现了eui.IThemeAdapter接口
• Direction:定义进度条等控件增长方向的常量
• EditableText: 可编辑文本，用于显示、滚动、选择和编辑文本。
• Group: 自动布局的容器类
• HorizontalLayout: 布局类, 从左到右排列布局
• HScrollBar: 控件类

使用EXML文件：

• 直接引用EXML文件：

  • exml的根节点是Skin的情况下

  • 如假设'resource/skins/ButtonSkin.exml' 有如下代码:

<?xml version="1.0" encoding="utf-8"?><e:Skinclass="skins.ButtonSkin" states="up,down,disabled"minHeight="50" minWidth="100" xmlns:e="http://ns.egret.com/eui"><e:Imagewidth="100%"height="100%"scale9Grid="1,3,8,8"alpha.disabled="0.5"
source="button_up_png"
source.down="button_down_png"/><e:Labelid="labelDisplay"top="8"bottom="8"left="8"right="8"
size="20"fontFamily="Tahoma 'Microsoft Yahei'"
verticalAlign="middle"textAlign="center"text="按钮"textColor="0x000000"/><e:Imageid="iconDisplay"horizontalCenter="0"verticalCenter="0"/></e:Skin>

• 引入方式如下:

var button =new eui.Button();// 创建对象
button.skinName="resource/skins/ButtonSkin.exml";//引入地址
this.addchild(button);// 添加到容器对象

• 动态加载EXML文件：

  • 若根节点不是Skin， 可以使用EXML.load() 方法来加载并解析外部的EXML文件
  • 加载完成后, 回调函数的参数会传入解析后的类定义, 可以把类定义new出来实例化它, 或直接赋值给组件的skinName属性
  • 如:

private init():void{
 /**
 * EXML.load 加载外部的EXML
 * @param1 加载并解析的地址
 * @param2 加载完成后的回调函数
 * @param3 回调函数
 */
 EXML.load('skins/ButtonSkin.exml',this.onLoaded,this);
}
private onLoaded(clazz:any, url:string):void{
 var button =new eui.Button();
 button.skinName= clazz;
 this.addChild(button);
}

• 嵌入EXML到代码: (类似于JSON)
  • 第一种直接在代码中嵌入EXML文本内容
  • 第二种可以类比JSON文件的处理, 因为几乎是一样的。
  • 使用HttpRequest 去加载EXML文件的文本内容
  • 运行时调用EXML.parse(exmlText) 方法去解析, 会立即返回解析后的类定义。
  • 还可以使用${key} 的形式来引用代码中的变量, 进行简洁的字符串拼接, 如:

var className ="skins.ButtonSkin";
var exmlText =`<e:Skin class="${className}" states="up,over,down,disabled" xmlns:s="http://ns.egret.com/eui"> ... </e:Skin>`;

根节点:

• 分析这行代码:  

  <e:Groupclass="app.MyGroup"xmlns:e="http://ns.egret.com/eui"></e:Group>
  

  • 它跟XML一样, 是由一个个标签组成的。每个标签都有个命名空间前缀, 例如<e:GROUP中的e

  • 它的对应命名空间声明也在根节点上: xmlns:e="http://ns.egret.com/eui" 。

  • <e:Group>以e 这个命名空间开头的节点, 表示EUI这个Ui库中的组件

  • <e:Group>中的Group 就是对应代码eui.Group

  • 根节点上的class 属性表示它在运行时解析后要注册为的全局类名, 以上代码等价于:

module app {
 export class MyGroup extends eui.Group{
  public constructor(){
   super();
  }
 }
}

添加子项:

• 上面的例子只有一个根节点, 现在添加一个Image子项:

  <e:Group class="app.MyGroup" xmlns:e="http://ns.egret.com/eui"><e:Image></e:Group>
  

  
  

• 上面exml代码等价于:

  module app {
   export class MyGroup extends eui.Group{
    public constructor(){
     super();
     var image =new eui.Image();
     this.addChild(image);
    }
   }
  }
  

  
  

设置属性:

• 刚刚的例子只添加了一个空图片, 什么都显示不出来, 接下来给它设置属性:

<e:Groupclass="app.MyGroup"xmlns:e="http://ns.egret.com/eui"><e:Imagesource="image/button_up.png"x="10"/></e:Group>

• 上面的代码设置的Image节点, 相当于如下代码: 声明属性比较简单, 不用考虑值得类型

var image = eui.Image();
image.source="image/button_up.png";
image.x=10;
this.addChild(image);

• 以上是最简单的属性写法, 但通常只能描述简单数据类型的赋值, 如果是复杂数据类型, 比如要对属性赋值为另一个节点时, 可以采用另一种写法:

  <e:Groupclass="app.MyGroup"xmlns:e="http://ns.egret.com/eui"><e:Imagesource="image/button_up.png"x="10"><e:scale9Grid><e:Rectanglex="10"y="10"width="45"height="35"/></e:scale9Grid></e:Image></e:Group>
  

  • <e:scale9Grid> 这个是属性节点, 表示父级节点Image的scale9Grid属性, 这个属性要接受一个Rectangle对象的实例。

• 以上内容等价为:

  var image = eui.Image();
  image.source="image/button_up.png";
  image.x=10;
  var rect =newRectangle();
  rect.x=10;
  rect.y=10;
  rect.width=45;
  rect.height=35;
  image.scale9Grid= rect;
  this.addChild(image);
  

ID属性: (和HTML中的id并不是一回事)

• 它的结果相当于给解析后的类声明了一个公开的变量

<e:Groupclass="app.MyGroup"xmlns:e="http://ns.egret.com/eui"><e:Imageid="iconDisplay"/></e:Group>

• 等价于:

  module app {
   exportclassMyGroupextends eui.Group{
    public iconDisplay:eui.Image;
    public constructor(){
     super();
     var image =new eui.Image();
     this.addChild(image);
     this.iconDisplay= image;// 声明一个公开的变量
    }
   }
  }
  

  
  

1. module app {
2. exportclassMyGroupextends eui.Group{
3. public iconDisplay:eui.Image;
4. public constructor(){
5. super();
6. var image =new eui.Image();
7. this.addChild(image);
8. this.iconDisplay= image;// 声明一个公开的变量
9. }
10. }
11. }

数据绑定:

• 数据绑定相当于是给静态的EXML文件添加动态脚本的功能, 只需要加上{}即可

  <e:ItemRendererclass="skins.ItemRendererSkin"xmlns:e="http://ns.egret.com/eui"><e:Labelid="labelDisplay"text="{data.label}"/></e:ItemRenderer>
  

  
  

1. <e:ItemRendererclass="skins.ItemRendererSkin"xmlns:e="http://ns.egret.com/eui"><e:Labelid="labelDisplay"text="{data.label}"/></e:ItemRenderer>

内部类:

• 当需要引用一些只使用一次的EXML文件时, 最好的做法是直接内嵌

视图状态:

• 它跟数据绑定功能类似, 也是给静态的EXML加入了动态刷新的工程。
• 视图状态简单说就是预设一组状态刷新的操作, 当切换到某个状态时, 自动批量执行一系列的添加删除显示对象或改变对象属性的操作。

• 例如如下代码:

  <e:Skinclass="skins.ButtonSkin"states="up,over,down,disabled"xmlns:e="http://ns.egret.com/eui"><e:Imagesource="image/button_up.png"includeIn="up"width="100%"height="100%"/><e:Imagesource="image/button_over.png"includeIn="over"width="100%"height="100%"/><e:Imagesource="image/button_down.png"includeIn="down"width="100%"height="100%"/><e:Imagesource="image/button_disabled.png"includeIn="disabled"width="100%"height="100%"/><e:Labelid="labelDisplay"textColor.down="0x009aff"left="20"right="20"top="10"bottom="10"/></e:Skin>
  

• • states="up,over,down,disabled" : 表示这个皮肤具有up, over,down这四种状态; 这些状态操作通常有两类: 1.添加移除对象, 2. 设置属性
  • includeIn="over" : 表示这个Image节点只存在于over状态, 一单切换到其他状态, 自动移除这个节点, 切换回over 状态时又会重新添加这个节点并显示。
  • excludeFrom : 表示不存在于某个状态, 和includeIn相反
  • textColor.down="0x009aff": 表示当状态切换到down时, 设置Label的属性为0x9aff