May 20 2009

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

Category: flex — Davide Zanotti @ 7:34 am

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
< ?xml version="1.0" encoding="utf-8"?>
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

    <mx:textinput id="input1" width="300" />

</mx:application>

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

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

Tags:

Apr 07 2009

Deploy and work with Flex swc library

Category: flex — Davide Zanotti @ 6:49 am

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.

Continue reading “Deploy and work with Flex swc library”

Tags: , , ,

Mar 30 2009

ArrayCollection: filterFuntion with multiple filter functions using decorator pattern

Category: flex — Davide Zanotti @ 3:21 am

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:

  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:

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>

Tags: , , ,

Mar 18 2009

Set DataGridColumn’s width in percentage with ease

Category: flex — Davide Zanotti @ 3:40 pm

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.

Tags: ,

Feb 23 2009

Extending Flex’s logging framework to write custom log files

Category: flex — Davide Zanotti @ 11:19 am

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.

Continue reading “Extending Flex’s logging framework to write custom log files”

Tags: , , , ,

« Previous Page — Next Page »