Finally, it seems that double click is completely ignored by Firefox 3.6 on Mac OS X, but fortunately this seems to been fixed in the last release (3.6.3)

• getHours()
• getMinutes()
• getSeconds()

So, in order to take advantage of these useful methods, all we have to do is initialize a “fake” date using the amount of seconds we want to “split” into hours, minutes and seconds. The Date class has several OPTIONAL arguments that can be specified during its initializations, these are:

• year
• month
• date (day number)
• hours
• minutes
• seconds
• milliseconds

Because theme all are optional, we can create a date object by specifying only the know arguments (in our case seconds) and by assigning null or zero to the others:

Then by calling getHours, getMinutes and getSeconds we will obtain what we expect:

Not sure about the result? Let’s test it:

60 * 60 * 2 = 7200; (seconds contained in 2 hours)
32 * 60 = 1920; (seconds contained in 32 minutes)
7200 + 1920 + 17 = 9137; (original seconds!)

1. Improved compiler performance
2. New skinning and component architecture (named Spark)
3. Added suppurt to FXG (learn more about FXG)
4. New states model
5. ASDoc tool has been improved and is now possible to use ASDoc tags in mxml documents
6. CSS has been improved to support descendant and id selectors (finally the previous missing “cascading part” of CSS has been provided!)
7. Backwards compatibility with Flex 3

The new sdk is available on Adobe Labs

More about Gumbo here:

An Introduction to the Gumbo Component Architecture (by Deepa Subramaniam)
What’s new in Flex 4 SDK beta (by Matt Chotin)
Differences between Flex 3 and Flex 4 (by Joan Lafferty)

Problem

Flex’s components have a nice id property which can be used to easily referencing object created.
All you know, that if I get the following mxml Application file:

I can then create a Script block into which I’ll point to TextInput in this way:

Perfect, but how can I reference dynamically created objects (components outside Application)?

The simplest example I can do is the following:

Solution

Define a place where to store references to desired objects, which will be accessible through id from anywhere.
So, I created a singleton class called ObjectCollector which provides a simple, elegant and secure solution to the problem. You can use it in this way:

Download

You can download the class here

Documentation

A brief documentation is available here

Deploy an swc file

To obtain an SWC file, we have first to create a library project by selecting “New > Flex Library Project” from Flex builder’s menu.
The file will be automatically generated under the bin folder as soon a new class is created and/or modified (under src folder) and it will have the same name of the project. Is also possible to copy .as files from a folder and paste them into src folder, but in this case the SWC file won’t be (re)deployed until we select the new added classes under “Flex Library Build Path“.
There are two other cases for which Flex Builder won’t (re)deploy the SWC file and is important to keep these in mind, because no errors nor notification messages will be showed by the ide and this could lead to a waste of time trying to figure out what is going on.
The two big things to remember are:

1. Be sure to check “Include Adobe AIR libraries” under “Flex library compiler” settings (this can be defined during library creation step or after) when the library make use of AIR api
2. Be sure that package path, declared into imported classes, match the structure of src folder (if we import a class “MyClass” with a package declaration like “com.mysite.ui” then src folder must contain “com/mysite/ui” and “MyClass” must be placed there, if we put it under the src root it won’t be compiled into SWC)

Import the swc file into a project

Once we get our library project and our compiled swc, we can import it into others Flex projects by going to “Flex build path > Library path” and selecting “Add project“. There are two ways of using the imported library and to determine the type of linkage to it: a static link (by choosing the default option “Merge into code“) or dynamic link (by choosing the default option “Runtime shared library (RSL)“). The difference between the two types of linkage are that, in the first all library content are compiled into the final project’s swf file, so once you import and merge the library, its swc file is not necessary anymore and you can distribute your application without the external library (it’s already embedded into the app), by using an RSL instead the library is loaded at runtime and the application swf doesn’t keep it’s data, but only a reference to its location, so the resulting file is smaller than the previous one, but you must be sure to release the Flex application in conjunction with the external library in order to works, otherwise Flex Builder will show an error saying “unable to open path/yourlib.swc” (where “path” is the path to the library you previously imported).

So, this is what I done:

