I’ve been working with F4 skins a while and I have an opinion question. In your example above you add the event listener in your skin class to re-order the DATA in your list. So about the function :

header_clickHandler(event:MouseEvent)

Do you feel the best practice to implement the list sort logic would be to run the function from the skin like: hostComponent.sortAlpha()

Or would it better to dispatch another bubbles event for the host component to catch and then run sortAlpha()

I’m of the opinion that we should certainly not implement sortAlpha function within the skin. And in MVC patterns it is not good for the view to directly call the controller. So then the best way to decouple the pair is to have the skin bubble up the event. This seems a bit over the top. (and repeat!)

Another thought is to add the event to the button from the SkinnableListComponent itself. That could be considered to be bad practice by some, but keeps the skin completely clean of AS3 and the catalyst skin designer happier. Probably on creation complete?

I debate this a lot and thought to see if you or the community might have an opinion.

Here’s the class …

package com.gower.amway.components
{
import mx.core.IVisualElement;
import flash.display.DisplayObject;
import flash.display.DisplayObjectContainer;
import flash.display.InteractiveObject;
import flash.events.Event;

import spark.components.HSlider;

public class VolumeHSlider extends HSlider
{
[SkinPart(required="false")]
public var volumeArea:IVisualElement;

private var tempTrackSize:Number = NaN;

public function VolumeHSlider()
{
super();
}

override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);

if (instance == volumeArea)
{
if (volumeArea is InteractiveObject)
InteractiveObject(volumeArea).mouseEnabled = false;
if (volumeArea is DisplayObjectContainer)
DisplayObjectContainer(volumeArea).mouseChildren = false;

invalidateDisplayList();
}
else if (instance == track)
{
tempTrackSize = NaN;
}
}

override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);

sizeVolumeArea(valueToPosition(value) + thumbSize);
}

override protected function track_updateCompleteHandler(event:Event):void
{
super.track_updateCompleteHandler(event);

if (trackSize != tempTrackSize)
{
sizeVolumeArea(valueToPosition(value) + thumbSize);
tempTrackSize = trackSize;
}
}

protected function sizeVolumeArea(volumeAreaSize:Number):void
{
if (volumeArea)
DisplayObject(volumeArea).width = Math.round(volumeAreaSize);
}
}
}