I built my first Flex 4 custom component today, a basic sortable list component that extends List. The only modification I added was a button that you could click to resort your list in alphanumeric order. I mostly wanted to get a feel for building a custom component and get a sense for how to use
SkinParts. Hopefully this will be useful to others getting their feet wet in Flex 4 custom components.
The concept of a
SkinPart in Flex 4 is one that gives the developer and the designer a lot of power. By listing something as a
SkinPart, it means that you can put that particular item anywhere in your custom component using a skin file.
SkinParts are also just other components so you can get the built-in functionality as well as any skinning that can take place by using them. In my SortableList, I decided to use a basic Button as the header. Defining a
SkinPart is very straightforward, here’s the code for my custom component with the
public class SortableList extends List
public function SortableList()
public var header:Button;
All you have to do is create a
metadata tag with
SkinPart and the
required attribute set to true or false. Right below that define what the id if your skin part has to be and then what kind of component it is.
To show and use the
SkinPart you need to add it to the skin file and make sure the component type and id match. In my case, I’ve got a
component with an id of header.
<s:Button id="header" width="100" height="20" x="0" y="0" />
Presumably, you want your new
SkinPart to do something and this is where I ran into trouble. At first inside of my SortableList constructor I added an event listener on my header component. The problem is that when the constructor is called it doesn’t create the
SkinPart. That happens during a separate operation. The secret then is to override the
partAdded function, which is a method in the SkinnableComponent class, the basis for every new spark component.
partAdded function is automatically called and will add all of the
SkinParts you specify in your custom component. It takes two parameters, the
partName and the
instance. Make sure to call
super.partAdded so that your
SkinPart gets added to the component and then you can use the instance variable to check when your
SkinPart is being created. That lets you add the event listeners that will fire when a user interacts with your skin part. In my case I just added a simple click handler:
override protected function partAdded(partName:String, instance:Object):void
if( instance == header)
If you just have one
SkinPart, there doesn’t seem to be any need for the
if statement because it will only run once. I have it there just to be safe. You also need to add code so that if the
SkinPart is removed you also remove the event listener. That’s done by overriding the partRemoved function.
override protected function partRemoved(partName:String, instance:Object) : void
if( instance == header )
And that’s pretty much all there is to it. This is just a very basic implementation but it should get you started. The design/development flexibility you get by using
SkinParts in custom components makes it a great feature. When I finish with my SortableList component I’ll blog it and talk more about things I run into.