1. I defined an interface IFilter, which declares only one method: apply()
2. I defined a dummy Filter class (which implements IFilter in a basic way just to agree to the interface), that is used as a basic empty filter to decorate. It also has a constant called ALL_VALUES which is used as a wildcard for filters (it’s a simple string with value “*”, which means “all values are allowed”)
3. I defined an abstract AbstractFilterDecorator class
4. I created as many subclass of AbstractFilterDecorator as the filters I need (yes I treat filters as classes not mere functions)

The implementation code is the following:

The filter object is wrapped by decorators which all accepts 2 common arguments: an IFilter reference and an Object representing a value. The DateFilter has a third parameter which is used to configure an internal DateFormatter (from mx.formatters package).
I’m pretty satisfied :)
Uh… and if you are worried about performance, it is fast enough because filter object are created once and then the function assigned to filterFunction is a reference to the resulting decorated filter.

UPDATE:
I realized a very simple example application which can be downloaded here.
This following is the content of the mxml file:

This is a piece of my AS code to set DataGridColumn width in percentage:

In my code I’m setting the columns to 10% and to 60% only for “Message” column.

The logging framework is a powerful feature that comes with Flex’s sdk and it’s composed by the classes under mx.logging package, which includes the two “subpackages” mx.logging.errors and mx.logging.target.

Java developers should be already confident whit such framework, because logging api are commonly used in Java programming,  Actionscript /Flash/Flex developers may find this tool a novelty (as I did).

The objective of logging framework is to provide a tool that offers a far better, flexible and centralized way to debug an application than simple use a lot of trace() callings. With Flex’s debugging framework we are able to print and filtering among different types of message based on their severity, such:

• DEBUG
• ERROR
• FATAL
• INFO
• WARN

We can also print the timestamp of the message and the class it refers to, and finally we can simultaneously print messages to different targets.

How it works

The logging framework is basically represented by 3 units: a logger, a target and a log event. The first component is the main class of the framework and its job is to register the different “loggable classes”, register one or more targets and dispatch log events. A target is a class which receives a LogEvent event and handles it by printing its information (message, date, level…) somewhere. A LogEvent event is dispatched when one of the logger methods such: debug(), error(), fatal(), info(), log() or warn() is called.

The steps required to use the logging system are the following:

1. Registering the classes for logging:

The code above will register the class Foo under the package com.daveoncode and then it will broadcast a debug and a warning message

2. Initialize and configure a logging target such TraceTarget (typically in the main class):

The code above will print log messages of all “subscribed” classes inside the package com.daveoncode, including all information available (date, time, category, level)

3. Add the target to the logger:

The previous steps can be repeated as many times as we need, in order to registering several classes and several targets (perhaps with different filters and info settings).

How to extend the framework

To extend the framework we can create new target classes, which print LogEvent data to different location and display data as we like. In my experiment I created a “mini subframework” which can print logs to text files or html files. I created the following 7 classes:

1. LogFileTarget
2. IStreamDataWriter
3. AbstractDataWriter
4. PlainTextDataWriter
5. HTMLDataWriter
6. InvalidLogFileTargetError
7. UnsupportedWriteModeError

The first, as the name suggest is a custom target class, which extends LineFormattedTarget (a target class available in Flex’s framework), it has a parametric constructor which allows the user to choose the name of the file, its directory, the type of file (txt or html) and the charset that will be used to write the file. IStreamDataWriter is an interface which simply declares one method called writeData(), the main purpose of this interface is to use it in polymorphism. IStreamDataWriter is implemented by AbstractDataWriter as an abstract method (abstract is not supported yet in as3, but is treated as abstract), this class also has a secondary method which is used by two subclasses PlainTextDataWriter and HTMLDataWriter. These classes have the duty to physically write data to the file by handling the event received by LogFileTarget which delegates the business logic to them and are used based on the writeMode configuration of  LogFileTarget, which for ease has two public constants called MODE_PLAIN_TEXT and MODE_HTML. InvalidLogFileTargetError and UnsupportedWriteModeError are obviously two custom error which are both (potentially) thrown by LogFileTarget.

This is a sample code using my own classes:

