Flex Image Disappears

Question

I am actually just learning flex, and i am getting confused with some parts. The problem is that the background image i have set in the skin works fine until i add more elements, it then just becomes a white background rather than laying the elements over the top.

I am starting to think im misunderstanding how this works. I don't understand why i need to have <s:Group id="contentGroup" /> for the image to show in the first place...this just seems like a redundant tag?

Here is the main code and the skin:

<?xml version="1.0" encoding="utf-8"?>
<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" width="800" height="523" maxWidth="800" maxHeight="523" initialize="httpService.send()" showStatusBar="false" backgroundColor="white" backgroundAlpha="1">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;

            public var returnData:ArrayCollection;

            protected function httpService_handler(event:ResultEvent):void{
                returnData = event.result.people.person;

            }
        ]]>
    </fx:Script>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";

    </fx:Style> 
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:HTTPService id="httpService" url="" result="httpService_handler(event)" />
    </fx:Declarations>

    <s:BorderContainer borderVisible="false" mouseDown="nativeWindow.startMove();" skinClass="MainStyle" width="800" height="523" id="container" >
        <s:HGroup left="100" top="100" id="newsSlider" width="100" height="100">
            <s:Label>
                <s:text>Test</s:text>
            </s:Label>
        </s:HGroup>
    </s:BorderContainer>
</s:WindowedApplication>

<?xml version="1.0" encoding="utf-8"?>
<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">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.BorderContainer")]
    </fx:Metadata>

    <!-- states -->
    <s:states>
        <s:State name="disabled" />
        <s:State name="normal" />
    </s:states>

    <!-- SkinParts
    name=contentGroup, type=spark.components.Group, required=false
    -->
    <s:Group id="contentGroup" width="800" height="523">
        <s:BitmapImage id="bg" source="@Embed('/School Catchup/libs/images/App-BG8.png')" scaleMode="stretch" left="0" top="0" right="0" bottom="0" width="800" height="523" />
    </s:Group>
</s:Skin>

Answer 1

contentGroup is the only "skinPart" of the SkinnableContainer component, which is the base class for BorderContainer. It's not a required skinpart (the compiler would've thrown you an error otherwise in your previous version where you didn't have the skinpart in your skin).

What is a skinPart?

It's a contract between the host component and its skin. Essentially the host component is instructing the skin (through metadata) that it needs this and this and that element (skin part) in order to function correctly. Some of these elements are absolutely required for the component to function, some are optional.

What is the contentGroup skinpart?

It's the container element to which SkinnableContainer will add its nested elements. As an example:

<s:SkinnableContainer>
    <s:Label text="hello"/>
</s:SkinnableContainer>

behind the scenes, the Label instance will be added to the contentGroup skinpart of SkinnableContainer's skin.

So how do I get my example to work?

As you can see from what I explained before, the contentGroup element is just a placeHolder in the skin. If you want to add "chrome" to your custom component, add it outside that Group:

<s:BitmapImage id="bg" source="@Embed('/School Catchup/libs/images/App-BG8.png')" scaleMode="stretch" left="0" top="0" right="0" bottom="0" width="800" height="523" />

<s:Group id="contentGroup" width="800" height="523"/>

This will display the image behind the contentGroup and your Labels will now be added to it without removing the BitmapImage that you declared in there.

This is just a short explanation of the skinning mechanism in the context of your needs. I suggest you do some research on this specific topic to really understand how it works.