2 Replies Latest reply on May 20, 2011 6:00 AM by piplet

    Help with skinning

    piplet

      Hello,

       

      I am new to the flex and the concept of skinning, I was making good progress until I go stuck on one aspect which I am sure is a simple oversight.

       

      Basically when I skin a BorderContainer  all other components within that container disappear.

       

      This is my example component with a label "hello" inside:

       

          <s:BorderContainer
              height="30"  skinClass="skins.defaults.footerContainer" id="footerContainer" left="2" right="2" bottom="1" backgroundColor="#000000">

       

          <s:Label  color="#ffffff" text="hello" />
         
          </s:BorderContainer>

       

      and here is the skin (mostly just a png as a backgroun image)

       

      <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                  >

       

         
          <s:states>
              <s:State name="normal" />
              <s:State name="disabled" />
              <s:State name="normalAndMaximized" stateGroups="maximizedGroup" />
              <s:State name="disabledAndMaximized" stateGroups="maximizedGroup" />
          </s:states>

       

          <!-- fill -->
          <!--- Defines the background color of the skin. -->
          <s:Rect id="backgroundRect"  left="0" right="0" top="0" bottom="1" radiusX="0" radiusY="0" >
             
                  <s:fill>
                      <s:BitmapFill source="@Embed('skins/defaults/img/footerBg.png')" fillMode="repeat" />
                  </s:fill>
             
          </s:Rect>

      </s:SparkSkin>

       

      As soon as I remove the skin class the text label object reappears!

       

      Thank you for reading

       

      David

        • 1. Re: Help with skinning
          m1kal_ Level 2

          Hi,

           

          Here my response:

          1- What?

          2- Why?

          3- Other solution?

           

          What ?

           

          You have to add this part in your skin :

           

              <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0">

                  <s:layout>

                      <s:BasicLayout/>

                  </s:layout>

              </s:Group>

           

           

          Why ?

           

          The spark architecture (introduce in Flex 4.0) is a couple of skin/component. The component holds the logic behind the event handling and the skin is responsible of displaying the things. The contract beetween those two parts are called "SkinPart" which could be either required or not. The component is declaring that is need this, this and this component (required or not) and is using them as part of its logic (registering handlers and so on). The skin has to create the required SkinPart declared by the component.

           

          In your case, you're skinning a BorderContainer (which is a SkinnableContainer). This component declares that it needs a Group component called "contentGroup". It's not required, so it doesn't complain at compilation. The SkinnableContainer's logic is adding the child components in this "contentGroup" skinPart if it exists. It's the reason why you can't see your Label.

           

           

          Other solution ?

           

          As suggested in the documentation (http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Border Container.html#includeExamplesSummary), it's not recommended to skin this component. The default skin is written directly in as3 and is made to be the most efficient way of adding stroke and fill to a container (by css attribut).

           

          Basically you want to add a bitmap fill to the background of your container... So how you can achieve what you want :

           

          BorderContainer can achieve that natively ! In this case use the "backgroundImage" and "backgroundImageFillMode" attributes

               <s:BorderContainer height="30"  id="footerContainer" left="2" right="2" bottom="1" backgroundImage="@Embed('skins/defaults/img/footerBg.png')" backgroundImageFillMode ="repeat">

                   <s:Label  color="#ffffff" text="hello" />
              </s:BorderContainer>

           

          • 2. Re: Help with skinning
            piplet Level 1

            Great answer!

             

            I did as you said (although I used a CSS file) and it works really well thank you!