Flex在运行时更改css属性

Question

我正在开发一个用于flex的仪表板应用程序，它是flex dashboard的复制品。这里有多个显示不同内容的面板。我想要的是每当用户点击任何特定的面板说例如“年收入”，那么我只是想突出特定的面板。

所以基本上在初始状态下所有的面板将是“不活动”状态，但只要用户点击它，它会变得活跃知道提供用户更好的体验，他正在与“XYZ”面板其余的将进入非活动状态。

所以我的意思是“活动”和“非活动”状态是，在任何HTML页面上，当我们将鼠标悬停在任何超链接上时，它变为“蓝色”（例如），所以我将其称为活动和非活动状态。

现在，谈论面板。

该面板具有定义其布局的外壳。为了满足我的要求，我尝试的是将“css”应用于面板。现在，我已经以这种方式应用CSS现在

public class Pod extends Panel 
    { 
     ...properties 
     public function init():void 
     { 
      setStyle('styleName',"panelOff"); 
     } 
    } 

，在这个阶层本身我正在处理面板上的“点击”。因此，在单击事件我在做什么基本上是，

setStyle('styleName',"panelOn"); 

因为，板由具有皮肤上我需要改变包含在皮肤中的组件的属性。所以我必须能够访问皮肤中的css属性。

在皮肤文件

我正在做这样的事情

override protected function updateDisplayList(unscaledWidth:Number, 
                 unscaledHeight:Number):void 
{      
    setStyle('border-alpha', hostComponent.getStyle('border-alpha')); 
} 

所以我的问题是，是否满足我的要求的正确方法吗？

如何访问皮肤 类中的主机组件的css属性？

在我的main.mxml中，我定义了样式文件。因此，如果 样式文件包含一个名为“panelOn”的样式类，并且如果我将该类 类给予面板，那么它将能够访问与该类关联的样式 ？

请不要使用忠告面板的使用setStyle方法，因为这样就没有使用CSS文件给我的优势，也将是不错的CSS样式，把每一个CSS属性。

如果还有其他更好的解决方案，请分享您的观点。我希望我很清楚。任何帮助将不胜感激。

Answer 1

您的要求的最佳途径 - 使用火花状态。面板组件和Mxml皮肤有两种状态：活动和不活动（或新状态）。面板组件具有设置当前皮肤状态的逻辑。如果你想使用css保持属性，每个状态都会为皮肤应用自己的样式名称。

主要应用：

<?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> 

吊舱组件：

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"; 
     } 
    } 
} 

而且PodSkin MXML皮肤的一部分，您可以设置每个状态样式名：

<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> 

享受的Flex