Flex mobile skin overriding hostComponent of parent skin?

Question

?Problem is pretty simple, I extend Button to create ImageButton, and I extend ButtonSkin to create ImageButtonSkin. But, when I define hostComponent like this:

public var hostComponent:ImageButton

I get an error that there is a conflict with hostComponent:ButtonBase inside the ButttonSkinBase.

How do I extend a skin AND provide a new hostComponent for it?

Answer 1

How do I extend a skin AND provide a new hostComponent for it?

Why do you have to? the hostComponent is a ButtonBase, which is something your ImageButton extends. Why do you need to change the type of the hostComponent? If you need to access the hostComponent as an ImageButton, then you can cast it:

var myImageButton : ImageButton = hostComponent as ImageButton;

In the comments to this question, you said:

So, you can extend the skin, but you can only use it for the component that the parent skin specifies, amazing.

That shouldn't be true at all. You said yourself your hostComponent has a type of ButtonBase, but you are extending the ButtonSkin. By your statement, you would not be able to use the ButtonSkin on a Button component, only on ButtonBase component. That is not true.

I'll also add one clarification to @RIAstar's comment about metadata. Metadata is used only for code hinting and MXML parameter checking by the compiler. You can easily create a style w/o either of those. You'll just have to set the value using the setStyle method:

myHostComponent.setStyle('myImageColor',0x000000);

And you can use it in the skin like this:

this.getStyle('myImageColor');

I think--but am not sure--you can also set the style via CSS even though metadata is not declared. With use of the Spark Component lifeCycle, It should be perfectly possible to set a style before the component initializes its' styles.