Flex change css properties at runtime - css

Question

I am developing one dashboard application in flex which is a replica of the flex dashboard. Here there are multiple Panels which are displaying different contents. What i want is whenever user clicks on any particular panel say for example "Yearly Revenues" then i just want to highlight that particular panel.
So basically all the panels in their initial state would be in "inactive" state but as soon as user clicks on it, it will become active providing user a better experience for knowing that he is working with "xyz" panel and remaining would go in inactive state.
So what i mean by "active" and "inactive" state is, in any HTML page when we hover over any Hyperlink it becomes "blue" ( for example ), so i will call it as active and inactive otherwise.
Now, talking about the panel.
The panel is having a skin which defines its layout. To fulfill my requirement what i tried is applying "css" to the panel. Now i have applied css in this way
public class Pod extends Panel
{
...properties
public function init():void
{
setStyle('styleName',"panelOff");
}
}
Now, in this class itself i am handling the "CLICK" on the panel. So in click event what i am doing basically is ,
setStyle('styleName',"panelOn");
Since, panel is having skin applied i need to change properties of the components contained in the skin. So that i must be able to access the css properties in the skin.
in skin file i am doing something like this
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
{
setStyle('border-alpha', hostComponent.getStyle('border-alpha'));
}
So my question is, is it the right way of fulfilling my requirement ?
How can i access the css properties of the hostcomponent in the skin
class ?
Here in my main.mxml i have defined the style file. So if
style file contains a style class named "panelOn" and if i give that
class to the panel so will it be able to access the styles associated
with that class ?
Please don't advice to put each and every css property using setStyle method of the panel because then there would be no advantage of using css file to me and also it would be bad css styling.
If there is any other better solution then please share your views. I hope i am clear. Anykind of help would be appreciated.

Answer 1

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