DaveOnCode » actionscript

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

AIR applications logging… my own extension to Flex’s logging framework

Davide Zanotti — Mon, 11 May 2009 09:16:17 +0000

Finally it’s time to release my little project and my first personal and public Actionscript library.
What I’m talking about? I realized a little “subframework” which goal is to extend Flex’s logging framework, in order to write log messages to files on the disk and provide a custom Flex’s UI component (which can be easy used into every AIR application) to read/filtering these log files.

Learn more here: http://www.daveoncode.com/air-logging-framework

Just a note: although I tested the library (windows and mac) and it works fine, this project may contains bugs or doesn’t work under some circumstances. Comments and feedback are welcome!

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>