DaveOnCode » flex

Handling doubleclick on Flex components

Davide Zanotti — Wed, 07 Apr 2010 10:34:53 +0000

Handling a common event like a double click is not so simple as we may assume when it comes to Flex programming.
In fact there are several critical aspects related to this event, first of all we have to set the attribute doubleClickEnabled to true in order to make our components double clickable, and this sounds pretty silly to me. Why should I enable an object to receive an event which is so common and “natural”? This is incoherent from a software design perspective end totally unexpected by the user. Anyway this is not a real problem, because once we know about it we have just to use a setter, but double click is somehow buggy in the framework and its broadcasting can be blocked mysteriously when using certain components. I faced this issue by trying to handle a double click on a DataGrid which makes use of custom item renderers and I tested that by double clicking on the “special cells” (those rendered by my own renderers) the MouseEvent.DOUBLE_CLICK is not dispatched/cacthed. To solve the problem I had to draw an invisible rectangle using the underlying Actionscript graphics API! This is my workaround:

1
2
3

this.graphics.beginFill(0xffffff, 0);
this.graphics.drawRect(0, 0, this.parent.width, this.parent.height);
this.graphics.endFill();

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)

I released my first interesting Flex component :)

Davide Zanotti — Fri, 07 Aug 2009 12:52:23 +0000

Today, I released my component “ImageNavigator”, you can see it here and download source code. I’m pretty satisfied about it, but it needs some little improvements and I’ve got some ideas to extend its features… so don’t consider it as the final version :P

Resolve Flex’s error: “Type was not found or was not a compile-time constant”

Davide Zanotti — Sun, 02 Aug 2009 10:23:09 +0000

I just faced the terrible nightmare of “Type was not found or was not a compile-time constant” error (Flex Builder) and I lost several time to figure out what the problem was.
I realized that I was using the same name for MXML Application file which was already used by a class inside one of my packages. So, by renaming the file I solved the problem, but I was not completely satisfied and I looked for a way to avoid the error mantaining the same file/class name. Initially I tried to use namespaces, but as the reference says: “Applying a namespace means placing a definition into a namespace. Definitions that can be placed into namespaces include functions, variables, and constants (you cannot place a class into a custom namespace)”. I finally solved by renaming class references inside my package with the full qualified name (from MyClass to com.mysite.foo.MyClass)

Flex 4 (Gumbo) beta released!

Davide Zanotti — Wed, 03 Jun 2009 15:30:49 +0000

Flex 4 beta (codename: Gumbo) has been released, I just finished to read about the new major release. These are the main news:

Improved compiler performance
New skinning and component architecture (named Spark)
Added suppurt to FXG (learn more about FXG)
New states model
ASDoc tool has been improved and is now possible to use ASDoc tags in mxml documents
CSS has been improved to support descendant and id selectors (finally the previous missing “cascading part” of CSS has been provided!)
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)

Preparing for Adobe Flex 3 + AIR certification

Davide Zanotti — Mon, 25 May 2009 07:58:29 +0000

I’m preparing for the Adobe Flex 3 + AIR certification and I would like to share two AIR applications which I’m using to study an test my Flex knowledge.
The first is pretty famous, so maybe you already know it: Tour The Flex.
It provides hundreds examples of all components available in the framework and includes Adobe reference.
The second is a real helpful app (which I discovered through Twitter), because it consist in an exam simulator (flex 3 + air). Is possible to choose between 8 different test, once a test begins a timer will show you the remaining time and at the end of test the reached score will be showed. Wrongs questions will be explained and you’ll be pointed to Adobe reference for clarifications.
The (free!) application is available here: http://software.pxldesigns.com/attest

ObjectCollector: Accessing Flex’s objects by id (even dynamic generated) from anywhere

Davide Zanotti — Wed, 20 May 2009 14:34:40 +0000

Ok, let me explain my last experiment…

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:

1
2
3
4
5
6

version="1.0" encoding="utf-8"?>
xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

id="input1" width="300" />

>

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

1	input1.text = "text dynamically added :)";

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

The simplest example I can do is the following:

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

version="1.0" encoding="utf-8"?>
xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

>

private function test():void {

var input:TextInput = new TextInput();
input.id = "input2";

this.addChild(input);

// Here I get an error which says input2 is undefined!
input2.text = "foo";

}

]]>
>

