Best way for your requirement - use spark states. Panel component and Mxml skin, have two state: active and inactive (or your new states). Panel component has logic to set current skin state. If you want use css for keeping properties, each state apply own stylename for skin.
Main application:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
xmlns:classes="classes.*">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace classes "classes.*";
classes|Pod
{
skinClass : ClassReference("skins.PodSkin");
}
.active
{
backgroundColor: #ff0000;
}
.inactive
{
backgroundColor: #00ff00;
}
</fx:Style>
<classes:Pod x="800" width="300" height="300" />
</s:Application>
Pod component:
package classes
{
import flash.events.MouseEvent;
import spark.components.Panel;
public class Pod extends Panel
{
private var _isActive:Boolean = false;
public function Pod()
{
super();
}
override protected function childrenCreated():void
{
super.childrenCreated();
addEventListener(MouseEvent.CLICK, onClickHandler, false, 0, true);
}
protected function onClickHandler(event:MouseEvent):void
{
_isActive = !_isActive;
invalidateSkinState();
}
override protected function getCurrentSkinState():String
{
if (_isActive) return "active";
return "inactive";
}
}
}
And part of PodSkin mxml skin where you set stylename for each states:
<s:SparkSkin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
blendMode="normal" mouseEnabled="false"
styleName.active="active" styleName.inactive="inactive"
minWidth="131" minHeight="127" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
<s:states>
<s:State name="normal" />
<s:State name="active" />
<s:State name="inactive" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" stateGroups="withControls" />
<s:State name="disabledWithControlBar" stateGroups="withControls" />
</s:states>
Enjoy Flex