BREAK FREE FROM THE BROWSER

I don’t want to break free (at least not from the browser ). I want a competitive desktop solution using Flex instead of Swing or SWT, but so far that’s not what I can get. If you want to know what is still the problem with AIR (IMHO), look at Mike Chamber’s blog about the CommandProxy.

I’ve used the same approach (communication via sockets) to access the Ruby Runtime and execute Ruby scripts on a Windows XP machine and do some MS automation (see Ruby On Windows). But that was just a hack and in my case for a special kind of application in mind not a feasible solution.

I attended the Adobe on AIR Tour in Amsterdam in april last year to take a fresh look on AIR and to talk to some of the Adobe guys, here with Mike Chambers (you can run, but you can’t hide). I tried to find out what is their point of view and what to expect from AIR in the future and what Adobe is aiming for - another widget toolkit or a real desktop platform? But unfortunately the answer was not clear. Now we are two minor AIR releases (1.1, 1.5) further ahead and it’s still not clear to me. Ok, ok, I know it’s all about security and cross platform issues, but I still think Adobe is missing the point - even Java had JNI just from the start and SUN was adding more and more platform specific features to the JDK and has launched the JDesktop Integration Components (JDIC) project on javadesktop.org - for good reasons.

I’ve seen this article written by Yakov Fain and couldn’t agree more:

Dear Adobe, please make AIR a full-fledged desktop development platform. You can’t be a little pregnant.

Please don’t get me wrong - I like AIR, especially that Adobe has integrated the WebKit browser engine (can’t wait for JWebPane). I wish I would have the same HTML stuff in Flex running in a browser (but that’s another story).

So, Adobe, please give us the freedom to rock out on any platform! Yes, I want to break free…

Btw, here is Adobe’s demo AIR application to show some nice features:

• Font size slider
• Yahoo theme switch
• Some settings stored on client side as LSO (Local Shared Object)
• To be continued…

• Adobe
• Flex Examples
• Alex’s Flex Closet
• Peter Ent
• switchonthecode

I’ve created a MatchDataGrid with the same kind of filtering like I have done for the MatchComboBox and I’ve also added some code for using links and some decorator stuff. All filtering for the DataGrid is done on the client side (browser or AIR), this is not about backend filtering or paging.

Demo

To get a real impression I used some real data. You don’t need the Filter - Checkbox to switch filtering off, but I’ve added it here to show its complete functionality. Also the layout and design of the controls could be done more nicely (e.g. using SearchBox), but hey, it’s just a demo!

You can get the source from here, but please be careful - the component was not heavily tested and so far not used in any application.

Demo data

The data for the demo grid was created from a file named BK05Q406.KE1 downloaded from a german website for health insurance matters. The content is not valid anymore, so please don’t use it for anything else! I’ve wrote a small Ruby script to transform the EDIFACT format into XML.

Source

If you look at the source you will see that all the code for the demo is written in two files Main.mxml and Grid.as and the code for the MatchDataGrid, MatchDataGridItemRenderer and MatchFilter is under the package folder de.sbistram.controls. Some code comment is probably missing (like always), but nevertheless most of the stuff is straight forward.

Open issues

• More or less the same like with the MatchComboBox - not tested in any serious application so far and missing unit tests. I’m sure there are some bugs, but maybe the code is a good starting point and someone can use it.
• The filter allows also filtering of one input text per column, so the GUI demo should be extended.
• I replaced the lightweight DataGridItemRenderer with the heavyweight Label renderer. So this is causing rendering performance problems for grids containing more than ca. 100 visible cells.
• HTML is used to mark the matched text and also used for the anchor links, but other HTML stuff is not supported and will not work! So keep it in mind.
• Would be nice if the link underlines are only visible when hovering over the link (or at least as an option).
• Maybe ‘Match’ wasn’t such a good name for the controls because it has nothing to do with matching regular expressions.

Flex 4

I hope that Flex 4 (codename Gumbo) offers more HTML support out of the box than Flex 3 - so let’s hope and wait for FxDataGrid.

