Flex Log系列之二 - 输出日志到应用程序界面

 

使用TraceTarget具有明显的弊端，必须使用Debug版本的FlashPlayer，才可以看到日志输出。本文介绍下如何扩展，使Log输出到应用程序界面。

    一 编写UIConsoleTarget

public class UIConsoleTarget extends LineFormattedTarget
        {
                public function UIConsoleTarget()
                {
                        super();
                }
                public var richText:TextArea;//UI文本
                override mx_internal function internalLog(message:String):void
                {
                        if(richText){
                                richText.text = richText.text+"\n"+message;
                        }
                }
        }

 

需要注意internalLog为内部方法，所以在类前面需要引入名称空间：

import mx.core.mx_internal;
use namespace mx_internal;//引入名次空间

 

 

二 调整界面，增加UILog的View

<s:TextArea id="logConsole" width="100%" height="100" editable="false" includeInLayout="false" visible="false">
        </s:TextArea>
        <s:HGroup x="0" y="{this.height-30}" width="100%" horizontalAlign="right">
                <s:Button id="consoleButton" label="[Log]" click="consoleButton_clickHandler(event)"/>
        </s:HGroup>

 

界面如下：

 

 

三 初始化UIConsoleTarget

private function initUILog():void{
                                var logTarget:UIConsoleTarget = new UIConsoleTarget();
                                logTarget.richText = logConsole;//注入UI界面
                                
                                //设定日志级别
                                logTarget.level = LogEventLevel.INFO;
                                //设置日志格式
                                logTarget.includeDate = true;
                                logTarget.includeTime = true;
                                logTarget.includeCategory = true;
                                logTarget.includeLevel = true;
                                // 开启日志记录
                                Log.addTarget(logTarget);
                        }

 

 

四 登录后效果如下：

 

 

 

后续内容：

1 扩展Logger的获取机制，根据类获取对应的Logger。方便业务使用，从而避免使用：

private const myLogger:ILogger=Log.getLogger("LoginPanel");

 

2 优化UILog View的实现

 

3 扩展使log输出到firefox的firebug console

 

4 分析对比flex log和as3common 中的log实现