Allmas

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.

Adobe released the first beta of the new Text Layout Framework (TLF) for Flash Player 10 and AIR 1.5. Built on the new text engine of Flash Player 10, the framework offers advanced typographic and text layout features. It supports bidirectional and vertical text, multi-column layout, text flow around inline images, advanced antialiasing and transformations (alpha, rotation, etc.) for device fonts and much more.

Flex Gumbo, the next release of Flex, already includes the framework and offers text components that use it. Flex 3.2 and ActionScript developers can download the framework and use it to develop their own text components and classes. For Flash CS4 Professional users, Adobe offers an extension to integrate the framework in their projects.

Gumbo defines 3 new text primitives that take advantage of the new text functionality of the Flash Player 10 Text Engine: TextBox, TextGraphic and TextView. More information about them can be found in the following Gumbo features specification document: Text Primitives (TextBox, TextGraphic, and TextView).

To use embedded fonts with these text primitives, the fonts must be embedded in the Compact Font Format (CFF). This is achieved by setting the new property "cff" for font embedding to "true". Here are two examples on setting this property:

Using CSS

Using ActionScript

The text primitives also support the new style property "fontLookup", which sets the source where to lookup for fonts. This property can have two values:

• device : uses the fonts installed on the system that is running the SWF file
• embeddedCFF : uses font outlines embedded in the SWF

As you can guess, this property must be set to "embeddedCFF" :

Directly in the MXML tag

Using CSS