• adobe.com
• websector.de
• hillelcoren.com
• defusion.org.uk
• flex888.com

Demo

Ok, a lot of cool stuff, especially the Autocomplete TextInput component, but not exactly what I was looking for. Anyway, I thought it’s a nice exercise to see how easy or difficult it is to customize a Flex Combobox (btw, in Swing it was not easy at all ) and this is my result so far:

You can get the source from here, but please be careful - the component was not heavily tested and so far not used in any application.

Open issues

• Actually it’s a non-editable combobox, but it still looks like an editable combobox. I’ve tried to fix this by switching from non-editable to editable and back on the fly via an approach more or less like this:

  override protected function focusInHandler(event:FocusEvent):void {
          editable = true;
          super.focusInHandler(event);
  }
   
  override protected function focusOutHandler(event:FocusEvent):void {
          editable = false;
          super.focusOutHandler(event);
  }

  But unfortunately it’s not that easy. I run into several problems and fixing one issue was causing another. Maybe it’s a better idea to change the skin dynamically, but I’m not sure if this is the way to go.

• Setting the prompt property is not working correctly.
• Start editing in the input field will open the dropdown list, but when you resize the window so the dropdown list will close the dropdown list will stay invisible (see bug issue)

Flex 4

I’m sure there are more open issues, but maybe the code is a good starting point - or should we rather wait for FxComboBox in Flex 4 - Gumbo (to be continued…).

Use the Flex3 Logging API in your Flex3 code, nothing else! No trace() and flashlog.txt mess and no proprietary third parties logging framework API’s.

Define a logger:

var log:ILogger = Log.getLogger("de.sbistram.logtest.Foo");

and use it:

if (Log.isDebug()) {
    log.debug("Foo debugging");
}

That’s it - mmh, almost…

The long story

Coming from a Java log4j and Ruby log4r background I was first looking for an Actionscript3 log4AS3, but it seems to be not an option. Anyway, there is a nice Flex3 Logging API just in place (the Java Logging API was introduced in JDK 1.4, too late).

To see the logging output you need a logging target which is normally a console. It can be the console of the Flex Builder IDE, a Firebug console or some kind of a standalone console. But the most important fact is that you can inject the logging output targets via the mx.logging.Log#addTarget method. What this means? Hang on…

Candidates

I’ve created a small sample project to explore and play around with a mixture of four different logging frameworks and targets:

• SOSLoggingTarget
  see blog of Sönke Rohde
• ThunderBoltTarget
  see blog of Jens Krause
• FileTarget
  
• TraceTarget
  

It is just my choice, you may want to check others like Alcon, but the design principles should be the same.

Sample project

Before you start with your own experiments take a look at the articles of the blogs mentioned above and download and install the frameworks. It may look like a complete mess to use four different logging targets in one project, but actually its fun. You need only two additional libraries and the SOSLoggingTarget.as file:

The Logging.mxml class initialize the logging via Config.initLogging() and create a test button. Each click on it will create a Foo class, which generates some logging output:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?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 de.sbistram.config.Config;
    import de.sbistram.logtest.Foo;
 
    private function init():void {
        Config.initLogging();
    }
 
    private function testLogging():void {
        new Foo(); // show some logging       
    }
 
    ]]></mx:Script>
 
    <mx:Button label="Test Logging" click="testLogging()"/>
 
</mx:Application>

The hole logger configuration is done in the Config class and all dependencies on the logging frameworks and logging targets are only used in this class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

