Posts tagged flex

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

Feb 5th

Posted by Davide Zanotti in actionscript

No comments

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”

Aug 2nd

Posted by Davide Zanotti in flex

No comments

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!

Jun 3rd

Posted by Davide Zanotti in flex

No comments

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

  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)

, , ,

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

May 20th

Posted by Davide Zanotti in flex

1 comment

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>

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

Read the rest of this entry »

Deploy and work with Flex swc library

Apr 7th

Posted by Davide Zanotti in flex

No comments

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.

Read the rest of this entry »

, , ,

ArrayCollection: filterFuntion with multiple filter functions using decorator pattern

Mar 30th

Posted by Davide Zanotti in flex

13 comments

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>
, , ,

Set DataGridColumn’s width in percentage with ease

Mar 18th

Posted by Davide Zanotti in flex

10 comments

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

Feb 23rd

Posted by Davide Zanotti in flex

5 comments

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.

Read the rest of this entry »

, , , ,

Create custom reusable Flex’s components with Actionscript

Jan 28th

Posted by Davide Zanotti in actionscript

3 comments

I’ve played for a while with Flex’s library and now I’m experimenting my own custom components and I would like to share them and the knowledge necessary to build personal, reusable cool components.

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.

Read the rest of this entry »

, , , , , ,

Populate a Flex’s ArrayCollection… a consideration about addItem() performance

Jan 12th

Posted by Davide Zanotti in flex

4 comments

I’m playing with Flex data Providers and actually I’m testing ArrayCollection. There are 3 ways to populate an Array collection:

  1. Initialize an ArrayCollection and then use its addItem() method (which accepts any Object type)
  2. Initialize an ArrayCollection, access its “embedded” Array by using the source property (ie: myArrayCollection.source) an then push objects inside this one
  3. Initialize an Array, populate it and then initialize an ArrayCollection by passing the Array to its constructor (ie: myArrayCollection:ArrayCollection = new ArrayCollection(myPreviousDefinedArray))

Last technique is (as far I saw) absolutely the fastest , I did a test in which I populated a collection with 300,000 objects and it taken about 9 seconds instead of 32 (350% slower) of first one! The second technique is also faster than the first, but the third is better.

So, what I learned is that addItem() should used only to add few items, instead for huge collection should be avoided in favor of the third technique described in order to obtain better performances.

, ,
« Older Entries