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