FoxLing - 前端开发 » Flex

查看嘀咕照片的小玩意，暂且叫PictureLife吧。

FoxLing — Thu, 03 Sep 2009 12:45:21 +0000

这两天突然好玩做了这么个玩意，输入嘀咕网的帐号即可浏览该用户的所有照片。

地址：

http://app.foxling.cn/picturelife/

功能：

鼠标拖动：左右滑动，向左滑动时，自动加载更多的照片（前提是还有更多照片…）
鼠标点击空白区域：缩放到合适大小
鼠标滚轮：放大，缩小显示区域
鼠标点击单张小图：加载该大图，并且放大到原始尺寸。

预览图：

预览图1

预览图2

后续：

仓促弄出来玩玩，有待继续改进。

在Flex中继承ProgrammaticSkin类自定义皮肤

FoxLing — Mon, 06 Jul 2009 15:06:57 +0000

通过自定义类的方式创建皮肤，控制性更强，占用的内存更少。
ProgrammaticSkin类是外观元素的基类，它们通过编程方式来绘制自身。
关于ProgrammaticSkin类的更多信息，猛击这里：
http://www.airia.cn/ActionScript3API/livedocs/mx/skins/ProgrammaticSkin.html

自定义类

package skins
{
    import flash.display.GradientType;
    import flash.display.Graphics;

    import mx.skins.ProgrammaticSkin;

    public class CustomBG extends ProgrammaticSkin
    {

        public function CustomBG()
        {
            super();
        }

        override protected function updateDisplayList(w:Number, h:Number):void
        {
            super.updateDisplayList(w, h);

            var g:Graphics = graphics;
            var fillColors:Array = [0x191919,0x262626,0x191919];
            var fillAlphas:Array = [1.0,1.0,1.0];
            var fillRatios:Array = [0,127,255]

            g.clear();

            drawRoundRect(0, 0, w, h, 0, fillColors, fillAlphas,
                          horizontalGradientMatrix(0, 0, w, h), GradientType.LINEAR,fillRatios );
        }

        override public function get measuredWidth():Number
        {
            return 8;
        }

        override public function get measuredHeight():Number
        {
            return 8;
        }
    }

}

在CSS中使用ClassReference调用自定义类

.customBg
{
backgroundSize: “100%”;
backgroundImage: ClassReference(“skins.CustomBG”);
}

Flex 中可能导致内存泄露的地方

FoxLing — Thu, 02 Jul 2009 17:49:11 +0000

收集了不少的会导致内存泄露的情况：

事件监听：

对父级对象加了监听函数，会造成内存泄露，例：

override protected function mouseDownHandler(…):void {
systemManager.addEventListener(“mouseUp”, mouseUpHandler);
......
}

解决：
在销毁对象的时候，remove掉这些监听，虽然弱引用也可以避免这些问题，但自己掌控感觉更好。

但以下几种情况不会造成内存泄露：

弱引用：someObject.addEventListener(MouseClick.CLICK, handlerFunction, false, 0, true);
对自己的引用：this.addEventListener(MouseClick.CLICK, handlerFunction);

子对象的引用：

private var childObject:UIComponent = new UIComponent;
addChild(childObject);
childObject.addEventListener(MouseEvent.CLICK, clickHandler);

总之…有addEventListener，就removeEventListener一下吧，要为自己做的事负责~哈哈

清除引用

remove掉子对象后并不会删除该对象，他还保留在内存中，应该将引用设置为null

removeChildren(obj);
obj = null;

静态成员

Class （或MXML）中有：

public static var _eventService : MyService=new MyService();

解决：在dispose时，需要设置：

_eventService =null;

module (未解决)

moduleLoader unloadModule后
ModuleInfo 并不会被GC.
Garbage Collection in a MultiCore Modular Pipes Application
这篇文章介绍了一种GC策略，感觉对于ModuleInfo 的GC无效。
(未尝试、未遇到)

CSS样式

module 中如果使用了shell的CSS定义或是这样的定义，那么这个module将不能GC.
弹出的窗口应该是同样的结果.
解决方法，使用动态CSS文件
module init中

StyleManager.loadStyleDeclarations("css/myStyle.swf");

module dispose中

StyleManager.unloadStyleDeclarations("css/myStyle.swf");

TextInput/Textarea(未解决)

如果module中有window使用了TextInput/Textarea控件，不点击没有问题，只要点上去，那么很遗憾了，module和所在窗体将不能被GC.
这个BUG非常严重，目前还没有解决方法。
memory leak when using TextInput and TextArea when click the keyboard 这里面附加的解决方法无效。
通过profiler分析，应该和Focusmanager有关，只有一点击就不会释放。

CursorManager.setCursor

使用了

cursorID = CursorManager.setCursor(iconClosed);

