1 Reply Latest reply on Feb 4, 2011 2:42 AM by Pablo Souza

    Skin won't change on state change

    flairjax Level 1

      So I have written a custom skin for spark panel that has a button in the top right to allow the user to collapse and expand the panel.  The issue is when I collapse the panel the collapse/expand button gets removed instead of the button changing its skin.

       

      So if I do this:

      <s:Button id="collapseButton" right="3" top="5" bottom="3" width="20" height="20" fontSize="10"
                                    skinClass="com.skins.buttons.CollapsibleButton" skinClass.collapsed="com.skins.buttons.ExpandButton"
                                    label="-" label.collapsed="+" toolTip="Collapse" toolTip.collapsed="Open" />

       

      The button gets removed.

       

      If I do this the button doesn't get removed.

      <s:Button id="collapseButton" right="3" top="5" bottom="3" width="20" height="20" fontSize="10"
                                    skinClass="com.skins.buttons.CollapsibleButton" 
                                    label="-" label.collapsed="+" toolTip="Collapse" toolTip.collapsed="Open" />

       

      In either case the tooltip works so I know the state of the panel does go to collapsed.

       

       

      I have tried to  calling collapseButton.invalidateSkinState() when the panels invalidateSkinState gets called, but that doesn't help either.

       

      Any suggestions?

       

      TIA, J

        • 1. Re: Skin won't change on state change
          Pablo Souza Level 3

          Hi,

           

          If you have developed a custom skin for spark Panel, and you wanna show different buttons for each of its states, you don't need changing the button skin every time you change the panel state. Use a ToggleButton instead of a Button, so that you can choose its appearence when it is selected or not.

           

          For instance, I have this code in my custom skin for spark Panel:

           

          <s:ToggleButton 
             id="alternateMode"
             top="3" left.closed="3" left.open="177" width="20"
             selected.open="false" selected.closed="true"
             buttonMode="true" useHandCursor="true"  
             skinClass="com.gft.training.assets.skins.CollapseHorizontalButtonSkin"/> 
          
          

          * It's the skin part that controls the changing of the Panel state. Every time the user clicks on it an event is fired and the panel state is changed.

           

           

          And now I have this code in my custom skin for ToogleButton:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                  xmlns:images="com.gft.training.assets.skins.images.*" 
                  xmlns:fxg="com.gft.training.assets.fxg.*">
           <!-- host component -->
           <fx:Metadata>
            [HostComponent("spark.components.ToggleButton")]
           </fx:Metadata>
           
           <!-- states -->
           <s:states>
            <s:State name="disabledAndSelected" stateGroups="closedStates" />
            <s:State name="downAndSelected" stateGroups="closedStates" />
            <s:State name="overAndSelected" stateGroups="closedStates" />
            <s:State name="upAndSelected" stateGroups="closedStates" />
            <s:State name="disabled" />
            <s:State name="down"  />
            <s:State name="over" />
            <s:State name="up" />
           </s:states>
           
           <s:Group visible.closedStates="false" visible="true">
            <fxg:IconArrowLeft />
            <fxg:IconArrowLeftOver visible="false" 
                                  visible.over="true" />
           </s:Group>
           
           <s:Group visible.closedStates="true" visible="false">
            <fxg:IconArrowRight />
            <fxg:IconArrowRightOver visible="false" 
                                  visible.overAndSelected="true" />
           </s:Group> 
          </s:Skin>
          

           

          * You can see that I have some FXG documents that I am using to represent the toggle button's state.

           

           

           

          Hope it helps you! Let me know if you need further assistance on it.

           

          Best regards,

          Pablo Souza