package de.sbistram.config {
 
import mx.logging.ILogger;
import mx.logging.Log;
import mx.logging.LogEventLevel;
import mx.logging.targets.TraceTarget;
 
import com.adobe.air.logging.FileTarget;
import com.soenkerohde.logging.SOSLoggingTarget;
import org.osflash.thunderbolt.Logger;
import org.osflash.thunderbolt.ThunderBoltTarget;
 
import de.sbistram.logtest.Foo;
import de.sbistram.utils.LogUtils;
 
public class Config {
 
    // Log file URI, see source of com.adobe.air.logging.FileTarget
    private static const DEFAULT_LOG_PATH:String = "app-storage:/application.log";    
 
    // the log file path for air application
    public static var logFilePath:String = DEFAULT_LOG_PATH;
 
    // switch on/off different targets
    private static var SOS_TARGET:Boolean             = true;
    private static var THUNDERBOLT_TARGET:Boolean     = false;
    private static var FILE_TARGET:Boolean            = true;    // only AIR
    private static var TRACE_TARGET:Boolean           = false;
 
    /**
     * Configure logging
     */
    public static function initLogging():void {
 
        var logLevel:int = LogEventLevel.ALL;
 
        // filter for packages or classes
        var filters:Array = LogUtils.getFilter([
            Config,               // add this class
            [Foo],                // instead of: "de.sbistram.logtest.*"
            Array,                // any class is allowed
            logLevel,             // you can also use an instance
            "de.sbistram.foo.*",  // you can still use strings
            "Foo.*" 	          // to log all internal classes of Foo
            ]);
 
        // so the filter array for the above filters array would be:
        // [de.sbistram.config.Config,de.sbistram.logtest.*,Array,int,de.sbistram.foo.*]
 
        //
        // ThunderBoltTarget (ThunderBoltAS3_v1.0.zip)
        //
        if (THUNDERBOLT_TARGET) {
            var thunderBoltTarget:ThunderBoltTarget = new ThunderBoltTarget();
 
            // Bug?: Windows XP - automatic detection of FireFox 3.0.4 with Flash Player 10 was not working.
            // @see http://www.websector.de/blog/2008/06/15/10-tips-and-tricks-using-thunderbolt-as3/
            Logger.console = false;    // presume we're running Firefox / Firebug
            try {
                // next line will throw an exception without ExternalInterface, e.g. in standalone Flash Player:
                // Error: Error #2067: The ExternalInterface is not available in this container...
                Logger.error("");
            } catch (error:Error) {
                Logger.console = true;    // use the trace output
            }
 
            // Flex3.2: Setting the level is already adding the target to the logging.
            // see source code: mx.logging.AbstractTarget#level
            thunderBoltTarget.level = logLevel;            
 
            thunderBoltTarget.filters = filters;
            Log.addTarget(thunderBoltTarget);
        }
 
        //
        // SOS_TARGETLoggingTarget
        //        
        if (SOS_TARGET) {
            var sosTarget:SOSLoggingTarget = new SOSLoggingTarget();
            sosTarget.level = logLevel;    
            sosTarget.fieldSeparator = ":";
            sosTarget.includeCategory = true;
            sosTarget.includeLevel = true;
            //sosTarget.filters = LogUtils.getFilter([Array]);    // only Array logging for SOS_TARGET
            sosTarget.filters = filters;
 
            Log.addTarget(sosTarget);
        }
 
        //
        // FileTarget (only for AIR)
        // Part of http://code.google.com/p/as3corelib
        //
 
        // use conditional compilation for AIR code
        // @see http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_21.html
        // Otherwise (un)comment this AIR part
        //CONFIG::air {    // conditional compilation for AIR
        /*
            if (FILE_TARGET) {
                import flash.filesystem.File;
                var file:File = new File(DEFAULT_LOG_PATH);
                var fileTarget:FileTarget = new FileTarget(file);
                fileTarget.fieldSeparator = ":";
                fileTarget.filters = filters;
                fileTarget.includeCategory = true;
                fileTarget.includeLevel = true;
                fileTarget.includeTime = true;
                fileTarget.includeDate = true;
                Log.addTarget(fileTarget);
            }
        */
        //}    // end CONFIG::air
 
        //
        // TraceTarget (redirect logging output to trace())
        // Enable this target in Adobe Flex Builder to see logging output in the console
        // The application must run in debug mode!
        //
        if (TRACE_TARGET) {
            var traceTarget:TraceTarget = new TraceTarget();
            traceTarget.fieldSeparator = ":";
            traceTarget.filters = filters;
            traceTarget.includeCategory = true;
            traceTarget.includeLevel = true;
            traceTarget.includeTime = true;
            traceTarget.level = logLevel;
            Log.addTarget(traceTarget);
        }
 
        // start logging
        if (Log.isDebug()) {
            var log:ILogger = LogUtils.getLogger(Config);
            if (THUNDERBOLT_TARGET == true) {
                log.debug("Logging - ThunderBoltTarget initialized, filters: [{0}]", thunderBoltTarget.filters);
            }
            if (SOS_TARGET) {
                log.debug("Logging - SOS_TARGETLoggingTarget initialized, filters: [{0}]", sosTarget.filters);
            }
            //CONFIG::air {
            /*
                if (FILE_TARGET) {
                    log.debug("Logging - AIR FileTarget initialized, filters: [{0}]", fileTarget.filters);
                    // Note: Under Windows XP - the dir is hidden (use 'dir /A:H')! 
                    log.debug("Logging - AIR file path: " + file.nativePath);
                }
            */
            //} // end CONFIG:air
            if (TRACE_TARGET) {
                log.debug("Logging - TraceTarget initialized, filters: [{0}]", traceTarget.filters);
            }        
        }
    }        
}
}

