Flex 4 Skin: изменение обложки в зависимости от состояния родительских контейнеров

Question

У меня есть пользовательский компонент ExpandCollapseMenu , который расширяет SkinnableContainer .Этот компонент может иметь состояние «нормальный» или «расширенный».
Внутри этого компонента у меня есть кнопки с другим скином, основанным на состоянии ExpandCollapseMenu.
Это прекрасно работает при определении кнопок внутри класса скина ExpandCollapsMenu:

<s:Group id="contentGroup" top="20" left="10" right="10" bottom="10">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <component:ExpandCollapseMenuButton label="Foo" skinClass.expanded="component.ExpandCollapseMenuButtonExpandedSkin" skinClass.normal="component.ExpandCollapseMenuButtonSkin"  />

</s:Group>

Но я не хочу определять кнопки внутри класса скина ExpandCollapsMenu, я хочу определить их там, где я использую ExpandCollapseMenu.Например:

<component:ExpandCollapseMenu skinClass="component.ExpandCollapseMenuSkin">
    <component:ExpandCollapseMenuButton label="Foo"  />
</component:ExpandCollapseMenu>

На этом уровне я не могу сослаться на skinclass.expanded , но у меня все получилось, используя CSS следующим образом:

component|ExpandCollapseMenu:expanded component|ExpandCollapseMenuButton {
    skinClass: ClassReference("component.ExpandCollapseMenuButtonExpandedSkin");
}
component|ExpandCollapseMenu:normal component|ExpandCollapseMenuButton { 
    skinClass: ClassReference("component.ExpandCollapseMenuButtonSkin");
}

Это хороший способ изменить скин в зависимости от состояния родительских контейнеров?Или есть лучший способ?

Answer 1

Я рекомендую вам решить проблему на уровне контейнера ExpandCollapseMenu. Когда состояние ExpandCollapseMenu изменяется, вы должны перебирать дочерние элементы и устанавливать некоторые флаги для каждого из них.

Поэтому я предлагаю ввести расширенный: логический флаг для ExpandCollapseMenuButton.

Проблема возникает, если ExpandCollapseMenu может содержать типы других экземпляров. В этом случае мы можем решить это двумя способами:

1. Проверка компонентов в процессе итерации, если они являются экземплярами ExpandCollapseMenuButton (используется оператор is).

2. Представьте простой расширяемый интерфейс, подобный следующему:

   public interface Expandable
   {
      function set expanded(value:Boolean);
   }
   

и реализовать этот интерфейс ExpandCollapseMenuButton. Таким образом, вы можете использовать оператор is в теле итератора более гибким способом без зависимости ExpandCollapseMenuButton.

Итак, последняя часть головоломки - реализовать сеттер в классе ExpandCollapseMenuButton и переключить скин:

private var expandedDirty:Boolean;
private var _expanded:Boolean;
public function set expanded(value:Boolean)
{
   if (value == _expanded)
      return;
   _expanded = value;
   expandedDirty = true;
   invalidateProperties();
}

override protected function commitProperties():void
{
   super.commitProperties();
   if (expandedDirty)
   {
      if (_expanded)
         setStyle("skinClass", ExpandCollapseMenuButtonExpandedSkin);
      else
         setStyle("skinClass", ExpandCollapseMenuButtonSkin);
      expandedDirty = false;
   }
}