custom-eui-control-in-egret

如何创建一个 eui 的控件，在 egret 的文档中是比较零散的，而且有些东西也没有讲到。这里提供一个比较完整的范例。

1. 创建一个 exml 文件，用来定义控件的显示元素，这里要注意的classname 的设置，比如设置成 game.CustomButton。game 为模块名（文档上也称呼为命名空间），后面需要用到。
2. 创建一个 ts 文件，用来处理控件的逻辑。这个 ts 文件里面需要有模块，比如：

   module game {
   
       export class CustomButton extends eui.Button {
           public rtQuality: eui.Rect;
   
           constructor() {
               super();
   
               this.skinName = "resource/skins/custom/EquipButtonSkin.exml";
           }
   
           public set quality(color: number) {
               if (this.rtQuality) {
                   this.rtQuality.strokeColor = color;
               }
   
               let label = this.labelDisplay as eui.Label;
               label.textColor = color;
           }
   
           public get quality(): number {
               if (this.rtQuality) {
                   return this.rtQuality.strokeColor;
               }
               return 0x444444;
           }
       }
   }

3. 在其他皮肤中使用的时候，可以从组件列表（COMPONENT/Custom)中直接拖动控件来使用，在 wing 4.03 版本中需要修改一下Category Properties中的 Skin，这应该是 wing 的一个 bug。
4. 看一下 exml 的 Source，会发现添加了两个东西。一个是根节点的 <e:Skin ......... xmlns:game="game.*" >；另一个是添加的控件的 tag 是 <game:CustomButton .....>
   关于这一点，可以参考文档。
5. 在 ts 文件中使用的时候和普通的按钮一样，只是类型需要设置成 game.CustomButton。