flex4 - Flex 4 Skin: Change skin based on parent containers state -


itemprop = "text">

I think that SkinnableContainer extends is a custom component ExpandCollapseMenu . This component can be "normal" or "expansion" state - this component I button, with different skin depending on the position of ExpandCollapseMenu. It works fine when ExpandCollaps button inside the skin class of Menu Defined: ..

  & lt; S: Group id = "Content group" top = "20" left = "10" right = "10" down = "10" & gt; & Lt; S: layout & gt; & Lt; S: VerticalLayout / & gt; & Lt; / S: Layout & gt; & Lt; Component: ExpandCollapseMenuButton label = "Foo" skinClass.expanded = "component.ExpandCollapseMenuButtonExpandedSkin" skinClass.normal = "component.ExpandCollapseMenuButtonSkin" /> & Lt; / S: Group & gt;   

But I do not want to define the button within the skin section of ExpandCollapsMenu, I want to define them where I use ExpandCollapseMenu. By the way:

   & Lt; / Component: ExpandCollapseMenu & gt;   

At this level, I can not reference skinclass.expanded , but I am working this way using CSS: < Pre> components | ExpandCollapseMenu: Extension Components | ExpandCollapseMenuButton {skinClass: ClassReference ("component.ExpandCollapseMenuButtonExpandedSkin"); } Component; Expand CollapseMenu: General Components | ExpandCollapseMenuButton {skinClass: ClassReference ("component.ExpandCollapseMenuButtonSkin"); }

Is it a good way to change skin based on the original containers? Or is there a better way?

I advise you to resolve the issue at the CollapseMenu container level when the state of ExpandCollapseMenu is changed You should iterate on the kids and some flag set for each of them

then I suggest to present the detail: .. For the Boolean flag ExpandCollapseMenuButton

The problem may occur if the ExpandCollapseMenu contains other example types In this case we can solve it using the following two methods.

  1. They are using ExpandCollapseMenuButton examples (using operator) in the process of repetition of check components
  2. Introduction to simple expandable interface like the following:

      public interface expandable {function set expanded (value: boolean); }     

    and implement this interface by ExpandCollapseMenuButton.

    The last part of the puzzle is to expand the ColdPan Menu button and switch to implement the setter in the skin:

      Private var extended dirty: boolean; Private variable _exended: boolean; Public function set expanded (value: boolean) {if (value == _ expanded) returns; _expended = value; Extended dirty = true; InvalidateProperties (); } Override Protected Function Commit Properties (): Zero {Super Commit Property (); If (expanded third) {if (_expended) set style ("skinclass", expand granition menu expendidkin); And set style ("skinClass", ExpandCollapseMenuButtonSkin); Extended dirty = false; }}    

Comments