dispose时要

CursorManager.removeCursor(cursorID);

Bitmap

如果使用Bitmap，结束时需要调用其dispose方法，否则内存消耗巨大。
另外，BitmapData是可以共享使用的，多个Bitmap可以使用同一BitmapData，节省不少内存。

var bmp:Bitmap  =new Bitmap();

........

if (bmp.bitmapData!=null) {
    bmp.bitmapData.dispose();
}

Image

包含了Image对象时，在removeChildren时会造成不能释放（测试多次，结果不一，建议还是做如下处理）。
解决：

img.source = null;
this.removeChild(img);
img = null;

Loader、SWFLoader、声音、视频、Effect等…

如果是加载SWF文件，先停止播放。
停止声音的播放
停止正在播放的影片剪辑(Movieclip)
关闭任何连接的网络对象，例如Loader正在加载，要先close。
取消对摄像头或者麦克风的引用
取消事件监听器
停止任何正在运行的定时器，clearInterval()
停止任何Timer对象，timer.stop()
停止正在播放的效果(Effect)

其他

binding也疑似有memory leak 问题。

总结：由于之前Flash一直是在网页上使用，一般网页都是看完就关掉的，估计Adobe在内存回收这块也没有下太大的功夫，现在AIR的出现使得内存管理也相当重要了，并且，AIR本身对内存的消耗就相当大，一个没有任何内容的初始创建的AIR程序，就得占掉10-20M+的内存…AIR还需改善.

AIR日志记录方法

FoxLing — Wed, 24 Jun 2009 14:52:27 +0000

public static function log(txt:String):void
{
    var date:Date = new Date();
    var fileName:String;

    fileName = "errlog-" + date.getFullYear().toString() + (date.getMonth()+1).toString() + date.getDate() + ".txt";

    var file:File = File.applicationStorageDirectory.resolvePath(fileName);
    var fs:FileStream = new FileStream();

    txt = "\n\n--------" + date.toString() + "----------\n" + txt

    fs.open(file,FileMode.APPEND);
    fs.writeUTFBytes(txt);
    fs.close();
}

废话不多说，直接看代码，将需要记录的日志，比如出错信息记录到程序数据文件夹，以日期命名，便于追踪信息。

魔嘀新版本(更新1.1版本)

FoxLing — Sun, 12 Apr 2009 05:03:26 +0000

经过一段时间的辛苦奋战，魔嘀终于发布1.0了，所有的代码全部重写，增加了一些常用的功能，并请@ZK设计了全新的UI，现在的魔嘀帅多了。
魔嘀下载页面：http://app.foxling.cn/modi/
但现在还有许多细节都需要优化，时间有限，只能一步一步地更新了~
如果发现了什么BUG，或有什么好的建议，在这里留言吧，不一定一一回复，但我都会整理记录起来的，并且在后面的版本里陆续实现，欢迎在嘀咕网跟随我，一起交流。
AIR应用的通病，内存消耗较大，所以，建议平时不用时最小化吧，最小化后内存占用会比较少，8M-12M左右，我也在不断地优化代码，寻找BUG，使魔嘀的内存占用量能维持在一个比较稳定的水平。

版本更新

1.0 (2009-04-10)

AS3使用HTTPService类访问需要HTTP Basic Authentication认证的URL

FoxLing — Wed, 25 Feb 2009 15:29:11 +0000

在使用API的时候，如嘀咕、Twitter、饭否的API，会需要使用用户名和密码登录，一般都是使用HTTP Basic Authentication认证，使用HTTPService类访问这种URL时，需要设置headers，用户名和密码的格式为“username:password”，并且需要Basic64加密，具体代码如下。

import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.utils.Base64Encoder;
import mx.rpc.http.HTTPService;
URLRequestDefaults.authenticate = false;//设默认为false，否则用户较验错误时会弹出验证框

private var result:XML;
private function initApp():void
{
	var base64enc:Base64Encoder = new Base64Encoder;
	base64enc.encode("user:password"); //用户名和密码需要Base64编码
	var user:String = base64enc.toString();

	var http:HTTPService = new HTTPService;
	http.addEventListener(ResultEvent.RESULT,resultHandler);//监听返回事件
	http.addEventListener(FaultEvent.FAULT,faultHandler);     //监听失败事件
	http.resultFormat = "e4x";//返回格式
	http.url = "http://api.digu.com/statuses/friends_timeline.xml"; 以嘀咕网的API为列
	http.headers = {"Authorization":"Basic " + user};
	http.send();
}
private function resultHandler(e:ResultEvent):void
{
	result = XML(e.result);
	test.dataProvider = result.status;//绑定数据
}
private function faultHandler(e:ResultEvent):void
{
	//处理失败
}