0 Replies Latest reply on Oct 13, 2009 10:07 AM by jeffreypritchard

    Skinning Panel prevents Control Bar ?

    jeffreypritchard

      Hello,

       

      I have a question about the use of skins artwork on a Panel component. I'm using Flash CS3 to skin it (using the flash_skins template), and no matter what I try, I can't seem to get the control bar to size properly, even though when I import the skin artwork, the css generated created the style declaration for the controlBarBackgroundSkin.

       

      I am simply adding a control bar to the panel through mxml like this:

       

      mxml sample :

      <mx:Panel width="300" height="300">

           <mx:ControlBar height="25">

                <mx:Button width="40" label="test button"/>

           </mx:ControlBar>

      </mx:Panel>

       

      and they style is set up like this in the stylesheet (generated by Flex when importing the artwork)

       

      CSS:

      Panel
      {
          borderSkin: Embed(skinClass="Panel_borderSkin");
          closeButtonSkin: Embed(skinClass="Panel_closeButtonSkin");
          controlBarBackgroundSkin: Embed(skinClass="Panel_controlBarBackgroundSkin");
      }

       

       

      The result is that I get the button to appear in the bottom of the panel, but not in a control bar (it appears to be over the content area of the borderSkin).

       

      I hope I explained this well enough, but it seems as if it should work properly because if I comment out the Panel CSS, the panel appears as it should, complete with the control bar (in the default style). However as soon as I implement the skin artwork, the control bar does not appear. Is there something I am missing, I have not done any skinning of panels before, I only have used CSS to change it's appearance, but I wanted to add a highlight to the top of the panel, and have more direct control over the appearance which is why I wanted to skin it versus style it.

       

      Thanks in advance for your time.