>

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:

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

// From anywhere you first create and register objects:

var collector:ObjectCollector = ObjectCollector.getInstance();
var myObj1:Button = new Button();

myObj1.width = 300;
myObj1.label = "my first button";
// id is mandatory, otherwise you'll get an error
myObj1.id = "myFirstButton";

var myObj2:TextInput = new TextInput();
myObj2.text = "hello world";
// id is mandatory, otherwise you'll get an error
myObj2.id = "myTextField";

collector.registerObject(myObj1);
collector.registerObject(myObj2);

/* ...then in another (or the same) place you can
get references to your desired objects
(this time by specifying the id)
When you retrieve objects from the collector you should
always cast (upcast!) them to the right type
(Because objects are collected as generic Object classes)
*/

var btn:Button = Button(ObjectCollector.getInstance().getObject("myFirstButton"));

// When/if you don't need these reference anymore
// you can remove them by id:

ObjectCollector.getInstance().unregisterObject("myFirstButton");

// or all together:

ObjectCollector.getInstance().unregisterAll();

Download

You can download the class here

Documentation

A brief documentation is available here

Deploy and work with Flex swc library

Davide Zanotti — Tue, 07 Apr 2009 13:49:01 +0000

When we need to use a series of Actionscript classes in several projects and centralize them into a single place, the best option available is to deploy our classes as an SWC library and then add it to the “library path” under Flex Builder’s “build path” panel.

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).

ArrayCollection: filterFuntion with multiple filter functions using decorator pattern

Davide Zanotti — Mon, 30 Mar 2009 10:21:11 +0000

I was looking for an elegant solution to implement multiple filter functions on an ArrayCollection (which provides a method filterFunction() that can be assigned dynamically in order to filter data inside the collection). The first and only valid solution I found was that one from Cristian Rotundu, he has extended ArrayCollection class providing a filterFunctions properties which accepts an Array of functions which will be executed in sequence (into a loop) once filterFunction is triggered. Anyway I didn’t want to subclass ArrayCollection and by using the decorator pattern I implemented my own multiple filters version.

So, this is what I done:

I defined an interface IFilter, which declares only one method: apply()
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”)
I defined an abstract AbstractFilterDecorator class
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:

1
2
3
4
5
6
7
8
9

var data:ArrayCollection = ArrayCollection(grid.dataProvider);
var filter:IFilter = new Filter();

filter = new LevelFilter(filter, levelValue);
filter = new CategoryFilter(filter, categoryValue);
filter = new DateFilter(filter, dateValue, "DD/MM/YY");

data.filterFunction = filter.apply;
data.refresh();

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:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>
[CDATA[

import mx.collections.ArrayCollection;
import com.daveoncode.filters.*;

private function applyFilters():void {

var data:ArrayCollection = ArrayCollection(userGrid.dataProvider);
var filter:IFilter = new Filter();

filter = new AgeFilter(filter, ageFilterValue.text);
filter = new DateFilter(filter, dateFilterValue.selectedDate);
filter = new SexFilter(filter, sexFilterValue.value);

data.filterFunction = filter.apply;
data.refresh();

}

]]>
mx:Script>

<mx:Panel title="Filters" width="600">
<mx:Form>
<mx:FormItem label="Age:">
<mx:TextInput id="ageFilterValue" width="30" />
mx:FormItem>
<mx:FormItem label="Sex:">
<mx:ComboBox id="sexFilterValue" dataProvider="{[{data: Filter.ALL_VALUES, label: 'ALL'}, {data: 'm', label: 'Male'}, {data: 'f', label: 'Female'}]}" />
mx:FormItem>
<mx:FormItem label="Join date:">
<mx:DateField id="dateFilterValue" formatString="DD/MM/YY" />
mx:FormItem>
<mx:FormItem>
<mx:Button label="Apply filters" click="{this.applyFilters()}" />
mx:FormItem>
mx:Form>
mx:Panel>

