3 Replies Latest reply on Jun 27, 2010 10:02 PM by BhaskerChari

    change button color

    mssrivatsa

      i have a group of buttons and when each one is clicked its color should change. when another button is clicked the color of previous button should change back to normal..plz help..thanks in advance

        • 1. Re: change button color
          BhaskerChari Level 4

          Hi mssrivatsa,

           

          you can do something like below:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Script>
            <![CDATA[
             private var previousButtonClicked:Button;
            
             private function buttonClickHandler(event:MouseEvent):void
             {
              if(previousButtonClicked)
              {
               previousButtonClicked.setStyle("color","green");
              }
              previousButtonClicked = event.currentTarget as Button;
              Button(event.currentTarget).setStyle("color","red");
             }
            ]]>
          </mx:Script>

          <mx:HBox>
            <mx:Button id="btn1" label="Button" color="green" click="buttonClickHandler(event);"/>
            <mx:Button id="btn2" label="Button" color="green" click="buttonClickHandler(event);"/>
            <mx:Button id="btn3" label="Button" color="green" click="buttonClickHandler(event);"/>
            <mx:Button id="btn4" label="Button" color="green" click="buttonClickHandler(event);"/>
            <mx:Button id="btn5" label="Button" color="green" click="buttonClickHandler(event);"/>
            <mx:Button id="btn6" label="Button" color="green" click="buttonClickHandler(event);"/>
            <mx:Button id="btn7" label="Button" color="green" click="buttonClickHandler(event);"/>
          </mx:HBox>
          </mx:Application>

           


          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari

          • 2. Re: change button color
            mssrivatsa Level 1

            Thank You Very Much...It was very helpful...But its not working for changing icon in a similar way..can u help sir..Thanks in advance

            • 3. Re: change button color
              BhaskerChari Level 4

              Hi Srivatsa,

               

              You can do the same for chnanging your button icons if you have only tow icons to display ....one is default icon and the other one is the icon which you wnat to display when the button is clicked...

               

              Check the below code:

               

              Just replace the image path in the embed variable with your image path and check...

               

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="
              http://www.adobe.com/2006/mxml" layout="absolute">
              <mx:Script>
                <![CDATA[
                 private var previousButtonClicked:Button;
                 [Embed("assets/Rose20Icon.jpg") ]
                       [Bindable]private var buttonIcon:Class;
                      
                       [Embed("assets/arrowIcon.JPG") ]
                       [Bindable]private var buttonIconDefault:Class;
                      
                
                 private function buttonClickHandler(event:MouseEvent):void
                 {
                  if(previousButtonClicked)
                  {
                   previousButtonClicked.setStyle("icon",buttonIconDefault);
                  }
                  previousButtonClicked = event.currentTarget as Button;
                  Button(event.currentTarget).setStyle("icon",buttonIcon);
                 }
                ]]>
              </mx:Script>

              <mx:HBox>
                <mx:Button id="btn1" icon="{buttonIconDefault}" label="Button" color="green" click="buttonClickHandler(event);"/>
                <mx:Button id="btn2" icon="{buttonIconDefault}" label="Button" color="green" click="buttonClickHandler(event);"/>
                <mx:Button id="btn3" icon="{buttonIconDefault}" label="Button" color="green" click="buttonClickHandler(event);"/>
                <mx:Button id="btn4" icon="{buttonIconDefault}" label="Button" color="green" click="buttonClickHandler(event);"/>
                <mx:Button id="btn5" icon="{buttonIconDefault}" label="Button" color="green" click="buttonClickHandler(event);"/>
                <mx:Button id="btn6" icon="{buttonIconDefault}" label="Button" color="green" click="buttonClickHandler(event);"/>
                <mx:Button id="btn7" icon="{buttonIconDefault}" label="Button" color="green" click="buttonClickHandler(event);"/>
              </mx:HBox>
              </mx:Application>

               

              Thanks,

              Bhasker Chari

               

              1 person found this helpful