Flex之旅--Flex小问题汇总(无限更新)

        本文用来汇总一些Flex学习过程中遇到的一些简单的,没必要单独拿出来整理的小问题、小知识、小技巧或一些注意事项,会一直不定期更新。

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

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;

        但需注意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;
		}
}

        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: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>

        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;
}

        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;
}

        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
        20.获得屏幕、窗口大小

Capabilities.screenResolutionX,Capabilities.screenResolutionY:屏幕分辨率,不随浏览器窗口大小而改变

FlexGlobals.topLevelApplication.stage.stageWidth,FlexGlobals.topLevelApplication.stage.stageHeight:Flex应用程序窗口大小




  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值