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()方法加入容器的，可能会有问题。

[javascript] view plaincopyprint?
  1. <p>Test.mxml: 
  2.  
  3.  
  4. <?xml version="1.0" encoding="utf-8"?> 
  5. <s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"  
  6. xmlns:s="library://ns.adobe.com/flex/spark"  
  7. xmlns:mx="library://ns.adobe.com/flex/mx" > 
  8. <s:Button id="b1" label="test"/> 
  9. </s:Panel> 
  10.  
  11.  
  12. // 在另一文件中引用 
  13. var t:Test = new Test(); 
  14. trace("addElement前：" + t.b1); // 打印结果为null 
  15. this.addElement(t); 
  16. trace("addElement后：" + t.b1); // 正常 
  17. </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反射机制是比较复杂的，下面是在开发中遇到的情况，根据类名生成类的对象，这样可以用以下简单方法实现：

 

[javascript] view plaincopyprint?
  1. var classRefrence:Class = getDefinitionByName(className) as Class;   
  2. 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使用正则表达式验证日期

 

[plain] view plaincopyprint?
  1. // 定义验证日期的正则表达式 
  2. 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)$/; 
  3.  
  4. if (dateField.text != null && dateField.text != "") { 
  5.          
  6.         if (!dateReg.test(dateField.text)) { 
  7.             Alert.show("时间输入错误"); 
  8.             return; 
  9.         } 
  10. }  
// 定义验证日期的正则表达式
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"禁用排序，则不会显示出按钮来。

 

[html] view plaincopyprint?
  1. <mx:AdvancedDataGridheaderSortSeparatorSkin="mx.skins.ProgrammaticSkin"sortableColumns="false"sortExpertMode="true">   
  2.     <mx:columns>   
  3.         <mx:AdvancedDataGridColumnheaderText="列 1"dataField="col1"/>   
  4.         <mx:AdvancedDataGridColumnheaderText="列 2"dataField="col2"/>   
  5.     </mx:columns>   
  6. </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一样的表格。

 

[html] view plaincopyprint?
  1. <fx:Style> 
  2.     @namespace s "library://ns.adobe.com/flex/spark"; 
  3.     @namespace mx "library://ns.adobe.com/flex/mx"; 
  4.     mx|Grid   
  5.     {   
  6.         borderStyle: solid;   
  7.         border-color:#000000; 
  8.         horizontalGap:-1;   
  9.         verticalGap:-1;   
  10.         paddingLeft:-1;   
  11.         paddingTop:-1;   
  12.         paddingRight:-1;   
  13.         paddingBottom:-1;   
  14.     }   
  15.     mx|GridItem{   
  16.         borderStyle: solid;   
  17.         border-color:#000000; 
  18.         paddingTop:0;   
  19.         paddingBottom:0;   
  20.         horizontalAlign: center;   
  21.         verticalAlign: middle;   
  22.     }   
  23. </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来实现。

 

[html] view plaincopyprint?
  1. @namespace s "library://ns.adobe.com/flex/spark"; 
  2. @namespace mx "library://ns.adobe.com/flex/mx"; 
  3.  
  4. mx|AdvancedDataGrid { 
  5.     alternatingItemColors: #F1A4F8, #FFFFFF; 
  6.     color: #0B333C; 
  7.     fontSize: 12px; 
  8.     textRollOverColor: #2B333C; 
  9.     rollOverColor: #88DDFF; 
  10.     textSelectedColor: #000000; 
  11.     borderColor:#0099cc; 
  12.     verticalGridLines: true; 
  13.     verticalGridLineColor:#0099cc; 
  14.     horizontalGridLines: false; 
  15.     horizontalGridLineColor:#0099cc; 
  16.     selectionDisabledColor: #FFFFFF; 
  17.     headerColors: #90e5f9, #dffaff; 
  18.     backgroundAlpha: 1.0; 
  19.     font-weight:normal; 
  20. } 
  21.  
  22. mx|DataGrid   
  23. { 
  24.     alternatingItemColors: #F1A4F8, #FFFFFF; 
  25.     color: #0B333C; 
  26.     fontSize: 12px; 
  27.     textRollOverColor: #2B333C; 
  28.     rollOverColor: #88DDFF; 
  29.     textSelectedColor: #000000; 
  30.     borderColor:#0099cc; 
  31.     verticalGridLines: true; 
  32.     verticalGridLineColor:#0099cc; 
  33.     horizontalGridLines: false; 
  34.     horizontalGridLineColor:#0099cc; 
  35.     selectionDisabledColor: #FFFFFF; 
  36.     headerColors: #90e5f9, #dffaff; 
  37.     backgroundAlpha: 1.0; 
  38.     headerStyleName: headstyle; 
  39.     font-weight:normal; 
  40. } 
  41.  
  42. mx|AdvancedDataGridHeaderRenderer 
  43. { 
  44.     font-size:13px; 
  45.     font-weight:bold; 
  46.     borderStyle: solid; 
  47.     borderColor: #55E7FA; 
  48.     text-align:center; 
  49.     color:#15AA8B; 
  50. } 
  51.  
  52. .headstyle{ 
  53.     font-size:13px; 
  54.     font-weight:bold; 
  55.     borderStyle: solid; 
  56.     borderColor: #99E7FA; 
  57.     text-align:center; 
  58.     color:#15AA8B; 
  59. }  
@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验证信息样式

 

[css] view plaincopyprint?
  1. .errorTip{ 
  2.     color:#FFFFFF; 
  3.     fontSize:12; 
  4.     fontWeight:"bold"; 
  5.     shadowColor: #000000; 
  6.     borderColor: #CE2929; 
  7.     borderStyle: "errorTipRight"; 
  8.     paddingBottom: 4; 
  9.     paddingLeft: 4; 
  10.     paddingRight: 4; 
  11.     paddingTop: 4; 
  12. }  
.errorTip{
	color:#FFFFFF;
	fontSize:12;
	fontWeight:"bold";
	shadowColor: #000000;
	borderColor: #CE2929;
	borderStyle: "errorTipRight";
	paddingBottom: 4;
	paddingLeft: 4;
	paddingRight: 4;
	paddingTop: 4;
}

        19.Flex获取网站路径

 

[javascript] view plaincopyprint?
  1. var bm:IBrowserManager = BrowserManager.getInstance(); 
  2. bm.init(); 
  3. var url:String = bm.url;    // http://localhost:8080/test/test.html 
  4.  
  5. var swfUrl:String = FlexGlobals.topLevelApplication.url;    // http://localhost:8080/test/test.swf 
  6.  
  7. // 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应用程序窗口大小

posted @ 2014-03-27 09:22  regalys168  阅读(3155)  评论(0)  编辑  收藏  举报