coder and technology lover
flex
I released my first interesting Flex component :)
Aug 7th
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”
Aug 2nd
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
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
May 25th
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
May 20th
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)?
Deploy and work with Flex swc library
Apr 7th
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.
ArrayCollection: filterFuntion with multiple filter functions using decorator pattern
Mar 30th
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
Mar 18th
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
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.
Create custom reusable Flex’s components with Actionscript
Jan 28th
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.
Recent comments