2 Replies Latest reply on Apr 8, 2010 12:22 PM by david.t.lanton

    Switching skin programmatically at runtime

    david.t.lanton Level 1

      I can almost swear that I've seen this before and it wasn't too hard.

       

      Let's say I have a button that has a skin.

      <s:Button id="myBtn"
                     label="Click Me"
                     skinClass="skins.MySkin" />

      Isn't there a way to assign it a new skin, let's say on click?

       

      tried this:

           myBtn.skinClass = "skins.SecondSkin";        

      1119: Access of possibly undefined property skinClass through a reference with static type spark.components:Button

       

      and this

           myBtn.skin = "skins.SecondSkin";      

      1059: Property is read-only.

       

      Any ideas how to re-assign the skin, or even just redraw the component

        • 1. Re: Switching skin programmatically at runtime
          Peter deHaan Level 4

          import your skins.* package and use the class name instead of a string:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                         xmlns:s="library://ns.adobe.com/flex/spark" 
                         xmlns:mx="library://ns.adobe.com/flex/mx">
              
              <fx:Script>
                  <![CDATA[
                      import skins.CustomButtonSkin;
                      
                      protected function btn_clickHandler(evt:MouseEvent):void {
                          btn.setStyle("skinClass", CustomButtonSkin);
                      }
                  ]]>
              </fx:Script>
              
              <s:Button id="btn" label="Click me" click="btn_clickHandler(event)" />
                  
          </s:Application>
          

           

          Peter

          • 2. Re: Switching skin programmatically at runtime
            david.t.lanton Level 1

            Perfect, perfect, thank you Peter.