Flex技巧收集

转载自：http://uh.9ria.com/space-54874-do-blog-id-10348.html

 

flex4皮肤（外观设计）实例：http://www.adobe.com/cn/devnet/flex/articles/flex4_skinning.html

1、让Label、Text中的文本自动换行：

    

<mx:Label id="lab" creationComplete="{lab.mx_internal::getTextField().wordWrap = true;}"/>

     Text 标签同理

 

2、flex获得年月日: 

     

var date:Date = new Date();      var df:DateFormatter = new DateFormatter();       df.formatString = 'YYYY-MM-DD HH:NN:SS';      trace(df.format(date));

    --------------------------------------------------------------------------

    格式化时间戳：1314063166171 （自 1970 年 1 月 1 日午夜以来的毫秒数。）
    flex 获得时间戳的方法是 new Date().getTime() 。
    Date 的 getTime() 方法 是 自 1970 年 1 月 1 日午夜以来的毫秒数。
    getTime() 得到的时间毫秒数跟 java 和 php 等得到的毫秒数是一样的。
    格式化毫秒数的方法：
   

var df:DateFormatter = new DateFormatter();                        df.formatString = 'YYYY-MM-DD HH:NN:SS';  // 1314063166171    trace(" 格式化时间戳 = ",df.format(new Date()));    //当前时间    trace(" 格式化时间戳 = ",df.format(new Date(1314063166171)));  //已有时间

    

   注意：new Date()中的数字不能为String 类型。类型为String转化会有问题。   

  

3、ArrayCollection 数据

private var tempArr:ArrayCollection = new ArrayCollection(      [       {date:"2011-3-4",type:"[flex]",title:"flex开发"},     {date:"2011-3-4",type:"[java]",title:"java开发"},     {date:"2011-3-4",type:"[php]",title:"php开发"},    ]     );

  4、屏幕分辨率相关
   Capabilities
Capabilities 类提供一些属性，这些属性描述了承载 SWF 文件的系统和播放器。例如，手机屏幕可以有 100 个正方形像素（黑白），而 PC 屏幕则可以有 1000 个正方形像素（彩色）。通过使用Capabilities 对象来确定用户所拥有的设备的类型，可以向尽可能多的用户提供适当的内容。如果熟悉设备的功能，则可以通知服务器发送合适的 SWF 文件，或是通知 SWF 文件变更其播放方式。

可使用 GET 或 POST HTTP 方法发送功能信息，这些信息作为一个 URL 编码的字符串存储在 Capabilities.serverString 属性中。下例显示了支持 MP3、具有 1600 x 1200 像素分辨率、运行 Windows XP 并且安装有输入法编辑器 (IME) 的计算机的服务器字符串：

A=t&SA=t&SV=t&EV=t&MP3=t&AE=t&VE=t&ACC=f&PR=t&SP=t&     SB=f&DEB=t&V=WIN%209%2C0%2C0%2C0&M=Adobe%20Windows&     R=1600x1200&DP=72&COL=color&AR=1.0&OS=Windows%20XP&     L=en&PT=External&AVD=f&LFD=f&WD=f&IME=t【 FlexGlobals  出自于 Flex4 】5、自动更新界面组件大小，如：   ViewStack 设置 resizeToContent="true"6、获得Text组件的行数和列数
var numLines:int = summaryText.mx_internal::getTextField().numLines;var lineLength:int = summaryText.mx_internal::getTextField().getLineLength(numLines - 1);

7、Embed 嵌入资源

   1）<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>

   2）[Embed("/assets/report/reportLibrary/pdf.png")]      public var pdfIcon:Class;

8、通过两开时间戳来计算其之间相差的天数

