6 Replies Latest reply on Jun 27, 2010 1:33 AM by imdfl

    Skinning a windowed application

    imdfl Level 1

      I used to be able to add a gradient background to my app with a simple style element.

      It went something like this (tho I suspect the namespace thingie is already due to Flex 4 requirements):

       

          <mx:Style>
          @namespace mx "http://www.adobe.com/2006/mxml";
          mx|WindowedApplication {
              backgroundGradientColors: black, #000033;
          }
          </mx:Style>

       

      At some point, upon switching to Flex 4 I guess, it stopped working. The documentation says that backgroundGradientColors is not implemented for WindowedApplication under spark: "Not implemented; define in the container skin".

      I'd appreciate a pointer on how to do this.

        • 1. Re: Skinning a windowed application
          David_F57 Level 5

          hi,

           

          Its pretty simple, first you add a skinclass to the application, code complete will offer to create the skin for you so you let it do that.

           

          <?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" skinClass="gradientSkin">

          <fx:Declarations>

          <!-- Place non-visual elements (e.g., services, value objects) here -->

          </fx:Declarations>

          </s:WindowedApplication>

           

          in the skin file find the updateDisplayList and comment out the 2 background fill values

           

                  override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void

                  {

                     // backgroundFill.color = getStyle("backgroundColor");

                     // backgroundFill.alpha = getStyle("backgroundAlpha");

                      super.updateDisplayList(unscaledWidth, unscaledHeight);

                  }

           

          find the background rect and replace the solid fill with your gradient fill...

              <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0" >
                  <s:fill>
          <s:LinearGradient>
          <s:GradientEntry color="0x00FF00"/>
          <s:GradientEntry color="0xFF00FF"/>
          <s:GradientEntry color="0x00FF00"/>
          </s:LinearGradient>
                  </s:fill>
              </s:Rect>

          • 2. Re: Skinning a windowed application
            imdfl Level 1

            (There's a "However" after the words of gratitude)

            Thank you for the detailed reply. I didn't enjoy the code completion wonders described in your reply, perhaps because

            I'm using FB 3.02, but I found the skin class in the sdk folder, copied it, renamed to gradientSkin.mxml, edited out what I didn't need and indeed got the skin to show the gradient.

            However...

            I'm not really building a flex app, it's just an AIR shell application that loads a SWF. The SWF expects to be placed in a MovieClip into which it can add children. When I was subclassing the mx WindowedApplication class, I could insert a MovieClip into the displaylist by using rawChildren. This member doesn't exist, or is not exposed, in the spark WindowedApplication. I tried using a UIMovieClip into which I insert a MovieClip that serves as the application's "root", but nothing shows up on the screen.

            Therefore, I reverted to the mx application and simply added a background rectangle, by using the spark Rect primitive inside a spark Group object.

            This works well, but I can't get rid of a margin, or border, around the rectangle. In fullscreen, the content is indeed surrounded by the gradient, but the latter is surrounded by a border, which I assume is just a margin since it has the default bg color. I added a VerticalLayout tag to the Group, with 0 paddings and gap, but to no avail.

            Any ideas and pointers would be very welcome.

            • 3. Re: Skinning a windowed application
              David_F57 Level 5

              hi,

               

              I thought you were using flashbuilder, if you are using just the flex 4 sdk you wont get the spark code assist...The following is a quick test I did for moving data between the app and a module, but it will show you how to load a swf into a flex 4 app. The source is included

               

              http://gumbo.flashhub.net/basicmodule/  loading and unloading a swf module in flex 4

               

               

              David

              • 4. Re: Skinning a windowed application
                imdfl Level 1

                Thanx for the super quick answer.

                Loading the swf, in itself, was not a challenge as I had the SWFLoader. The ModuleLoader object in the example you've provided is actually an overkill for me + it enforces an interface that isn't relevant to my app.

                What I'd really like to resolve here is the unwanted border/margin around the rectangle.

                This is the mxml code used to create the rect:

                 

                <s:Group width="100%" height="100%" top="0" left="0" bottom="0" right="0">
                    <s:layout>
                        <s:VerticalLayout paddingBottom="0" paddingTop="0" paddingLeft="0" paddingRight="0" gap="0"/>
                    </s:layout>
                    <s:Rect width="100%" height="100%" top="0" left="0" right="0" bottom="0">
                        <s:fill>
                            <mx:LinearGradient rotation="45">
                                <mx:GradientEntry color="0x000033"/>
                                <mx:GradientEntry color="0x000000"/>
                            </mx:LinearGradient>
                        </s:fill>
                    </mx:Canvas>
                </s:Group>

                • 5. Re: Skinning a windowed application
                  David_F57 Level 5

                  hi,

                   

                  can you show more code I don't understand what you are doing here also you don't need width and height values when you are using constraints. the vertical layout is not required if its just a background.

                   

                  Also if we are still talking about the skin you need to look at the contentgroup in the skin to see what its layout constraints are. Maybe thats where you need to set the layout.

                   

                  <s:Group top="0" left="0" bottom="0" right="0" alpha="1.0">

                  <s:Rect top="0" left="0" right="0" bottom="0" alpha="1.0">

                  <s:fill>

                  <s:LinearGradient rotation="45">

                  <s:GradientEntry color="0x000033"/>

                  <s:GradientEntry color="0xFF0000"/>

                  </s:LinearGradient>

                  </s:fill>

                  </s:Rect>

                  </s:Group>

                   

                  David.

                  • 6. Re: Skinning a windowed application
                    imdfl Level 1

                    Thanx for the help.

                    I ended up using the old mx.core.WindowedApplication, rather than the spark one. When using the latter, I was able to add my loaded swf to the display list but it was not visible.

                    The border around the content turned out to be the result of the 24 pixel padding which is default in mx.core.Application. Changed it to 0 and the problem was gone.