egret中EUI的使用

首先，使用EUI必须前置技能树egret和wing，这里的eui专直egret中的eui，同时要求会使用wing，这是一款专门开发egret的IDE，很多操作只能在wing中完成。然后，这篇文章主要介绍的场景包括：调用eui控件，自定义eui控件，ts类中调用eui控件，自定义eui组件中调用eui控件等...

• 这里分eui控件和eui组件两个概念
  • eui控件：eui已经定义好的现成控件，包括：按钮、选择器、文字、图片等
  • 自定义eui组件：包括eui的exml文件和ts类两个文件组成，需要自己编写，比较自由。

如何调用eui控件

1、exml文件调用，如图：

调用eui图片控件

2、ts类调用，如图：

ts类调用

3、在wing中直接拖拽

选中控件直接拖拽到exml文件中，此时exml文件必须在设计状态

如何控制eui控件

1、exml文件调用和wing拖拽的效果是一样的

打开exml文件，切换到源码模式

给eui控件加上id

然后打开ts文件

在partAdded这个方法中直接调用对应的id实例

这样有个问题是，组件操作必须在 partAdded这个生命周期中进行，这个生命周期表示组件已全部加载完成；而且由于这个实例在类中并没有声明，IDE会报错，但是不影响使用。

如何使用自定义eui组件

修改默认eui组件，官方文档表述为：eui组件添加皮肤

• step1：复制默认eui组件的exml文件
• step2: 切换exml文件为设计模式
• step3-1: 创建一个ts文件，继承对应的eui组件，例如：MyButton extends EUI.Button
• step3-2:或者new myButton = new EUI.Button();
• step4: this.skinName = 刚才定义好的exml文件路径;

• step5: 这个时候wing会直接添加定义好的组件，验证方法：查看manifest文件 或者 点开自定义组件，查看自己定义好的组件是否在里面

  
  
  

  自定义组件

如何在自定义组件中绑定数据

eui也提供了数据绑定的方法，而且写法也很复杂，不建议使用

 <%for(data each collection)%> 
{data.label}
 <%end for%> 

//先创建一个数组
var sourceArr:any[] = [];
for (var i:number = 1; i < 5; i++) {
    sourceArr.push({label:"item"+i});
}
//用ArrayCollection包装
var myCollection:eui.ArrayCollection = new eui.ArrayCollection(sourceArr);

//然后创建DataGroup的实例，并设置数据源(属性名称是dataProvider)：
var dataGroup:eui.DataGroup = new eui.DataGroup();
dataGroup.dataProvider = myCollection;
dataGroup.percentWidth = 100;
dataGroup.percentHeight = 100;
this.addChild(dataGroup);

我只找到了数组数据容器的绑定办法，没有找到对象的，在API中找到一个ICollection，可能是这个，然鹅我也没打算用。

eui方便了游戏场景布局，可以快速开发，挺好用的，本来手动布局需要几天时间，用eui一下午就可以布完。最后吐槽一下wing，IDE的功能很好用，但是bug太多了，资源显示有bug，自定义组件的显示有bug，开发体验很好，在ide中预览效果很糟，虽然不影响最后的编译结果。