var begin:Number  =  128672640032;     var end:Number  =  1318175999328;     var count:int= (end - begin)/60/60/1000/24 + 1;

     9、加载外部 swf  样式文件

  var event:IEventDispatcher = StyleManager.loadStyleDeclarations("assets/compStyle.swf", true);      event.addEventListener(StyleEvent.COMPLETE, loadStyleHandler);     ----------------------------------------------------------------------------------     private function loadStyleHandler(event:StyleEvent):void    {          trace("load swf style css finish");     }

    10、将组件的 【属性】提取成为【样式】

       1）作为 .as 文件来做：

      

 package com.comps      {             import mx.containers.VBox;            [Style(name="heightStyle", type="Number", format="uint", inherit="no")]             public class MyVBox extends VBox            {                  public function MyVBox()                 {                  }                 override public function styleChanged(styleProp:String):void                 {                       super.styleChanged(styleProp);                       var heightNum:Number;                       switch (styleProp){                       case "heightStyle":                              heightNum = this.getStyle( styleProp ) as Number;                              this.height = heightNum;                              break;                        }                        this.invalidateDisplayList();                 }            }       }

     2)作为组件来做：

 <?xml version="1.0" encoding="utf-8"?>       <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">           <mx:Metadata>                [Style(name="heightStyle",type="Number",format="Number",inherit="no")]           </mx:Metadata>           <mx:Script>                <![CDATA[                     /**                      * 重写styleChanged事件，处理combobox样式                      */                    public override function styleChanged(styleProp:String):void                   {                        super.styleChanged( styleProp );                        var heightNum:Number;                        switch( styleProp )                        {                             case "heightStyle":                                  heightNum  = getStyle( styleProp ) as Number                                  if(  heightNum != 0 )                                 {                                       this.height = heightNum;                                 }                                 break;                         }                    }                ]]>           </mx:Script>         </mx:HBox>

      11、DataGrid  设置表头背景、 设置表头坚线 样式

DataGrid{      /**  表头竖线 **/      vertical-locked-separator-skin:Embed                                     (source="/assets/components/dg/Headerseparator.png");      header-separator-skin: Embed('/assets//components/dg/Headerseparator.png');      /** 表头背景 **/      header-background-skin:Embed(source="/assets/components/dg/Header.png",                                                        scaleGridLeft=3,                                                        scaleGridRight=12,                                                        scaleGridTop=3,                                                        scaleGridBottom=22);}

    

12、遍历 Dictionary 数据

var arr:Array = new Array();        for each ( var obj:Object in dictionary){              arr.push(obj);        }

        13、字符串替换

       原文引自：http://bbs.9ria.com/viewthread.php?tid=106303

    private function testFlexStringReplaceAll():void {var strSource:String = "Li_guo_Liang.com";trace(strSource + " - " + replaceAllBySplit(strSource, "_", ""));trace(strSource + " - " + replaceAllByRegex(strSource, "_", ""));}/*** Repalce all by split and join;*/public static function replaceAllBySplit(strSource:String, strReplaceFrom:String, strRepalceTo:String):String {return strSource == null ? null : strSource.split(strReplaceFrom).join(strRepalceTo);}/*** Replace all by RegEx;*/public static function replaceAllByRegex(strSource:String, strReplaceFrom:String, strRepalceTo:String):String {return strSource == null ? null : strSource.replace(new RegExp(strReplaceFrom, 'g'), strRepalceTo);}

        14、 flex AxisRenderer的轴样式 （Flex图表的坐标轴样式）

     AxisRenderer的预定义轴样式

         打开AxisRenderer的源码，可以发现AxisRenderer类有七个预定义样 式：verticalAxisStyle，blockNumericAxis，linedNumericAxis，dashedNumericAxis，blockCategoryAxis，hangingCategoryAxis，dashedCategoryAxis。 对于NumericAxis，横轴默认的样式为hangingCategoryAxis，纵轴的样式为blockNumericAxis；对于 CategoryAxis，横轴默认的样式为hangingCategoryAxis，纵轴的样式为blockCategoryAxis。这些样式在早期 的Flex版本中也出现过，不过自从Flex 2.0后就被隐藏起来了。

 以上内容出自：http://www.riaqx.com/a/Flexwendang/jichuwendang/2010/1130/643.html

  坐标轴样式演示，引自：http://www.9flex.com/archives/77/

15、下载相关