<mx:Panel title="Users" width="600">
<mx:DataGrid id="userGrid" width="100%">
<mx:dataProvider>
<mx:ArrayCollection>
<mx:Array>
<mx:Object age="24" sex="f" name="Susan" joinDate="{new Date(2007, 5, 15)}" />
<mx:Object age="36" sex="f" name="Ashley" joinDate="{new Date(1998, 7, 20)}" />
<mx:Object age="24" sex="f" name="Jennifer" joinDate="{new Date(2001, 3, 24)}" />
<mx:Object age="19" sex="f" name="Emma" joinDate="{new Date(2002, 3, 24)}" />
<mx:Object age="44" sex="f" name="Carol" joinDate="{new Date(1999, 9, 16)}" />
<mx:Object age="28" sex="m" name="Peter" joinDate="{new Date(2005, 3, 12)}" />
<mx:Object age="35" sex="m" name="Mike" joinDate="{new Date(2008, 10, 10)}" />
<mx:Object age="26" sex="m" name="Dave" joinDate="{new Date(2008, 10, 10)}" />
<mx:Object age="44" sex="m" name="William" joinDate="{new Date(2004, 9, 16)}" />
<mx:Object age="24" sex="m" name="Sean" joinDate="{new Date(2006, 3, 24)}" />
mx:Array>
mx:ArrayCollection>
mx:dataProvider>
mx:DataGrid>
mx:Panel>

mx:Application>

Set DataGridColumn’s width in percentage with ease

Davide Zanotti — Wed, 18 Mar 2009 22:40:06 +0000

I was trying to set the columns of a DataGrid to a certain percentage, but I discovered that inexplicably DataGridColumn doesn’t provide percentageWidth property nor it accepts a percentage string as width property… so I did a quick search on google and I found that is sad but true and moreover the solution I found on the web is to use a function to calculate each single column width after creationComplete event is dispatched… terrible! However I did a test before, by assign a decimal value to width (0.5 instead of 50%) and it works! The width property in fact accepts a Number as value not an int, so we can specify a value under 1, which is treated as a percentage… what surprise me, is that no one seems to had this idea… anyway I hope this will be helpful for all.

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

1 2	col = new DataGridColumn(); col.width = options[i] == "Message" ? 0.6 : 0.1;

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

Extending Flex’s logging framework to write custom log files

Davide Zanotti — Mon, 23 Feb 2009 18:19:06 +0000

In these days I played with Flex’s logging framework and I extended it to write log messages to files, both plain text .log files and dynamic HTML, CSS formatted and Javascript powered files with the ability to filter message type (debug, error, fatal and so on).

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:

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

package com.daveoncode {

import mx.logging.*;

public class Foo {

private var _logger:ILogger;

public function Foo() {

this._logger = Log.getLogger("com.daveoncode.Foo");
this._logger.debug("debugging message from Foo class");
this._logger.warn("warning message from Foo class");

}

}
}

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):

1
2
3
4
5
6
7
8
9
10
11
12
13

var basicTarget:TraceTarget = new TraceTarget();

// Apply filters
basicTarget.filters = ["com.daveoncode.*"];

// Log all log levels.
basicTarget.level = LogEventLevel.ALL;

// Add date, time, category, and log level to the output
basicTarget.includeDate = true;
basicTarget.includeTime = true;
basicTarget.includeCategory = true;
basicTarget.includeLevel = true;

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:

1	Log.addTarget(basicTarget);

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:

LogFileTarget
IStreamDataWriter
AbstractDataWriter
PlainTextDataWriter
HTMLDataWriter
InvalidLogFileTargetError
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:

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

// this will print to an html file
var HTMLTarget:LogFileTarget = new LogFileTarget("applicationLog", File.desktopDirectory, LogFileTarget.MODE_HTML);

// this will print to a txt file
var txtTarget:LogFileTarget = new LogFileTarget("applicationLog", File.desktopDirectory, LogFileTarget.MODE_PLAIN_TEXT);

HTMLTarget.filters = ["*"];

// Log all log levels.
HTMLTarget.level = LogEventLevel.ALL;

// Add date, time, category, and log level to the output.
HTMLTarget.includeDate = true;
HTMLTarget.includeTime = true;
HTMLTarget.includeCategory = true;
HTMLTarget.includeLevel = true;

txtTarget.filters = ["*"];

// Log all log levels.
txtTarget.level = LogEventLevel.ALL;

// Add date, time, category, and log level to the output.
txtTarget.includeDate = true;
txtTarget.includeTime = true;
txtTarget.includeCategory = true;
txtTarget.includeLevel = true;

// Add targets
Log.addTarget(HTMLTarget);
Log.addTarget(txtTarget);

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)