Tutorial – Creating Custom Flex Components – Skins & CSS Styles

2 actionscript,as3,work  |   September 27, 2008  |     1812

Hi Everyone,

over the span of the next 6 weeks I will be creating 2 custom flex components for Verizon Wireless’ MediaStore. One will be a data grid which is meant to be faster and custom fitted to their needs, and another one is to display search results.

Right now, I am at the exploration stage of building things from the ground up. These components need to be skinnable, meaning I need to offer css styling that I will use to draw the respective component’s UI. My first challenge was to enable the use of either graphic elements from a .swf or a programmatic skin. In other words, to permit something like this:

For the first three styles, you can easily get the values using the getStyle() function of the UIComponent (or any derived class). For example, the first three values:

Don’t ask me why they called it getColorNames cause that doesn’t make sense to me! Maybe it has another reason of being..

Now for the tricky part: to get Class references (skins) and use them, and to get embedded assets from inside a .swf file. The important detail to remember is that for example this line

could also be a reference to an asset inside a swf like so

Therefore, when handling this element, you need to think of these two possibilities.

Handling a style that can either be a ProgrammaticSkin or Graphical Asset

First, here is the code for the Programmatic skin

As you might have noticed, I use styles to decide on colors used to draw the skin. This is an important detail, we’ll get back to that shortly.

This skin is used to draw the background of the header of the custom DataGrid. It is, therefore, a graphical asset. I have decided to create this skin in the createChildren function of the DataGrid like so

As you can see from the code above, both situations are handled. Now in the updateDisplayList method of our custom component, just in case the developer decided to use a programmatic skin, we want to ensure this skin has access to styles he might want to define inside of the same CSS Class. We do it like so

This ensures that these lines from the programmatic skin will work properly:

At this point I am thinking of hardcoding defaults inside of the skin, just in case…

Handling Style Changes

In UIComponent derived classes there is a nice function you can derive which has the following signature:

This function gets called when a style has changed, or all styles have changed. I found the following implementation in ScrollControlBase

As you can see from the code above, there is a need to remove the previously created graphic object (border in this case) before re-creating it. I have implemented something similar for my _headerBg (has been shortened to _headerBg from _headerBgSkin by now!). You can see the changes below: for one I put all the code needed to create the _headerBg in a function that I could call from different places, then I added the styleChanged function. A few other modifications have been made, be very attentive! Here it is:

That’s it for today. As I dig deeper, I will blog about my findings.. 🙂 Thanks for reading!

Cheers!

Martin

Comments
  • July 22, 2009 at 3:45 am

    Cristian Pascu

    Am about to start creating my own skin enabled components. Wish me luck! 🙂

  • January 12, 2014 at 2:37 pm

    MajiD

    thanks a lot Cris 😉

Leave a Reply