Свойства изменения флагов Flex во время выполнения

Question

Я разрабатываю одно приложение панели инструментов в flex, которое является репликой flex dashboard. Здесь есть несколько панелей, которые отображают различное содержимое. Я хочу, чтобы всякий раз, когда пользователь нажимает на какую-либо конкретную панель, например «Ежегодные доходы», я просто хочу выделить эту конкретную панель.

Таким образом, в основном все панели в исходном состоянии будут находиться в «неактивном» состоянии, но как только пользователь нажмет на него, он станет активным, предоставляя пользователю лучший опыт, зная, что он работает с панелью «xyz» и оставшееся переходит в неактивное состояние.

Так что я имею в виду под «активным» и «неактивным» состоянием, на любой странице HTML, когда мы наводим курсор на любую гиперссылку, он становится «синим» (например), поэтому я буду называть его активным и неактивным в противном случае.

Теперь, говоря о панели.

Панель имеет кожу, которая определяет ее расположение. Чтобы выполнить мое требование, я попытался применить «css» к панели. Теперь я применил CSS таким образом

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

Теперь, в этом самом классе я работат ь «CLICK» на панели. Таким образом, в случае щелчка, что я делаю, в принципе,

setStyle('styleName',"panelOn"); 

Поскольку панель имея кожу наносится мне нужно изменить свойства компонентов, содержащихся в коже. Так что я должен иметь доступ к свойствам CSS в скине.

в файле скина я делаю что-то вроде этого

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

Так что мой вопрос, это правильный способ выполнения моего требования?

Как я могу получить доступ к свойствам css хост-компонента на коже ?

Здесь, в моем main.mxml, я определил файл стиля. Так что если файл стиля содержит класс стиля с именем «panelOn», и если я даю класс на панель, то сможет ли он получить доступ к связанным стилям с этим классом?

Пожалуйста, не советую ставить каждый и каждое свойство CSS, используя SetStyle метод панели, потому что тогда не будет никаких преимуществ использования 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> 

Pod компонент:

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 кожи, где вы установили StyleName для каждого состояний:

<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