piątek, 31 lipca 2009

custom Flex component Basics

When you explore all the components and there wont be anything left. You know how to design layout of your application using some HBox, VBox, or Canvas. Sometimes you want to make something new.

Maybe a new sandwich cause you are hungry while waiting for pizza.

But sometimes you really want to make some brand new component to stay between those written by Adobe guys.

If you came here and still want to do this keep reading and you maybe do some.

So where to start ?

Well there are 2 ways:

The hard one:

First you need to know that Flex framework is not the bunch of MXML components but it's build on top of flashplayer purely in Actionscript 3. Yes all the flex components are build in Actionscript and if you know some Object Oriented Programming you are now definitely not reading this post but start exploring.

Well you can. But there is not only the advanced part that you must extend and build everything on top of some class keeping everything strict to framework rules extending / updating etc.

And the simple one:

You can make new components directly in MXML just using something called itemRenderer

Item Renderer cannot be changed on every components. Why you want to change it on buttons ? :>

It can be changed on every component that consist more then one data object. Simply that have dataProvider attribute. Well that's combobox, list or datagrid.

Let's make a simple list displaying application:


Well it only displays a list of 3 strings something like that
Not much you can say but let's make some custom component to display my list named ListItem.mxml
Base it on

override public function set data(value:Object):void {
super.data = value;
test.text = (data as String).charAt();

The magic here is with override the function to set data I added onle line to set some data for my . The data I get to my ListItem is the current position from dataProvider passed to our custom component so the data will be: One, Two, Three. Everything else so generating multiple ListItem components as more the data you have is done automatic in my Flex List component I only care of the look of my itemRenderer
Well... I hope you get it.
To prove I also added some simple rollOver / rollOut actions to my label that will display full name of the data when you roll over on that Label (notice that your events are in that LabelItem not in the main application)
The LabelItem looks now like this:

override public function set data(value:Object):void {
super.data = value;
test.text = (data as String).charAt();

private function rollOverHandler():void {
test.text = data as String;

private function rollOutHandler():void {
test.text = (data as String).charAt();

The second magic is add to my list the class to the itemRenderer parameter.
Simply itemRenderer="the.place.where.my.component.is.MyComponent".
Well my component is in the same path that my application so I simply put the string with my component name:


And that's it now when you build your project you get your unique List component.
You can pass whatever you want to your dataprovider class and then receive only one item for your itemRenderer.
Ex. you get multiple VOs that have image urls and labels (let's name it ImageVO) and you want to display it in your flex application. All you need is List
the sample itemRenderer will look similar to above but we will add Image component that will autoLoad our images and display it as 40x40px
so the code will look like this

override public function set data(value:Object):void {
super.data = value;
test.text =(data as ImageVO).title
img.source = (data as ImageVO).url;



Easy enough ? Well that's basic.
Next time I try to show you how to display bigger image when you roll over on that 40x40 one just with simple code. You can try yourself using toolTip property

Have fun and happy coding with flex that's easy

środa, 29 lipca 2009

Nice Adobe LiveCycle ES contest

Well adobe will soon release their next version of LiveCycle so they made a contest

Prizes are good, thats what they wrote on their site:

First Prize:

Free Pass to MAX 2009 AND Creative Suite 4 Master Collection

Second Prize:

Free Pass to MAX 2009 OR Creative Suite 4 Master Collection

Honorable Mentions:

Acrobat Professional Extended

More on their site:


Good luck

piątek, 24 lipca 2009

AJournal simple logger to file for AIR applications

Well, when I came back from work I did a research to find out any AIR application specified logger and there is no any :/

Since we can write anything to file there should be something that allow us to do that ...  and now there it is.

http://code.google.com/p/ajournal/ that's the small child I give You.

Well it's some kind of wrapper to flex logging to add files support. I made it singleton so it can be used as simple as was  possible. In the download archive and in the source in svn there is a mxml file with basic sample code. Maby the class is not perfect but hey it's working and making all I need for now.

It has abilities to log to files with different names, wow ! ...  more on the project page.  I'll try to upragde the version this weekend to eliminate the TODO list. If anyone will use it except me.