Over a million developers have joined DZone.

SkinPart in Flex 4

DZone's Guide to

SkinPart in Flex 4

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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 the SortableList, I decided to use a basic Button as the header. Defining a SkinPart is very straightforward, here’s the code for the custom component with the SkinPart definition.

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" /><b><span color="black" style=""></span></b>

Presumably, you want your new SkinPart to do something and this is where some people run into trouble because at first inside of the SortableList constructor people try to add an event listener on the 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.

The 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 this case I just added a simple click handler:

override protected function partAdded(partName:String, instance:Object):void


super.partAdded(partName, instance);

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


super.partRemoved(partName, instance);

if( instance == header )


header.removeEventListener(MouseEvent.CLICK, header_clickHandler);



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!


Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}