Flex 4 Skin: Change skin based on parent containers state - apache-flex

Question

I have a custom component ExpandCollapseMenu that extends SkinnableContainer. This component can have state "normal" or "expanded".
Inside this component I have buttons, with different skin based on ExpandCollapseMenu's state.
This works fine when defining the buttons inside ExpandCollapsMenu's skin class:
<s:Group id="contentGroup" top="20" left="10" right="10" bottom="10">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<component:ExpandCollapseMenuButton label="Foo" skinClass.expanded="component.ExpandCollapseMenuButtonExpandedSkin" skinClass.normal="component.ExpandCollapseMenuButtonSkin" />
</s:Group>
But I don't want to define the buttons inside ExpandCollapsMenu's skin class, I want to define them where I use ExpandCollapseMenu. Like this:
<component:ExpandCollapseMenu skinClass="component.ExpandCollapseMenuSkin">
<component:ExpandCollapseMenuButton label="Foo" />
</component:ExpandCollapseMenu>
At this level, I can't reference skinclass.expanded, but I got it working by using CSS like this:
component|ExpandCollapseMenu:expanded component|ExpandCollapseMenuButton {
skinClass: ClassReference("component.ExpandCollapseMenuButtonExpandedSkin");
}
component|ExpandCollapseMenu:normal component|ExpandCollapseMenuButton {
skinClass: ClassReference("component.ExpandCollapseMenuButtonSkin");
}
Is this a good way to change skin based on parent containers state? Or is there a better way?

Answer 1

I recommend you to solve the problem on a ExpandCollapseMenu container level. When ExpandCollapseMenu's state is changed you should iterate over children and set some flag for each of them.
So I suggest to introduce expanded:Boolean flag for ExpandCollapseMenuButton.
The problem occurs if ExpandCollapseMenu can contain other instance's types. In this case we can solve it using the following two ways:
Check components in process of iterating if they are ExpandCollapseMenuButton instances (using is operator).
Introduce simple Expandable interface like the following:
public interface Expandable
{
function set expanded(value:Boolean);
}
and implement this interface by ExpandCollapseMenuButton. So you can use is operator in iterator body more flexible way without ExpandCollapseMenuButton dependency.
So the last part of puzzle is to implement setter in ExpandCollapseMenuButton class and switch skin:
private var expandedDirty:Boolean;
private var _expanded:Boolean;
public function set expanded(value:Boolean)
{
if (value == _expanded)
return;
_expanded = value;
expandedDirty = true;
invalidateProperties();
}
override protected function commitProperties():void
{
super.commitProperties();
if (expandedDirty)
{
if (_expanded)
setStyle("skinClass", ExpandCollapseMenuButtonExpandedSkin);
else
setStyle("skinClass", ExpandCollapseMenuButtonSkin);
expandedDirty = false;
}
}