Allmas

Interesting presentation about Custom Components in Flex 4 that nicely explains the Flex component lifecycle.

Adobe is organizing a set of e-seminars next week about Flex 4, Flash Builder 4 and Flash Catalyst. The sessions will be presented by members of the Adobe evangelism team and include topics about the new features of Flex 4 and Flash Builder 4, connecting with different backend technologies like PHP, ColdFusion ans Java, designer-developer workflow, building mobile applications and much more. Check the whole list of sessions and subscribe on the Adobe Developer Week page.

I have lately contributed an example to a discussion on the "Adobe Flex Developers" LinkedIn Group. As the example seemed to have success among the participants, I'm publishing it here so that more people can benefit from it (I hope).

The example shows how to customze the look of the Accordion component, especially the accordion headers. The starting point was an image posted by the user who started the discussion to show the desired design. From this image, we can deduce the following characteristics:

1. Special headers that are different for the open and closed states of the tabs
2. A gap between the children of the accordion
3. No background
4. No border
5. Header and corresponding child have the same width

To create our own skin for the headers, we can use the headerRenderer property of the component. This must be set to a factory that creates the desired object for the header. According to the documentation, the created object must be a subclass of Button and implement the mx.core.IDataRenderer interface. The Button control already implements this interface and our case is simple enough to simply use a Button and skin it according to our needs. So all that remains to do is to create the skins in Flash and skin our Button taking care of skinning for both selected (open) and not selected (closed) states. The simplest way to assign this button to the headerRenderer property is inline using the Component MXML tag:

For the other properties, it's just a matter of setting some styles of the component. More specifically, we can set the gap with verticalGap, remove the background by setting backgroundAlpha="0", remove the border by setting borderStyle="none" and make the headers and children the same width by removing the paddings with paddingLeft="0" and paddingRight="0".

Check the final working example along with all the source and assets available through source view (right-click / "View Source").

Enjoy!

Back to School! I decided to take the Adobe's Flex in a Week training course to refresh and improve my Flex expertise. I even decided to start from Day 1 to make sure I don't miss anything!

Videos are funny and can help you learn faster, but they are not searchable. So I started making notes while watching the videos and I will be sharing them with the community. The notes are in no way a replacement for the videos, they are incomplete and only contain information that I, personally, find important.

Every time I finish a day in the course, I will post a link to the corresponding Google Notebook page I created.

My notes about Day 1: Flex Basics are here.

If you have any comments about the notes, please post them here.

It's been a long time since my last post. I was very busy with some projects and I have again some time for writing. I've learned a lot from these projects and I will try to write about what I learned, so stay tuned!

For now, I finally managed it to create my Portfolio, please take a look at it and don't hesitate to drop me a mail if you have any comments.