Of course this experiment will works only in AIR applications, because we need to use flash.fileystem classes.

These are the two different output that my classes will generate:
Text file
HTML file

The cool aspect of html version (LogFileTarget.MODE_HTML) is that you can filter by log type :)

If you want to use or take a look to my experiment, feel free to download my logging package here (let me know your opinion)

Fundamentally there are two ways to realize custom Flex’s components: one (and the easiest) is to create an MXML file, the second is to create an Actionscript class.

MXML component

The MXML file will contains a components like a Canvas (which is an excellent class to start to build on) as the root node, instead of the classic Application and it will be filled by others several small components already available in Flex (Label, TextField, Button…), realizing a new complex object which can will be used inside MXML Applications by simply writing a tag with the same name of the MXML file. Another step required is to create an XML name space for the custom component created, this can be accomplished simply by insert an xmlns attribute inside the Application node, similarly to the default mx name space from adobe (xmlns:mx=”http://www.adobe.com/2006/mxml“), it must report a name after the colons and a path to the package containing the component. This is an example of a name space declaration for my own custom tag:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:dz="com.daveoncode.controls.*" layout="vertical">

It creates a name space called “dz” for all the classes (the “*” wildcard means “all”) inside the package “com/daveoncode/controls”. This is instead how a simple MXML based component could be (this is only a basic example, a such component is pretty useless):

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="Login" width="400" height="300">
    <mx:Form>

        <mx:FormItem label="UserName:">
            <mx:TextInput width="200" />
        </mx:FormItem>

        <mx:FormItem label="Password:">
            <mx:TextInput width="200" displayAsPassword="true" />
        </mx:FormItem>

        <mx:FormItem>
            <mx:Button label="Login" />
        </mx:FormItem>

    </mx:Form>
</mx:Panel>

Now, supposing that we save the example above as LoginPanel.mxml, under “com/oursite/components”, we can use it in a mxml Application in this way:

<mx:Application xmlns:cc="com.oursite.components.*" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <cc:LoginPanel />
...

This is pretty cool, because lets us separate defined areas of a GUI (like a login panel) and reuse them everywhere with no efforts… although this is an useful thing, is not so much exciting as creating a real custom component (something that is not made of other existent Flex components), whit its own properties, methods and style support!
To create such object, we should write it entirely in Actionscript.

Actionscript component

We can start from extending an existent Flex class, in order to inherit all the necessary methods to interact properly with the framework. The most important thing to know, is how to handle our class configuration, in fact in Flex we can’t put configuration logic inside constructor, because it will be automatically called by Flex every time a tag with the components name is encountered and there is no way to pass arguments to the constructor from the MXML tag, so such approach:

public function MyCustomComponent(param1:String, param2:Number) {

    this.param1 = param1;
    this.param2 = param2;

}

cant’ be used! We have instead to write getter and setter which will be automatically called by Flex when required. This kind of getter/setter must use Actionscript’s get and set keywords, in order to get/set a property. So, we have to forget classic getter/setter methods like:

public function setMyParam(value:String):void {
    myParam = value;
}

public function getMyParam():String {
    return myParam;
}

and adopt these:

public function set myParam(value:String):void {
    myParam = value;
}

public function get myParam():String {
    return myParam;
}

The get/set key is a really cool feature of Actionscript language, because it lets to set an object property in a declarative manner (myObject.property = X), without renunce to encapsulation. In this way when in MXML file we will declare tag’s attributes:

<cc:MyCustomComponent myParam="Hello!" /> 

Those setters will be used… but when exactly? Good question, another thing to understand, in order to realize custom and good components, is in fact the creational procedure adopted by the framework, which is divisible in these steps (in execution order):

1. Construction: in this step the component is instantiated and code inside the constructor is executed (typically the code will consist of a calling to super() and optionally event listeners configuration and few more)
2. Configuration: getters methods are invoked by Flex to configure class’ instance
3. Attachment: this step occours only when the component is added to the display list. This is an automatic task if the component is called from an MXML (with the relative tag) and occours through Actionscript when addChild() or addChildAt() are invoked
4. Initialization: this is the most intense phase, because during initialization a lot of tasks are performed and several methods invoked. The first thing that happens is the dispatching of preinitialize event (FlexEvent.PREINITIALIZE), then the protected method createChildren() is called (we have to override this method in order to populate our custom components with desired content), after its execution another event is dispatched, this time is the initialize (FlexEvent.INITIALIZE). After these, a series of invalidations and validations operations occours and finally creationcomplete is dispatched (FlexEvent.CREATION_COMPLETE)

I realized a custom component called StarPicker, it is a control which can be used to rate objects (songs,  movies, books…) by selecting (with a click) among N stars (N is one of the several parameters that can be configurated by the user, such color, size, space between stars and so on),  it is bindable (we can bind another control to StarPicker’s value) and finally it support CSS styles… yes, with Flex we can create extreme custom components that will support custom user-defined properties (such “power”, “coolness”…). Although I’m quite embarrassed (because I’m not already so confident with Flex), I’m going to show you how I realized my first Flex component.

My first step was create an Actionscript class (under my package “com.daveoncode.controls”) which extends Canvas, then I defined several public constants for default settings, by using the Flex naming convenction “DEFAULT_MY_SETTING_NAME”, several private variable to handle settings values and as many private variables to track settings changes. So, before the constructor I’ve such stuff (every prameter has 3 types of variables/constants related to it):

public static const DEFAULT_STARS:uint = 5;
// ...more constants

private var _stars:uint;
// ...more vars

private var starsDefined:Boolean;
// ...more booleans

The constructor contains a call to super and some listeners creation (and I enable the doubleclick over the component):

public function StarPicker() {

    super();

    // This component allows double click in order to deselect stars
    this.doubleClickEnabled = true;

    // Listens for preinitialize event
    this.addEventListener(FlexEvent.PREINITIALIZE, this.preInitializeHandler);

    // Listens for the click event over the stars
    this.addEventListener(MouseEvent.CLICK, this.clickHandler);

    // Listens for the double click event over the stars
    this.addEventListener(MouseEvent.DOUBLE_CLICK, this.doubleClickHandler);

}

The only thing I want to analize in the code above is the listener for FlexEvent.PREINITIALIZE… why I used this listener? The answer is: I use it to set default values if they are not provided by the user (with user I mean who use the component in the MXML file, not the Application’s user), because I want to handle default settings only after all the setters are called by Flex in order to set properly the boolean flags “myparamDefined”, which I use to grant the right precedence between style and inline tag’s attribute. If a flag is setted (myparamDefined == true) then when CSS assign a value to the same parameter this is not used, because inline attribute have the precedence and win. So the handler has several ternary operators like:

this._stars = this._stars == 0 ? StarPicker.DEFAULT_STARS : this._stars;

In order to populate the picker with stars I override  createChildren() method, into which I use addChild() to insert N Star object (which is a Class in the same package, which basically draws a star shape and has methods to change colors and size), I also override  measure() method which is used by Flex to know the exact size of the components (typycally when it must calculates clipping and resizing):

override protected function measure():void {

    super.measure();

    // StarPicker's height will be the same as the stars
    this.measuredHeight = this.measuredMinHeight = this._starSize + this._starBorderSize;

    // StarPicker's width will be the same as the sum of the stars width + space
    this.measuredWidth = this.measuredMinWidth = (this._starSize + this._starSpace) * this._stars;

}

In practice I’m telling Flex that my component should be never clipped and is larger as the sum of the stars width it contains. Oh… I also override the styleChanged() method, which is called by Flex every time a component’s style parameter changes:

override public function styleChanged(styleProp:String):void {

    super.styleChanged(styleProp);

    this._stars = this.stars;
    // ... other (re)settings

}

And style metatags? Yes, I putted them before class declaration:

[Style(name="stars", type="uint", inherit="no")]
// ... more styles

With style metatag we can declare the name of styles properties that our components will suport, so with the previous declaration will be possible to create CSS like:

.myCustomComponent {
    stars: 4;
}

Ok, I wrote too much, this is an example of the custom component that I realized (you can download, use and view source code by selecting “Flex components” on blog’s menu):

The example above is not a screenshot… you can test it ;-)