Play around with the settings (switch targets on/off, set filters, …) and see where the logging output goes. I like to use the SOS console for WEB- and Adobe AIR development. SOS is using a simple socket connection to the SOS console and is really lightweight. Thunderbolt is great for working with Firefox and the Firebug console and it has also a Thunderbolt AIR console. The FileTarget writes the logging statements to a file and therefore can only be used for AIR. It is missing some features (like log4j’s DailyRollingFileAppender) and not ready for the enterprise, but a good starting point. The TraceTarget can be used in Flex Builder 3 to see some logging output in the console, but because it is using the trace() method you have to run your application in debug mode. You can also do any kind of combination of these logging targets - just try it out and see what is working for you and what you like.

The actual usage of the Logging API looks like e.g.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

package de.sbistram.logtest {
 
import mx.logging.ILogger;
import mx.logging.Log;
import de.sbistram.utils.LogUtils;
 
public class Foo {
 
    private var log:ILogger = LogUtils.getLogger(this);
 
    public function Foo() {
        testLogging();
    }
 
    private function testLogging():void {
 
        log.debug("Logging test for DEBUG");
        log.info("Logging test for INFO");
        log.warn("Logging test for WARN");
        log.error("Logging test for ERROR");
        log.fatal("Logging test for FATAL");
 
        var seasons:Array = ["spring", "summer", "autumn", "winter"];
 
        if (Log.isDebug()) {
            // Note: Using the 'seasons' category, not Foo
            LogUtils.getLogger(seasons).debug("seasons = {0}", seasons);
        }
 
        new InternalFoo();    // check also the logger output of an internal class
    }
 
}
}
 
//
// Test the logging of an internal class. Output will look like:
// 21:26:58.505:[DEBUG]:Foo.as.0.InternalFoo:InternalFoo logging
//
import mx.logging.ILogger;
import de.sbistram.utils.LogUtils;
 
class InternalFoo {
 
    private var log:ILogger = LogUtils.getLogger(this);
 
    public function InternalFoo() {
        log.debug("InternalFoo logging");
    }
}

The important fact here is that the code has no dependency on any third party logging stuff! It only uses the Flex3 Logging API and a helper method of the LogUtils class.

Best practice

It is a simple case of the DI design principle - Dependency Injection: The Flex3 Logging API allows you to create your own instance of a ILoggingTarget and inject it via the method mx.logging.Log.addTarget(target:ILoggingTarget).

So don’t use example code like this, e.g. Thunderbolt:

import org.osflash.thunderbolt.Logger;
 
