Egret的eui的使用

一、如何使用exml:

//1.直接使用
var button = new eui.Button();
button.skinName = "resource/skins/ButtonSkin.exml";
this.addChild(button);

---

//2. 动态加载
private init():void{
    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);
}

二、DataGroup的使用：
关键代码：

        this.serverDataGroup.dataProvider = myCollection;//设置**数据集**
        this.serverDataGroup.itemRenderer = SelectServerItem;//设置item视图类
        this.selectServerScroller.viewport = this.serverDataGroup;//结合Scroller使用实现上下滑动

---

实例：
子视图.exml和.ts文件：

// TypeScript file
/**
 * serverItem
 */
class SelectServerItem extends eui.ItemRenderer{

    private serverStatePic:eui.Image;
    private serverState:eui.Label;
    private serverName:eui.Label;
    private serverNotice:eui.Label;

    constructor() {
        super();
        this.addEventListener(egret.Event.COMPLETE,this.complete,this);//皮肤加载完成后调用
        this.skinName = "resource/exml/SelectServerItemUi.exml";//全路径名

    }
    private complete(){
        this.addEventListener(egret.TouchEvent.TOUCH_END,this.touchEnd,this);

    }

    //当数据改变并且皮肤已经创建完毕的情况下这个方法会被执行：this.data是传递过来的**数据集**
    protected dataChanged():void{
        this.serverStatePic.source = this.data.serverStatePic;
        this.serverState.text = this.data.serverState;
        this.serverName.text = this.data.serverName;
        this.serverNotice.text = this.data.serverNotice;

    }
    private touchEnd(e:egret.Event){
        console.log(this.data.serverName);
    }

}

父视图.exml和.ts文件：

// TypeScript file
/**
 * SelectServer
 */
class SelectServer extends eui.Component{
    private serverDataGroup:eui.DataGroup;
    private selectServerScroller:eui.Scroller;
    constructor() {
        super();
        this.addEventListener(egret.Event.COMPLETE,this.complete,this);
        this.skinName = "resource/exml/SelectServerUi.exml";

    }

    private complete(){
        //先创建一个数组
        var sourceArr:any[] = [];
        for (var i:number = 1; i < 50; i++) {
            sourceArr.push({serverStatePic:"resource/texture/state1.png",serverState:"爆满",serverName:"飞龙在天"+i,serverNotice:"新区"});
        }   
        var myCollection:eui.ArrayCollection = new eui.ArrayCollection(sourceArr);//用ArrayCollection包装

        this.serverDataGroup.dataProvider = myCollection;
        this.serverDataGroup.itemRenderer = SelectServerItem;
        this.selectServerScroller.viewport = this.serverDataGroup;
        //大数据优化:numElements 会获得总的数据条数. numChildren 会获得具体的实例数量.
        //this.serverDataGroup.useVirtualLayout = true;

    } 


}