protected function download_clickHandler():void{var fileurl:String;//链接地址字符串中混乱的字符的处理  --开始fileurl = decodeURI(_articleMessage.fileurl);fileurl = fileurl.replace(new RegExp("%2F", "g"), "/");fileurl = fileurl.replace(new RegExp("%3A", "g"), ":");//链接地址字符串中混乱的字符的处理  --结束var fileRef:FileReference = new FileReference;var urlRequest:URLRequest = new URLRequest(fileurl);fileRef.download(urlRequest);}

16、内存泄漏相关

1. 引用泄露：对子对象的引用，外部对本对象或子对象的引用都需要置null；
2. 系统类泄露：使用了系统类而忘记做删除操作了，如BindingUtils.bindSetter()，ChangeWatcher.watch()函数时候完毕后需要调用ChangeWatcher.unwatch()函数来清除引用 ，否则使用此函数的对象将不会被删除；
类似的还有MUSIC，VIDEO，IMAGE，TIMER，EVENT，BINDING等。
3. 效果泄露：当对组件应用效果Effect的时候，当本对象本删除时需要把本对象和子对象上的Effect动画停止掉，然后把Effect的target对象置null; 如果不停止掉动画直接把 Effect置null将不能正常移除对象。
4. SWF泄露：要完全删除一个SWF要调用它的unload()方法并且把对象置null;
5. 图片泄露：当Image对象使用完毕后要把source置null;(为测试)；
6. 声音、视频泄露: 当不需要一个音乐或视频是需要停止音乐，删除对象，引用置null;

内存泄露解决方法：
1. 在组件的REMOVED_FROM_STAGE事件回掉中做垃圾处理操作（移除所有对外引用（不管是VO还是组件的都需要删除），删除监听器，调用系统类的清除方法）
先remove再置null, 确保被remove或者removeAll后的对象在外部的引用全部释放干净;
2. 利用Flex的性能优化工具Profile来对项目进程进行监控，可知道历史创建过哪些对象，目前有哪些对象没有被删除，创建的数量，占用的内存比例和用量，创建过程等信息；

详细出处参考：http://www.jb51.net/article/13736.htm

17、浏览器相关

       1. Flex打开一个新浏览器窗口

          navigateToURL(newURLRequest('http://ntt.cc'),'_blank');

      2. 刷新浏览器

          navigateToURL(newURLRequest("javascript:location.reload();"),"_self")

      3. 关闭浏览器

          navigateToURL(newURLRequest("javascript:window.close()"),"_self");

18、Flex设置Alert容口的背景为透明

      Alert {

             modalTransparency:0.0;  

             modalTransparencyBlur:0;

        }

19、取随机颜色

       lbl.setStyle('color',0xffffff*Math.random());

20、消除锯齿（字体锯齿）flash

创建抗锯齿文本有多种算法,但最终的办法是使用字体颜色阴影(useshadesofthefontcolor)平滑曲线(smoothcurves)和弯曲角度(corners)(butultimatelytheideaistouseshadesofthefontcolortosmoothcurvesandcornersofthetext)。对于字体的抗锯齿方法，要记住,所有的字体都使用是不必要的。抗锯齿技术不能运用于设备字体中(Anti-aliasingcannotbecontrolledindevicefonts)

21、动态创建的datagrid中如何使用sortCompareFunction

方法：

dgColumn.sortCompareFunction=sortFunc(item.@columnName);

使用：

private static function sortFunc(field:String):Function{                                                   return function(obj1:Object, obj2:Object):int{                                  return ObjectUtil.numericCompare(obj1[field],obj2[field]);                          }                  }

22、多module 切换问题

http://www.blogjava.net/caizh2009/archive/2009/08/19/291784.html

23、Flash Build 4编译慢、报java heap space 堆空间异常错误的解决方法：
 1)、在安装路径下找到FlexBuilder.ini文件，进行编辑，加入如下参数
-vmargs
-Xms128m
-Xmx512m
-XX:MaxPermSize=256m
-XX:PermSize=64m #不要设置太高，否则会更加慢
-Djava.net.preferIPv4Stack=true
以上几条经验可以明显加快编译速度数倍，第3条可以明显减低FB挂掉的几率。（最后一句也很重要）
2)、由于Flex Builder compiler shell有memory leak的问题， 而SDK默认的的 JVM heap size 只有384M，当compile比较大的project容易不够，所以只要修改SDK的JVM参数就可以。
编辑 {Flex SDK}安装路径/bin/jvm.config 文件如下。
java.args=-Xmx512m -Dsun.io.useCanonCaches=false
如果还是有Error，可以增加到1024或者更多。
注：我的flex4.5安装路径中的sdk位置：F:\Adobe\Adobe Flash Builder 4.5\sdks\4.5.1\bin\jvm.config在这里调整即可！

 

24、flex 遮罩mask 属性 

        Matrix 不是遮罩，mask才是用来做遮罩的。通过使用容器的mask属性来实现遮罩 。

25、设置tooltip字体

   第一种：通过代码

