Custom Component in Flex (Part Two)

We have already got the introduction of basic custom components in part one. Here I will move to advanced custom component creation. Most of the times advanced custom components are created in ActionScript. First thing we need to decide is whether we want a skinnable component or the one without skin. In a skinnable component it has two parts: main component class and skin class. All the aspects of  visual appearance will be defined in skin and the logical (and behavioral) aspects will be covered by main component. For that we need to have a basic understanding of how the component and corresponding skin interacts. So we generally extend one of the component extending SkinnableComponent or the one extending from UIComponent. We may also write a component extending directly from these classes, but it is very less likely due to complexity involved.

The following protected methods (one or more) need to be overridden for Spark components (as mentioned in documentation):

SkinnableComponent method	Description
attachSkin() detachSkin()	Called automatically by the commitProperties() method when a skin is added, attachSkin(), or a skin is removed, detachSkin().
partAdded() partRemoved()	Called automatically when a skin part is added or removed. You typically override partAdded() to attach event handlers to the skin part, configure the skin part, or perform other actions when a skin part is added. Implement the partRemoved() method to remove the even handlers added in partAdded(). For more information, see Implementing the partAdded() and partRemoved() methods for skinnable components for Spark components.
getCurrentSkinState()	Called automatically by the commitProperties() method to set the view state of the skin class. For more information, see Implementing the getCurrentSkinState() method for skinnable components for Spark components.

The following needs to be overridden for Halo components (ones extending from UIComponent, mostly flex 3 components):

UIComponent method	Description
commitProperties()	Commits any changes to component properties, either to make the changes occur at the same time or to ensure that properties are set in a specific order. For more information, see Implementing the commitProperties() method for Spark components.
createChildren()	Creates any child components of the component. For example, the Halo ComboBox control contains a Halo TextInput control and a Halo Button control as child components. Typically, you do not implement this method in a Spark component because any child components are defined in the skin class. This topic does not describe how to implement the createChildren() method. For more information, see the example for creating a Halo component in Implementing the createChildren() method for MX components.
measure()	Sets the default size and default minimum size of the component. You typically do not have to implement this method for Spark components. The default size of a Spark component is defined by the skin class, and by the children of the skin class. You also set the minimum and maximum sizes of the component in the root tag of the skin class. This topic does not describe how to implement the measure() method. For more information, see the example for creating a MX components inImplementing the measure() method for MX components.
updateDisplayList()	Sizes and positions the children of the component on the screen based on all previous property and style settings, and draws any skins or graphic elements used by the component. The parent container for the component determines the size of the component itself. Typically, you do not have to implement this method for Spark components. A few Spark components, such as spark.components.supportClasses.SkinnableComponent, do implement it. The SkinnableComponent class implements it to pass sizing information to the component's skin class. This topic does not describe how to implement the updateDisplayList() method. For more information, see the example for creating a Halo component in Implementing the updateDisplayList() method for MX components.

One important thing to observe is: separation of behavior and visual appearance in case of Spark components. That why they are preferred by me and I will cover some examples for that in next post.