9 Replies Latest reply on Feb 17, 2010 12:22 AM by Shongrunden

    Component skinning through CSS not working

    flexy8 Level 1

      I have my Button component skinned then I want the skin to be applied to all the buttons. Therefore I use css to do this but it doesn't work. When I use the inline property 'skinClass' it will work but I don't want to do that to all the buttons. Any ideas? Maybe I just blurred my sight on this idea or something..

       

      the working code:

       

      <?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/halo"

                                  xmlns:cx="components.*">

       

       

       

      <s:Panel id="loginForm" title="Pylon Essentials" horizontalCenter="0" verticalCenter="0">

                <cx:LoginForm />

                <s:controlBarContent>

                     <mx:Spacer width="100%"/>

                     <s:Button skinClass="skins.ButtonSkin" label="Exit"/>

                     <s:Button skinClass="skins.ButtonSkin" label="Login"/>

                </s:controlBarContent>

           </s:Panel>

       

       

      </s:Application>

       

      with CSS applied but not working:

       

       

      <?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/halo"

                                  xmlns:cx="components.*">

          

       

      <fx:Style source="PylonEssentials.css" />

       

       

      <s:Panel id="loginForm" title="Pylon Essentials" horizontalCenter="0" verticalCenter="0">

                <cx:LoginForm />

                <s:controlBarContent>

                     <mx:Spacer width="100%"/>

                     <s:Button label="Exit"/>

                     <s:Button label="Login"/>

                </s:controlBarContent>

           </s:Panel>

          

       

      </s:Application>

       

       

       

      The css code:

       

      /* CSS file */

      @namespace s "library://ns.adobe.com/flex/spark";

      @namespace mx "library://ns.adobe.com/flex/halo";

       

      s|Button {

           skinClass:ClassReference("skins.ButtonSkin");

      }

       

       

      The button skin:

       

      <?xml version="1.0" encoding="utf-8"?>

      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"

                        xmlns:s="library://ns.adobe.com/flex/spark"

                        xmlns:mx="library://ns.adobe.com/flex/halo">

       

          

           <fx:Metadata>

                [HostComponent("spark.components.Button")]

           </fx:Metadata>

       

          

           <s:states>

                <s:State name="up"/>

                <s:State name="over"/>

                <s:State name="down"/>

                <s:State name="disabled"/>

           </s:states>

       

          

           <mx:Image source.up="assets/ButtonSkin-up.jpg"

                       source.over="assets/ButtonSkin-over.jpg"

                       source.down="assets/ButtonSkin-click.jpg"

                       source.disabled="assets/ButtonSkin-click.jpg"/>

       

          

           <s:Label id="labelDisplay"

                     color="0xFFFFFF"

                     textAlign="center"

                     verticalAlign="middle"

                     horizontalCenter="1" verticalCenter="0"/>

       

          

      </s:SparkSkin>