1. StyleManager.getStyleDeclaration("ToolTip").setStyle("fontSize",12);  
2. StyleManager.getStyleDeclaration("ToolTip").setStyle("backgroundColor","#ff0000"); 

   第二种：通过类样式

     ToolTip{

fontSize: 12;

     }

26、flex4文本引擎

    Text Layout Framework

    http://labs.adobe.com/technologies/textlayout/demos/

    http://labs.adobe.com/technologies/textlayout/

    http://hi.baidu.com/alonepig1987/blog/item/c2429743f39ed79ab3b7dc0d.html

27、flex图文混排

应用Flex：
  1. flex的话可以看看这个博客：http://blog.csdn.net/songhuanren/archive/2008/04/19/2308141.aspx是用flex 4实现的。
  2. 再有就是一个组件是谷歌code上边的实现聊天窗口图文混排：http://code.google.com/p/riaidea/wiki/RichTextField。如果应用到博客等之类上的图文混排可能要修改一下源码。JS：
如果以上都不合适可以试试用js版的！这里有19款js富文本编辑器：http://paranimage.com/19-javascript-rich-text-editor/
嵌入Iframe组件用这个组件去载入js文本编辑器然后flex和js交互读取文本框内内容；
Iframe组件有2个，1：http://code.google.com/p/flex-iframe/
                              2：http://www.zhuoqun.net/html/y2006/359.html（一个老外写的在flex内显示html，Dreamer这个博客也挺不错很多东西挺实用的）

28、根据组件属性是否改变在下一秒刷新组件

invalidateProperties():void

标记组件，以便在稍后屏幕更新期间调用该组件的 commitProperties() 方法。

29、将数字转换成其他进制类型，例如转换成16进制：

<?xml version="1.0" encoding="utf-8"?>   <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"                              creationComplete="init()">         <mx:Script>                <![CDATA[                       import mx.controls.Alert;                       private var num:int = 123;                       private function init():void                       {                              Alert.show(num.toString(16));                       }               ]]>         </mx:Script>   </mx:Application>

   或

若用ByteArray接值。循环后得出结果时

private function outPutHexStr(byteArr:ByteArray):void{     for(var i:int = 0;i<byteArr.length;i++){           Alert.show("0x"+byteArr[i].toString(16));     }} 

30、HTML内容设置文字颜色的方法：

    HTML直接设置其样式color不会对内容造成影响，可以按以下方式试试

    <mx:HTML id="content" width="100%" paddingLeft="10" paddingRight="20"

 paddingTop="15" paddingBottom="15" paintsDefaultBackground="false" backgroundAlpha="0"/>

    paintsDefaultBackground="false" 属性的作用

    包括设置内容的颜色，只能通过html标签来设，在HTML组件里边设置color是没有效果的。

31、Tree 树节点去掉ICON标志

<mx:Style>  Tree  {      folderClosedIcon: ClassReference(null);      folderOpenIcon: ClassReference(null);      defaultLeafIcon: ClassReference(null);  } </mx:Style>

 

32、最大化最小化等事件监听

监听：

Application.application.addEventListener(NativeWindowDisplayStateEvent.DISPLAY_STATE_CHANGE, changeHandler);/** * 应用程序状态改变事件处理 */private function changeHandler(event:NativeWindowDisplayStateEvent):void{if (this.stage == null){return;}if (this.stage.nativeWindow.displayState == NativeWindowDisplayState.MINIMIZED){oldPosition = content.verticalScrollPosition;}else if (this.stage.nativeWindow.displayState == NativeWindowDisplayState.MAXIMIZED ||                  this.stage.nativeWindow.displayState == NativeWindowDisplayState.NORMAL){content.verticalScrollPosition = oldPosition;}}

33、DataGrid 设置表头背景、设置表头坚线

DataGrid{headerStyleName: dgHeadStyleName;vertical-locked-separator-skin:Embed(source="/assets/datagrid/dgHeaderseparator.png");header-separator-skin: Embed('/assets/datagrid/dgHeaderseparator.png');header-background-skin:Embed(source="/assets/datagrid/Header.png",scaleGridLeft=2,scaleGridRight=12,scaleGridTop=2,scaleGridBottom=20);}.dgHeadStyleName{font-size:12;        fontFamily: 宋体;color:#ffcc00;padding-left:5;verticalAlign: middle;}

34、构建更加完善的Adobe AIR应用程序之十大秘诀（降低cpu使用率）

   http://www.adobe.com/cn/devnet/air/articles/10_tips_building_on_air.html