4 Replies Latest reply on Jun 13, 2011 7:48 AM by iamcootis

    Skin is drawing on top of components

    iamcootis Level 1

      I have a skin with HostComponent of SkinnableContainer. It looks like this:

       

      <s:BitmapImage source="@Embed(source='/img/skinGraphics/footer.png')" />

       

          <s:Group id="contentGroup">
          </s:Group>

       

       

       

      The skinnable container looks like this:

      <s:SkinnableContainer>

       

           <s:HGroup width="1000">
              <s:HGroup width="100%"  height="100%" top="4" horizontalAlign="left" id="leftBtnGroup"/>   
              <s:HGroup height="100%" top="4" horizontalAlign="right" id="rightBtnGroup" />
          </s:HGroup>
      </s:SkinnableContainer>

       

      I dynamically add some buttons to the leftBtnGroup and the rightBtnGroup and they are being drawn behind the footer.png image. What am I doing wrong?

       

      Thanks..

        • 1. Re: Skin is drawing on top of components
          David_F57 Level 5

          Hi,

           

          When creating a skin you need to determine what part of the container you want to actually add components to, for instance say you want place a footer image that is 100 pixels high across the bottom of the container you would declare your skin as follows

           

          <s:BitmapImage source="@Embed(source='/img/skinGraphics/footer.png')"  height="100" bottom ="0" />

           

              <s:Group id="contentGroup" left="0" top="0" right="0" bottom="100">
              </s:Group>

           

          you need to take care of how your image scales but now the "active" part of your container(where you place components) is limited to above the footer.

           

           

          David

          • 2. Re: Skin is drawing on top of components
            iamcootis Level 1

            I may have confused you by the wording of my problem. The image is supposed to be in the background and the buttons need to be drawn on top of the image on the z-axis, not vertically stacked. The image skin should be the background for the whole component.

            • 3. Re: Skin is drawing on top of components
              _spoboyle Level 4

              I can't replicate your issue with the code you've suppplied.

               

              When and how are you adding the components? (e.g. in a creationComplete event? with addElement()?)

               

              also note that top will be ignored for elements contained within an HGroup

              • 4. Re: Skin is drawing on top of components
                iamcootis Level 1

                The footer is contained within the main view UI like this:

                 

                <s:SkinnableContainer skinClass="skins.BPSApplicationSkinGrey">
                        <s:layout>
                            <s:VerticalLayout />
                        </s:layout>
                        <view:TitleBar theModuleTitle="{breadCrumbStr}" top="43" left="0"/>
                        <views:TestView id="testView" includeIn="TestView"/>
                        <views:TestBrowser id="testBrowser" includeIn="TestBrowser"/>
                        <com:Footer id="footer" bottom="8"/>
                    </s:SkinnableContainer>

                 

                The buttons are attached on the enterState() function of testBroswer.

                 

                public function enterState():void{
                               
                                btnDelete = new Button();
                                btnDelete.setStyle("skinClass", skins.FooterButtonGreenSkin);
                                btnDelete.addEventListener(MouseEvent.CLICK, deleteBtnClickHandler);
                                parentDocument.footer.addLeftButton(btnDelete);
                                btnDelete.label = "DELETE TEST";

                }

                 

                public function addLeftButton(btn:Button):void{
                                leftBtnGroup.addElement(btn);
                            }