3 Replies Latest reply on Aug 27, 2009 9:29 AM by jeffreypritchard

    Customizing Button States - is it possible ?

    jeffreypritchard Level 1

      Hello,

       

      In my application I have the need for a button which can display 5 different states, instead of just the 'up, over, down, and disabled' states that are found on the Button control in the Flex framework. I am skinning the button using a Flash UIMovieClip (converted to a Flex component), because a couple of the states are animated. When using the frame labels that correspond to the default states, the button behaves as I would expect it to, meaning the component moves the playhead to the corresponding frame label ('up , over, down, disabled'), and the button works.

       

      What I have tried to do is to take that same Flash UIMovieClip, and instead of using the default button states as labels, use my new custom labels (idle, holding, waiting, broadcasting, disabled) instead and control them using the currentState property of the button. This does not work.  I know I always have the option to make my button extend something other than 'Button', and maintain the button functionality through event listeners (CLICK, MOUSE_DOWN, etc), but I'm not sure if I may be over-complicating the issue unnecessarily.

       

      The button needs to be able to respond to both user control (clicking , etc), in addition to programmatic control (where I change the state of the button through code based on other stimuli).

       

      I'd appreciate any input. Thanks in advance for your time.

        • 1. Re: Customizing Button States - is it possible ?
          Barna Biro Level 3

          Create a new custom button component that extends Button and implement your behavior the way you want.

          • 2. Re: Customizing Button States - is it possible ?
            jeffreypritchard Level 1

            I think that's what I've done (in MXML), and it doesn't work. Here it is:

             

            <mx:Button     xmlns:mx="http://www.adobe.com/2006/mxml"  styleName="pageButton">

             

                <mx:states>      


                    <mx:State name="idle">
                        <mx:SetProperty target="{this}" name="currentState" value="idle"/>
                    </mx:State>
                   
                    <mx:State name="holding">
                        <mx:SetProperty target="{this}" name="currentState" value="holding"/>
                    </mx:State>
                   
                    <mx:State name="waiting">
                        <mx:SetProperty target="{this}" name="currentState" value="waiting"/>
                    </mx:State>
                       
                    <mx:State name="activated">
                        <mx:SetProperty target="{this}" name="currentState" value="activated"/>
                    </mx:State>
                       
                    <mx:State name="disabled">
                        <mx:SetProperty target="{this}" name="currentState" value="disabled"/>
                    </mx:State>

                </mx:states>

              
            </mx:Button>

             

            The styleName in the root references the skin (Flex component created in Flash) which has a frame label corresponding to each of the states I've created. I created a little test container with a combo box, whose dataProvider is an array of state names. On the change event I have this:

             

                      private function updateButtonState(e:ListEvent):void{
                           
                            var state:String = e.currentTarget.selectedItem;
                           
                            if (btnPage != null){

                                btnPage.currentState = state;
                            }
                           
                        }

             

            The state of the button, however, still does not change.

             

            Thanks again for responding.

            • 3. Re: Customizing Button States - is it possible ?
              jeffreypritchard Level 1

              I figured it out. Instead of trying to control the timeline of the Flex component using the current state property, I created a seperate skin for each of my custom states and set the styleName property. Like this:

               

                  <mx:states>       
                      <mx:State name="idle">
                          <mx:SetProperty target="{this}" name="styleName" value="pageButtonDefaultIdle"/>
                      </mx:State>
                     
                      <mx:State name="holding">
                          <mx:SetProperty target="{this}" name="styleName" value="pageButtonDefaultHolding"/>
                      </mx:State>
                     
                      <mx:State name="waiting">
                          <mx:SetProperty target="{this}" name="styleName" value="pageButtonDefaultWaiting"/>
                      </mx:State>
                         
                      <mx:State name="activated">
                          <mx:SetProperty target="{this}" name="styleName" value="pageButtonDefaultActivated"/>
                      </mx:State>
                         
                      <mx:State name="disabled">
                          <mx:SetProperty target="{this}" name="styleName" value="pageButtonDefaultDisabled"/>
                      </mx:State>      

               

              Each of those values (pageButtonDefault...), corresponds to a style which defines the skin for the button. So instead of having one skin and trying to manipulate where the playhead is using currentState, I have 5 skins and manipulate which one is applied to the button through the styleName property.

               

              Thanks for taking the time to respond.