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

Question

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

Таким образом, в основном все панели в их начальном состоянии будут в "неактивном" состоянии, но как только пользователь нажмет на него, он станет активным, предоставляя пользователю лучший опыт, зная, что он работает с панелью "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-свойствам hostcomponent в классе скина?

Здесь, в моем 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>

Под компонент:

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