eui基本知识点

1.皮肤分离机制：皮肤分离机制就是将原本一个组件拆分成两个。一个逻辑组件只管代码控制，一个皮肤组件只负责外观。运行时将


皮肤组件附加到逻辑组件上，变成一个完整组件。皮肤组件并不是显示对象，实际上更类似一个持有外观信息的数据对象。这样做的


好处比较多，例如：方便代码解耦，方便复用外观，方便可视化编辑，等等。


2.eui做的exml文件需要把路径写在default.thm.json文件里面的“exmls”数组下，resource下的图片资源需要添加到


default.res.json文件里面，并且需要在资源组加组，然后把资源加进去。


3.假设一个按钮EXML文件的路径为:[项目根路径]/resource/skins/ButtonSkin.exml，引用那个ButtonSkin.exml的代码
如下：var button = new eui.Button();
      button.skinName = "resource/skins/ButtonSkin.exml";
      this.addChild(button);


4.动态加载上述例子（通用）：
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);
        }


5.exml文件代码：<e:Group class="app.MyGroup" xmlns:e="http://ns.egret.com/eui"> <e:Image source="image/button_up.png" 


x="10"> <e:scale9Grid> <e:Rectangle x="10" y="10" width="45" height="35"/> </e:scale9Grid> </e:Image> </e:Group>
  等价于：var image = eui.Image();
          image.source = "image/button_up.png";
          image.x = 10;
          var rect = new Rectangle();
          rect.x = 10;
          rect.y = 10;
          rect.width = 45;
          rect.height = 35;
          image.scale9Grid = rect;
          this.addChild(image);


6.文本：eui.Label, 继承自 egret.TextField


7.图片：eui.Image, 继承自 egret.Bitmap


8.按钮：eui.Button 继承自 eui.Component类，因此它是可定制皮肤的。


9.复选框：eui.CheckBox， 继承自切换按钮 eui.ToggleButton，当它被选中,selected属性将变为true，反之则为false。


10.单选按钮：eui.RadioButton，如果你选择了A，那BCD则会自动切换到非选中状态


11.状态切换按钮：eui.ToggleSwitch 用来定义开关组件，包括一个开启和关闭状态的皮肤。它继承自 eui.ToggleButton ，可以使


用 selected 来设置或获取其开关状态。


12.滑动选择器：eui.Slider，继承自eui.Range控件水平滑块控件：eui.HSlider（手机上的亮度调节工具），垂直滑块控件：


eui.VSlider


13.进度条：eui.ProgressBar，进度条控件继承自eui.Range控件。
垂直向下：  this.vBar = new eui.ProgressBar();
            this.vBar.direction = eui.Direction.BTT;//从下到上
            this.vBar.width = 30;
            this.vBar.height = 200;


14.输入文本：eui.EditableText， 继承自 egret.TextInput


15.简单容器：Group,Group 是最轻量级的，它本身不可以设置皮肤，也不具备外观，它的呈现只取决于内部的显示对象。如果您自定


义一个类，继承自Group，那么请注意，内部的其它对象应该在 createChildren() 方法中创建和添加，也就是说，您要覆盖 Group 


的 createChildren() 方法。


16.层叠容器：ViewStack，在 ViewStack 这个容器中添加多个子项，但只能显示其中的一个。以通过设置 selectedIndex 或者 


selectedChild 属性，来控制当前应该显示的子项。


17.面板容器：Panel，它和 Group 的区别在于，可以给它附加一个皮肤，并设置一个标题栏和关闭按钮


18：滚动控制容器：ViewPort，组件： Scroller，只需要创建一个 Scroller 的实例，设置位置和尺寸，然后把需要”滚动”的那个容器，设置到 Scroller 的 viewport 属性上就可以了。


19：数据容器：DataGroup，数据源属性：dataProvider
              var myCollection:eui.ArrayCollection = new eui.ArrayCollection(sourceArr);
              var dataGroup:eui.DataGroup = new eui.DataGroup();
              dataGroup.dataProvider = myCollection;


20.数组集合：ArrayCollection 是 eui 中专用的一个数据封装类。
             //先创建一个数组
             var sourceArr:any[] = [{name:"one",value:1},{name:"two",value:2}];
             //用 ArrayCollection 包装
             var myCollection:eui.ArrayCollection = new eui.ArrayCollection(sourceArr);


21.列表：list，继承自DataGroup