4 Replies Latest reply on Dec 8, 2011 9:00 AM by kjlamson

    Application "skin" blocking application components

    kjlamson

      Bozho!

       

      I am a rather new Flex user and really new to Flex 4. I am trying to create a set of skins to save as themes for the different flex projects we will be doing. I did do a search for this issue here, but I may have just worded the search wrong, it came up 0.

       

      I have had this issue a couple of times, but to choose one, I have styled the application tag background with the state look & feel image using a skin. Inside of that I have the actual application in a VGroup used as a wrapper.

       

      My problem now is that where before I saw my application, all I see now is the application background. So either it is "Over" the content or shoved it off page. The outline and the source code show it all as expected.

       

      I have checked tags, all seem to be closed. No errors or warnings. Only background in both design view and browser. I have searched in different ways on the web and looked in books and videos to no avail, so I am hoping someone here has an idea what I could look for.

       

      Migwettch

        • 1. Re: Application "skin" blocking application components
          Flex harUI Adobe Employee

          The child components are actually set up as children of the application’s contentGroup.  If your custom skin does not have one or does not size or position it properly, then you won’t see the child components.

          1 person found this helpful
          • 2. Re: Application "skin" blocking application components
            kjlamson Level 1

            OK, thanks.

             

            I do have a group id contentgroup.

             

            I got rid of the placements and it all went white, so I replaced height/width with 100% and the whole thing is covered again. Maybe my problem is trying to understand it through my web design background, it wraps everything so should be the botton "Layer."

             

            <?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"

                     xmlns:skins="skins.*"

                     width="100%" height="100%">

                <fx:Metadata>

                    [HostComponent("spark.components.Application")]

                </fx:Metadata>

               

                <s:states>

                    <s:State name="normal"/>

                    <s:State name="disabled"/>

                    <s:State name="normalWithControlBar"/>

                    <s:State name="disabledWithControlBar"/>

                </s:states>

             

                <s:layout>

                    <s:BasicLayout/>

                </s:layout>   

                <s:Rect id="backgroundRect"

                        width="100%" height="100%">

                    <s:fill>

                        <s:BitmapFill source="@Embed('images/background.gif')" />

                    </s:fill>

                </s:Rect>

                <s:Group id="groupContent"

                         width="100%" height="100%"/>

                   

            </s:Skin>

            I am watching assorted videos and tutorials but I am having difficulty with many of my skins.

            • 3. Re: Application "skin" blocking application components
              Flex harUI Adobe Employee

              Well, you called it groupContent, not contentGroup.  But otherwise, it looks like a white rect behind the content, if you name the id properly.

              1 person found this helpful
              • 4. Re: Application "skin" blocking application components
                kjlamson Level 1

                It is like in school, having someone else check what you wrote because you know and therefore see what is supposed to be there.

                 

                Sure enough, it was as simple as the groupContent/contentGroup switch. I changed it and it works fine... I suspected it was something simple when everywhere else on the web the stuff works. I of course copied the skin layout for other components and copied the mistake with it. Embarrassed but relieved, I am the first person in the office to use skins so had no one to ask.

                 

                Much obliged!