Problem with depth between two components in flex

Question

I know what i am about to ask may be all too simple but i have been unable to find a solution to my problem.

I am developing an AIR app. I have a custom skin for windowedapplication of spark components. In that skin i have added a bitmapimage to set a background for the windowedapplication.

Also, i have a custom component called 'header', what it does is draw a few table headers.

Now, if i add header as <ui:header width="100%" and height="40"\>in the skins right after the bitmapimage then the header shows up as it is supposed to. But, if i put the header within the windowedapplication then it displays underneath the bitmapimage, which cant be seen unless the bitmapimage is removed.

I tried to fix this problem by changing the depth of the bitmapimage and the header component accordingly in order to make them appear in the right order but, this is not working for me.

If you have an idea, please help me out. Thanks

Here are bits of the code

`

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"    xmlns:s="library://ns.adobe.com/flex/spark"                         xmlns:mx="library://ns.adobe.com/flex/mx"                           skinClass="ui.uiskin"
height = "728" width="910"                     
xmlns:ui="ui.*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <ui:header x="0" y="{.0258*height}" depth="0"
               height="{0.0774*height}" width="100%"/>
</s:WindowedApplication>

`

uiskin is

`

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:ui="com.youspin.components.ui.*"
        depth="-10">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.WindowedApplication")]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[

        ]]>
    </fx:Script>
    <!-- states -->
    <s:states>
        <s:State name="disabledAndInactive" />
        <s:State name="normalAndInactive" />
        <s:State name="disabled" />
        <s:State name="normal" />
    </s:states>

    <s:BitmapImage source="@Embed('../../images/ui/background.png')" depth="-10"/>

    <s:TitleBar left="0" right="0" top="1" 
                height="{0.0258*height}" 
                skinClass="titleSkin"/>

    <ui:header x="0" y="{.0258*height}" depth="0"
               height="{0.0774*height}" width="100%"/>  

</s:Skin>

`

and header is

`

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"
         width="100%" height="100%"
         >
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <s:Rect width="100%" height="{.04*height}">
        <s:fill>
            <s:SolidColor color="black"/>
        </s:fill>
    </s:Rect>

    <s:Rect width="100%" height="100%"
            left="0" top="2"
            alpha=".2"
            >
        <s:fill>
            <s:SolidColor color="black"/>
        </s:fill>
    </s:Rect>

    <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx"
             width="100%" height="100%"
             top="2" left="0"
             id="headingsGroup"
             >
        <mx:Image source="@Embed('../../images/header/logo.png')" 
                  width="{0.2*headingsGroup.width}"
                  left="{0.015*headingsGroup.width}" top="{0.04*headingsGroup.height}"/>

        <!-- left line drop -->
        <s:Rect left="{.25*headingsGroup.width}" top="0"
                width="2" height="{.23*headingsGroup.height}">
            <s:fill>
                <s:SolidColor color="black"/>
            </s:fill>
        </s:Rect>

        <!-- middle line drop -->
        <s:Rect left="{.50*headingsGroup.width}" top="0"
                width="2" height="{.23*headingsGroup.height}">
            <s:fill>
                <s:SolidColor color="black"/>
            </s:fill>
        </s:Rect>
        <!-- side line drop -->
        <s:Rect left="{.75*headingsGroup.width}" top="0"
                width="2" height="{.23*headingsGroup.height}">
            <s:fill>
                <s:SolidColor color="black"/>
            </s:fill>
        </s:Rect>

        <s:Label text="artist"
                 top="{0.06*headingsGroup.height}"
                 horizontalCenter="{-0.125*headingsGroup.width}"
                 styleName="balonez"/>
        <s:Label text="song"
                 top="{0.06*headingsGroup.height}"
                 horizontalCenter="{0.125*headingsGroup.width}"
                 styleName="balonez"/>
        <s:Label text="album"
                 top="{0.06*headingsGroup.height}"
                 horizontalCenter="{0.375*headingsGroup.width}"
                 styleName="balonez"/>

        <!-- bottom line -->
        <s:Rect left="{.25*headingsGroup.width}" top="{.22*headingsGroup.height}"
                width="{.75*headingsGroup.width}" height="2">
            <s:fill>
                <s:SolidColor color="black"/>
            </s:fill>
        </s:Rect>
    </s:Group>


    <fx:Style>
        @font-face {
            src:url("../../fonts/balonez fantasia.ttf");
            fontFamily: myFontFamily;
            advancedAntiAliasing:true;
        }

        .balonez{
            font-family:myFontFamily;
            font-size:25;
        }
    </fx:Style>
</s:Group>

`

Some parts of the code are not shown here, but i guess the above should give you an idea of what i am trying to do.

What i was trying to do is that my windowedapplication has a custom skin i.e, uiskin. And also there is a separate component called 'header'. Within uiskin.mxml i have added a bitmapimage to use it as the windowedapplication's background. And within the windowedapplication i have added the header. Doing this causes the header to appear behind the image.

For now, what i have done is added the header inside the uiskin after the bitmapimage. Now, this makes the header appear above the bitmapimage. But, i actually want to place the header within the windowedapplication and not within the custom skin. Is there a way to do this.

Answer 1

I found the answer to my question. All that was needed was a group tag to make the content of the windowed application display above the image set in the windowedapplication skin

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

Take care to keep the id as well, it didn't work for me when i removed the id. Also, here is the link if anyone needs it.

Answer 2

Can you show us some code ? Because when you add components to the display list using MXML, the order you write them in is important. For instance, the following code will add the label, and then the image. If the two components' coordinates overlap, the image will cover the label. The mxml part of a flex component is ran over from the top to the bottom. See ?

<s:Label
    id="labelContent"
    width="100%" height="100%"/>
<s:Image id="imageContent" horizontalCenter="0" verticalCenter="0"/>

Answer 3

I Understand some of the things posted by you. If u place the Image and then header, the header hides the image. my solution is this

have a Hgroup with 100% 100% height width

<s:HGroup width="100%" height="100%">
     <ui:header width="100%" height="40"\>
     <s:Image width="100%" height="60%"\>
</s:HGroup>