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)

Get hours, minutes and seconds from a number without maths operations

Davide Zanotti — Fri, 05 Feb 2010 15:09:11 +0000

Today I’m gonna show you a secret ninja technique to extract hours, minutes and seconds from a number (representing an amount of seconds). In my example I will show an Actionscript code, but this can be implemented in JavaScript and maybe other languages too.
So, the scenario is the following: we have a number representing seconds and we want to know how many hours this amount of seconds contains, how many minutes and how many remaining seconds. We know that a minute is composed by 60 seconds and an hour by 60 minutes and we could write a series of maths operations in order to accomplish our objective, but there is a way far simple and fast: use the Date class!
Date class already implements all the methods we need:

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:

1	var date:Date = new Date(null, null, null, 0, 0, 9137);

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

1
2
3

trace("hours: ", date.getHours()); // 2 hours
trace("minutes: ", date.getMinutes()); // 32 minutes
trace("seconds: ", date.getSeconds()); // 17 seconds

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

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)

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