addElement()，addChild()区别
1.addElement()，addChild()区别
在网上找了很多，差不多都是这么说的：如果是spark(如s:Group)容器，用addElement。如果是halo(如mx:HBox)容器，就用addChild。这样说没有错，addChild是Flex3中用来添加组件的方法，所以对于halo容器使用addChild方法是没问题的。Flex4中spark容器只能使用addElement，如果使用addChild会报错，不管要添加的是spark还是halo组件。其实只要是在Flex4下开发，halo容器也是可以使用addElement方法的，虽然不知道内部怎么实现的，但确实可行。现在我们可以忘掉addChild方法了，只要是在Flex4下开发，我们都可以用addElement，世界是不是美好了很多。
2.引用图片资源时，使用@Embed与不用Embed的区别
<mx:Image source="images/img.jpg" />与<mx:Image source="@Embed('images/img.jpg')" />区别在于后者在编译时会把图片资源编译到swf文件中，前者不会，运行时会去外部加载图片信息，好像在as脚本里动态指定图片资源时只能用Embed。Embed详细用法请参考我的收藏：http://yecon.blog.hexun.com/29628260_d.html和http://xiejiangbo.iteye.com/blog/446122
3.ROLL_OVER与MOUSE_OVER，ROLL_OUT与MOUSE_OUT区别
可视组件在鼠标进入该组件时会调度MOUSE_OVER事件，即使是从其子组件移到该组件依然会触发该事件。可视组件在鼠标从不是其子组件的其余组件中进入该组件时会调度ROLL_OVER事件，直观来看，就是鼠标从外部移入该组件才调用。
可视组件在鼠标进入该组件时会调度MOUSE_OVER事件，即使是从其子组件移到该组件依然会触发该事件。可视组件在鼠标从不是其子组件的其余组件中进入该组件时会调度ROLL_OVER事件，直观来看，就是鼠标从外部移入该组件才调用。
MOUSE事件与ROLL事件的区别在于如下两点：鼠标在母组件与子组件上移入移出时是否调度的区别。 MOUSE事件具有冒泡阶段而ROLL事件没有，决定了在子组件调度事件时母组件是否能监听到的区别。 总之，ROLL事件将整个母组件包括其子组件看成一个组件，移入移出整个组件的边界时母组件才调度事件并能监听该事件。
4.使用MouseEvent 获取鼠标位置
localX和localY：这两个属性保存鼠标事件发生时，鼠标指针相对于父容器的水平和垂直坐标
stageX和stageY：这两个属性保存鼠标事件发生时，鼠标指针在全局窗口中的水平和垂直坐标
5.通过id引用组件注意
我们在使用组件时一般会给组件设id值，然后通过该id就可以在as代码中使用该组件了，如果as代码和组件在同一个文件中没有问题，如果不在同一个文件，并且是通过addElement()方法加入容器的，可能会有问题。
- <p>Test.mxml:
- <?xml version="1.0" encoding="utf-8"?>
- <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
- xmlns:s="library://ns.adobe.com/flex/spark"
- xmlns:mx="library://ns.adobe.com/flex/mx" >
- <s:Button id="b1" label="test"/>
- </s:Panel>
- // 在另一文件中引用
- var t:Test = new Test();
- trace("addElement前：" + t.b1); // 打印结果为null
- this.addElement(t);
- trace("addElement后：" + t.b1); // 正常
- </p>
Test.mxml: <?xml version="1.0" encoding="utf-8"?> <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" > <s:Button id="b1" label="test"/> </s:Panel> // 在另一文件中引用 var t:Test = new Test(); trace("addElement前：" + t.b1); // 打印结果为null this.addElement(t); trace("addElement后：" + t.b1); // 正常
经测试，如果被引用的组件是继承自Group，则不会出现以上情况，即不addElement到当前容器也可以使用，但Panel，Canvas等其他容器不行，所以在遇到上面的情况时，先通过addElement加入组件，然后再使用即可。
6.Flex反射简单实现方式
flex反射机制是比较复杂的，下面是在开发中遇到的情况，根据类名生成类的对象，这样可以用以下简单方法实现：
- var classRefrence:Class = getDefinitionByName(className) as Class;
- var classInstance:IPerson = new classRefrence() as IPerson;
var classRefrence:Class = getDefinitionByName(className) as Class; var classInstance:IPerson = new classRefrence() as IPerson;
但需注意getDefinitionByName方法获得的类必须是在发布的时候被编译到swf文中的,否则就会报错："ReferenceError: Error #1065: 变量 <类的名字> 未定义。"
7.Flex使用正则表达式验证日期
- // 定义验证日期的正则表达式
- var dateReg:RegExp = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
- if (dateField.text != null && dateField.text != "") {
- if (!dateReg.test(dateField.text)) {
- Alert.show("时间输入错误");
- return;
- }
- }
// 定义验证日期的正则表达式
var dateReg:RegExp = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
if (dateField.text != null && dateField.text != "") {
if (!dateReg.test(dateField.text)) {
Alert.show("时间输入错误");
return;
}
}
8.DataGrid定义列的itemRenderer，data与listData.label区别
data是当前行数据，是Object对象，可以获得对应对象的所有属性；listData.label是当前单元格文本，是String对象。
9.Flex获得顶层应用
FlexGlobals.topLevelApplication，在 ApplicationDomain 中运行的第一个应用程序是顶层应用程序。在顶层应用程序的构造函数中，将此属性设置为对顶层应用程序的引用。每个 ApplicationDomain 都有其自己的topLevelApplication。
10.Flex4 AdvanceDataGrid去掉表头竖线
Flex4中要去除AdvancedDataGrid表头部分的竖型分割线可以采用修改headerSortSeparatorSkin的方法。headerSortSeparatorSkin默认为Undefied，只要用mx.skins.ProgrammaticSkin来替换即可。替换皮肤后会去掉竖线，但竖线后面排序的按钮还存在。可以不通过替换皮肤，直接设置sortExpertMode="true"隐藏竖线和排序按钮，但点击表头排序后按钮会显示出来，设置sortableColumns="false"禁用排序，则不会显示出按钮来。
- <mx:AdvancedDataGridheaderSortSeparatorSkin="mx.skins.ProgrammaticSkin"sortableColumns="false"sortExpertMode="true">
- <mx:columns>
- <mx:AdvancedDataGridColumnheaderText="列 1"dataField="col1"/>
- <mx:AdvancedDataGridColumnheaderText="列 2"dataField="col2"/>
- </mx:columns>
- </mx:AdvancedDataGrid>
<mx:AdvancedDataGrid headerSortSeparatorSkin="mx.skins.ProgrammaticSkin" sortableColumns="false" sortExpertMode="true" >
<mx:columns>
<mx:AdvancedDataGridColumn headerText="列 1" dataField="col1"/>
<mx:AdvancedDataGridColumn headerText="列 2" dataField="col2"/>
</mx:columns>
</mx:AdvancedDataGrid>
11.DataGrid 双击事件
应使用ListEvent.ITEM_DOUBLE_CLICK监听双击事件，MouseEvent.DOUBLE_CLICK也可以监听DataGrid的双击事件，但这样即使在空行双击也会触发事件。
12. Flex与java通信 对象不正确序列化
在as类中已写[RemoteClass(alias="xxx.xxx")]，但与后台通信时报错：expected argument types are (java类xxx.xxx) but the supplied types were (flex.messaging.io.amf.ASObject) and converted to (null)
原因是flex在ModuleLoader内部和外部模块域不同导致序列化失败？？
处理方式：import flash.net.registerClassAlias; registerClassAlias("javaxxx.xxx", asyyy);前面参数是后台java类，后面是as类.
13.s:Label
换行：给label设置width，当内容超出指定宽度时自动换行；在指定位置换行，as中label.text(“换\r\n行”);mxml中text="换@#13;行"
行间距：mxml中lineHeight="25"，css中line-height:25
14.flex画表格 mx:Grid
在界面布局时可以使用mx:Grid实现类似HTML的表格布局，可以合并单元格等，但默认是没有边框的，可以使用样式设置边框，画出和HTML一样的表格。
- <fx:Style>
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- mx|Grid
- {
- borderStyle: solid;
- border-color:#000000;
- horizontalGap:-1;
- verticalGap:-1;
- paddingLeft:-1;
- paddingTop:-1;
- paddingRight:-1;
- paddingBottom:-1;
- }
- mx|GridItem{
- borderStyle: solid;
- border-color:#000000;
- paddingTop:0;
- paddingBottom:0;
- horizontalAlign: center;
- verticalAlign: middle;
- }
- </fx:Style>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Grid
{
borderStyle: solid;
border-color:#000000;
horizontalGap:-1;
verticalGap:-1;
paddingLeft:-1;
paddingTop:-1;
paddingRight:-1;
paddingBottom:-1;
}
mx|GridItem{
borderStyle: solid;
border-color:#000000;
paddingTop:0;
paddingBottom:0;
horizontalAlign: center;
verticalAlign: middle;
}
</fx:Style>
15.DataGrid、AdvancedDataGrid表头样式设置
表头背景色设置headerColors: #90e2e9, #dfcafd;该样式DataGrid只有在halo主题下支持。 表头字体样式DataGrid可以使用headerStyleName引用样式，但AdvancedDataGrid通过headerStyleName设置后不起作用，可以使用mx|AdvancedDataGridHeaderRenderer来实现。
- @namespace s "library://ns.adobe.com/flex/spark";
- @namespace mx "library://ns.adobe.com/flex/mx";
- mx|AdvancedDataGrid {
- alternatingItemColors: #F1A4F8, #FFFFFF;
- color: #0B333C;
- fontSize: 12px;
- textRollOverColor: #2B333C;
- rollOverColor: #88DDFF;
- textSelectedColor: #000000;
- borderColor:#0099cc;
- verticalGridLines: true;
- verticalGridLineColor:#0099cc;
- horizontalGridLines: false;
- horizontalGridLineColor:#0099cc;
- selectionDisabledColor: #FFFFFF;
- headerColors: #90e5f9, #dffaff;
- backgroundAlpha: 1.0;
- font-weight:normal;
- }
- mx|DataGrid
- {
- alternatingItemColors: #F1A4F8, #FFFFFF;
- color: #0B333C;
- fontSize: 12px;
- textRollOverColor: #2B333C;
- rollOverColor: #88DDFF;
- textSelectedColor: #000000;
- borderColor:#0099cc;
- verticalGridLines: true;
- verticalGridLineColor:#0099cc;
- horizontalGridLines: false;
- horizontalGridLineColor:#0099cc;
- selectionDisabledColor: #FFFFFF;
- headerColors: #90e5f9, #dffaff;
- backgroundAlpha: 1.0;
- headerStyleName: headstyle;
- font-weight:normal;
- }
- mx|AdvancedDataGridHeaderRenderer
- {
- font-size:13px;
- font-weight:bold;
- borderStyle: solid;
- borderColor: #55E7FA;
- text-align:center;
- color:#15AA8B;
- }
- .headstyle{
- font-size:13px;
- font-weight:bold;
- borderStyle: solid;
- borderColor: #99E7FA;
- text-align:center;
- color:#15AA8B;
- }
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|AdvancedDataGrid {
alternatingItemColors: #F1A4F8, #FFFFFF;
color: #0B333C;
fontSize: 12px;
textRollOverColor: #2B333C;
rollOverColor: #88DDFF;
textSelectedColor: #000000;
borderColor:#0099cc;
verticalGridLines: true;
verticalGridLineColor:#0099cc;
horizontalGridLines: false;
horizontalGridLineColor:#0099cc;
selectionDisabledColor: #FFFFFF;
headerColors: #90e5f9, #dffaff;
backgroundAlpha: 1.0;
font-weight:normal;
}
mx|DataGrid
{
alternatingItemColors: #F1A4F8, #FFFFFF;
color: #0B333C;
fontSize: 12px;
textRollOverColor: #2B333C;
rollOverColor: #88DDFF;
textSelectedColor: #000000;
borderColor:#0099cc;
verticalGridLines: true;
verticalGridLineColor:#0099cc;
horizontalGridLines: false;
horizontalGridLineColor:#0099cc;
selectionDisabledColor: #FFFFFF;
headerColors: #90e5f9, #dffaff;
backgroundAlpha: 1.0;
headerStyleName: headstyle;
font-weight:normal;
}
mx|AdvancedDataGridHeaderRenderer
{
font-size:13px;
font-weight:bold;
borderStyle: solid;
borderColor: #55E7FA;
text-align:center;
color:#15AA8B;
}
.headstyle{
font-size:13px;
font-weight:bold;
borderStyle: solid;
borderColor: #99E7FA;
text-align:center;
color:#15AA8B;
}
16.动态类dynamic class动态方法及属性
一般定义一个类后，只能调用类中已定义好的方法和属性，但flex中可以使用dynamic定义动态类，Object就是一个动态类。
动态类类似于java中的map，属性类似于map的key，使用obj.pro1="动态属性"; obj.pro2=123;赋值，即使类定义中没有pro1,pro2属性，使用属性时也与普通类一样使用。
动态方法也类似，但调用前必须先赋值才可以，不然会报错。赋值和属性赋值类似obj.fun1=meth1;，方法调用：obj.fun1(par1, par2);
如果动态类继承flash.utils.Proxy，则不需要赋值，调用动态方法时会自动调用Proxy的callProperty(method:*, ... args:Array)方法，method为方法名，args为参数列表（多个），我们可以重写这个方法实现自己的功能。
17.callLater方法， setTimeout方法，setInterval方法，Timer类，ENTER_FRAME事件
(1)mx.core.UIComponent.callLater(method:Function, args:Array=null):void
所有继承自UIComponent的组件都可以调用此方法。callLater把要执行的函数延迟到下一帧执行，flex通过callLater实现”失效机制“，这在flex组件的重绘中非常有用，把所有需要重绘的组件一次redraw()完成。
在我们写代码时可以利用callLater来实现延迟调用，flex中很多操作都是通过事件来实现，是异步的，可能有的操作需要等到其他操作执行完后（具备一定条件）才能执行，这时可以通过callLater延迟调用，等待达到执行条件。
(2)flash.utils.setTimeout(closure:Function, delay:Number, ... arguments):uint
在指定的延迟（以毫秒为单位）后运行指定的函数，可用clearTimeout清除调用。可用重复一次的Timer对象替代。
(3)flash.utils.setInterval(closure:Function, delay:Number, ... arguments):uint
以指定的间隔（以毫秒为单位）运行函数。可用clearInterval清除调用。可用无限重复的Timer对象替代。
(4)Timer类
Timer 类是计时器的接口，为 其添加timer或timerComplete 事件侦听器实现相应延时或循环执行相关代码。
(5) flash.events.Event.ENTER_FRAME事件，每次进入新一帧都会派发该事件，可以利用该事件实现特殊功能，比如可以代替Timer实现重复操作。
18.修改Validator验证信息样式
- .errorTip{
- color:#FFFFFF;
- fontSize:12;
- fontWeight:"bold";
- shadowColor: #000000;
- borderColor: #CE2929;
- borderStyle: "errorTipRight";
- paddingBottom: 4;
- paddingLeft: 4;
- paddingRight: 4;
- paddingTop: 4;
- }
.errorTip{
color:#FFFFFF;
fontSize:12;
fontWeight:"bold";
shadowColor: #000000;
borderColor: #CE2929;
borderStyle: "errorTipRight";
paddingBottom: 4;
paddingLeft: 4;
paddingRight: 4;
paddingTop: 4;
}
19.Flex获取网站路径
- var bm:IBrowserManager = BrowserManager.getInstance();
- bm.init();
- var url:String = bm.url; // http://localhost:8080/test/test.html
- var swfUrl:String = FlexGlobals.topLevelApplication.url; // http://localhost:8080/test/test.swf
- // URLUtil.getProtocol(url) + "://" + URLUtil.getServerNameWithPort(url) + "/" + prjName
var bm:IBrowserManager = BrowserManager.getInstance(); bm.init(); var url:String = bm.url; // http://localhost:8080/test/test.html var swfUrl:String = FlexGlobals.topLevelApplication.url; // http://localhost:8080/test/test.swf // URLUtil.getProtocol(url) + "://" + URLUtil.getServerNameWithPort(url) + "/" + prjName
20.获得屏幕、窗口大小
Capabilities.screenResolutionX，Capabilities.screenResolutionY：屏幕分辨率，不随浏览器窗口大小而改变
FlexGlobals.topLevelApplication.stage.stageWidth，FlexGlobals.topLevelApplication.stage.stageHeight：Flex应用程序窗口大小