Flex技巧收集

发布时间：2020-12-15 04:51:42 所属栏目：百科来源：网络整理

导读：转载自：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.

转载自：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开发"},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",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,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",":");
//链接地址字符串中混乱的字符的处理  --结束
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.aspzz.cn/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:AdobeAdobe Flash Builder 4.5sdks4.5.1binjvm.config在这里调整即可！

24、flex 遮罩mask 属性?

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

25、设置tooltip字体

? ? 第一种：通过代码

StyleManager.getStyleDeclaration("ToolTip").setStyle("fontSize",12);??
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,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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!