1 Reply Latest reply on Jan 14, 2010 9:17 AM by Gregory Lafrance

    Setting styles

    mw00

      Hello, I have created the VBox component below with a number of buttons in it, what I am trying to do is change the style of the pressed button to the style "mainButtonSelected" and ensure the previous selected button has it's style set to "mainButtonNotSelected", I can change the selected button style no problem but cannot find a way to change the previous button style, any ideas would be appreciated. As you can see I have added the click event to the enclosing vBox is this good practice?

       

      I also need to change the property of another label that is in another file but I am having troble referencing it in the actionscript function any help here would be appreciated also

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="95" height="655"  click="mainButtonPressed( event )">

       

              <mx:Script source="../../../actionscript/myacs.as"/>
              <mx:Style source="../../../css/mycss.css"/>
             
              <mx:Script>
                  <![CDATA[
                      public function mainButtonPressed( event:Event ):void
                      {
                          event.target.styleName = "mainButtonSelected";
                      }
                  ]]>
              </mx:Script>

       

              <mx:Button id="squidButton" width="90" height="90" styleName="mainButtonSelected"
                         cornerRadius="0" label="sQuid" color="#000000" fontSize="18"/>
                        
              <mx:Button id="strButton" width="90" height="90" styleName="mainButtonNotSelected"
                         cornerRadius="0"  color="#FFFFFF" icon="@Embed(source='../images/str.png')" labelPlacement="bottom" label="STR"/>
                        
              <mx:Button id="ticketsButton" width="90" height="90" styleName="mainButtonNotSelected"
                         cornerRadius="0"  color="#FFFFFF" icon="@Embed(source='../images/tickets.png')" label="Tickets" labelPlacement="bottom"/>
                        
              <mx:Button id="carnetButton" width="90" height="90" styleName="mainButtonNotSelected"
                          cornerRadius="0"  color="#FFFFFF" icon="@Embed(source='../images/carnet.png')" label="Carnet" labelPlacement="bottom"/>
                 
              <mx:Button id="voucherButton" width="90" height="90" styleName="mainButtonNotSelected"
                         cornerRadius="0"  color="#FFFFFF" icon="@Embed(source='../images/voucher.png')" label="Voucher" labelPlacement="bottom"/>
                        
              <mx:Spacer width="90" height="78"/>
                        
              <mx:Button id="resetButton" width="90" height="90" styleName="mainButtonRed"
                         cornerRadius="0" color="#000000" icon="@Embed(source='../images/reset.png')" label="Reset" labelPlacement="top"/>
      </mx:VBox>

        • 1. Re: Setting styles
          Gregory Lafrance Level 6

          Try event.currentTarget.styleName = "mainButtonSelected"

           

          You can use mx.core.Application.application.myOtherComponent.myotherComponent to reference other components, or use custom events.

           

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


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services