Creating a Flat Panel in Flex

The Panel in the Adobe Flex lay-out containers stack is a great component. It immediately reminds users of the typical windows we get in most operating systems today, in contrast to most other container components. It's for that reason that the Panel component is very popular, and rightly so. However, there's one thing that has always bothered me while developing Flex-based applications: the main content area of a Panel.

The Default Panel

Just to remind everyone and to highlight the differences; the default Panel components that ships with the Flex 3 SDK looks a little like this:

Personally, I think the main content area (the white space) stands out too much from the surrounding border. It looks almost like it was just quickly pasted on there in a hurry. Child components are added to this white space which, more often than not, looks just weird. In an attempt to remedy this, I tried to get rid of the content area and make it look exactly like its surroundings. Like most things in Flex, it was surprisingly easy.

The MXML Way

To create a flat-looking Panel on the fly in your MXML definitions, you can add the following properties in the tag definition:

backgroundAlpha="{this.myFlatPanel.getStyle('borderAlpha')}" backgroundColor="{this.myFlatPanel.getStyle('borderColor')}"

What happens then is when the Panel is initialized, we set the content area (which is usually white) to the colour of the border. We do the same for the backgroundAlpha style property so that the content area always looks exactly like the border surrounding it, effectively creating a "flat' look.

The ActionScript Way

However, using MXML requires you to do this for every Panel you want to make flat, which adds quite a bit of overhead to your MXML files just for getting the Panel to look flat. The real power of Adobe Flex lies in the ActionScript class library behind the MXML definitions. To create a reusable flat Panel, let's use the ActionScript object-oriented capabilities to define a FlatPanel class.

The next bit of code has exactly the same effect as the MXML properties we added earlier, but this time it's done in a more object-oriented and cleaner way. All we have to do is create a new class that extends the existing Panel class and sets the appropriate style properties:

To set the actual style properties, we override the parent's updateDisplayList function. This function is called near the end of the initialisation of the component, which suits our needs perefectly. Setting these style properties earlier may result in unexpected behaviour for a number of reasons:

• the parent component's style may not have been properly initialized yet, resulting in default values being returned byt the super.getStyle function
• the parent's properties may not have been initialised at all

It's important that the updateDisplayList function of the parent Panel component is called prior to setting our own style properties for more or less the same reasons listed above. Not doing so has an undesired yet pretty funky effect.

All that's left to do is set the appropriate styles to their border equivalents and Bob's your uncle. This class can be used in exactly the same way as you would a default Panel. You can also add it to your own company's or personal component library, any project or an SWC library file and include it in all your Flex projects whenever you want. I've included my own component class as an attachment (rename the file to FlatPanel.as), have fun!