var myNumber: int = 5;
var myString: String = "Lorem ipsum";
Logger.error ("Logging two objects: A number typed as int and a string", myNumber, myString);

and don’t use additional features of a Logging API, e.g. Thunderbolt:

Logger.info(Logger.memorySnapshot());
 
// stop logging
Logger.hide = true;
// resume logging
Logger.hide = false;
 
Logger.about();

Again your code depends on one special Logging Framework - bad design!
But as long as you stick to the Flex Logging API your code could be used across multiple projects without any changes. And the second issue - a logger should care about logging, not memory snapshots, that’s another important design principle: SoC - Separation of Concerns.

Ok, and the last design principle for this article: DRY - Don’t Repeat Yourself:

package de.sbistram.logtest {
 
import mx.logging.ILogger;
import mx.logging.Log;
 
public class Foo {
 
    private var log:ILogger = Log.getLogger("de.sbistram.logtest.Foo");

What’s wrong with the code? It’s a common naming convention to use the full qualified class name for the logger category. Ok, but the information (package + class) is already there - remember: Don’t Repeat Yourself (actually I did it right now ).
The Log.getLogger("de.sbistram.logtest.Foo") should be replaced by LogUtils.getLogger(this) and this is just a shortcut for Log.getLogger(getQualifiedClassName(this).replace("::", ".")). Another advantage of not using a String is code refactoring. If the package name or the class name is changing you don’t have to update any hardcoded String references. Btw, the same principle is used in defining a filter for a logger target in the LogUtils.getFilter method.

Here’s the code of the LogUtils class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

package de.sbistram.utils {
 
import flash.utils.*;
 
import mx.logging.ILogger;
import mx.logging.Log;
 
public class LogUtils {
 
    //--------------------------------------------
    // Flex API logging support
    //--------------------------------------------
 
    /**
     * Get an instance of an <code>ILogger</code>
     * Use the full qualified class name as the category
     * 
     * @param    value can be a class or an instance
     * @return    mx.logging.ILogger
     */
    public static function getLogger(value:*):ILogger {
        return Log.getLogger(getCategory(value));
    }
 
    /**
     * Using the full qualified class name as the category
     * name for the logger.
     * 
     * <p>
     * Unfortunately the method getQualifiedClassName is 
     * returning e.g. de.sbistram.Utils::LogUtils for this class, 
     * but Log.getLogger doesn't allow ':' chars in the category
     * name, so "::" will be replaced by "."
     *
     * Internal classes don't include the package, e.g.:
     * Foo.as$0::InternalFoo
     * </p>
     * 
     * @param    value of an instance object or class
     * @return    the full qualified class name without "::"
     * @see http://livedocs.adobe.com/flex/3/langref/mx/logging/Log.html#getLogger()
     */
    public static function getCategory(value:*):String {
        var qcn:String = getQualifiedClassName(value);
        qcn = qcn.replace("$", ".");    // maybe an internal class using '$'
        return qcn.replace("::", ".");  // public class in a package using '::'
    }
 
    /**
     * Convert an array of classes or instances to an array of valid 
     * category names. 
     * 
     * - [...] means to include the complete package of the class
     *  - String filter items left untouched
     *  - For internal classes of a public class Foo -> "Foo.*"
     * 
     * @param    values
     * @return    array of String categories
 
     */
    public static function getFilter(values:Array):Array {
        var categories:Array = [];
        for (var value:* in values) {
            value = values[value];
            // [] indicate to include all classes of a package
            if (value is Array) {
                var qcn:String = getQualifiedClassName(value[0]);
                value = qcn.slice(0, qcn.indexOf("::")).concat(".*");
            } 
            categories.push((value is String) ? value : getCategory(value));
        }
        return categories;
    }
}
}

Conclusion

So no matter what kind of application framework you’re using (Cairngorm, PureMVC, Swiz, Mate or whatever or none at all) and no matter whether you’re just hacking a few lines of code or building the next great enterprise RIA or AIR application - use the Flex Logging API.