Flex Mobile Application Background

This is a short post, in which I show how to set a common background for your Flex Mobile Application.

In Flex 3, there was a backgroundImage style property, but in Flex 4 things have drastically changed. Often times, this means you need to re-skin things in order to achieve your goals.

Overview

The gist is we’ll be extending the default application skin, and adding an image to it. For the sake of render-time, I also include a background color. Without the color, the background is white until your image/app loads, which may not be your desired effect.

The Setup

The class is simple… As an enhancement, feel free to include a this.getStyle() for backgroundColorAlpha (or whatever you want to call it). I didn’t find it necessary, so I default the alpha to 1.

package skins.common
{
  import mx.core.FlexSprite;

  import spark.skins.mobile.ViewNavigatorApplicationSkin;

  public class BGApplicationSkin extends ViewNavigatorApplicationSkin
  {
    protected var _background:DisplayObject;

    override protected function drawBackground(w:Number, h:Number):void
    {
      var bgClass:Class       = this.getStyle('backgroundImage') as Class;
      var bgColor:uint        = this.getStyle('backgroundColor') as uint;
            
      this._background        = new bgClass() as DisplayObject;
      
      this.graphics.beginFill(bgColor, 1);
      this.graphics.drawRect(0, 0, w, h);
      this.graphics.endFill();
      
      this._background.width  = w;
      this._background.height = h;
      
      //Add the background at the lowest display hierarchy.
      this.addChildAt(this._background, 0);
    }
  }
}

The CSS is also rather simple… Simply put, we define the skinClass for the Application type we’re using (in this case, ViewNavigatorApplication). We also supply the styles for the backgroundImage, and backgroundColor. In this example, I’m using a symbol from a SWF file to define a class. You can also use images, but the skinClass I’ve supplied does not support URLs (you can add error/type checking all you want).

The other key is to set backgroundAlpha for Spark View classes. Without this, you won’t see the background as a View will be painted white by default. Setting the alpha to 0 allows a common background to be visible at all times.

s|ViewNavigatorApplication {
  skinClass:              ClassReference("skins.common.BGApplicationSkin");
  backgroundImage:        Embed('/skins/skinFiles/commonComponents.swf#BackGround');
  backgroundColor:        #000000;
}

s|View {
  backgroundAlpha:        0;
}

Troubleshooting

Since we’re cheating and not actually extending ViewNavigatorApplication, but rather ViewNavigatorApplicationSkin, the styles won’t auto-complete correctly in your CSS file. A skin is always passed the hostComponent as the styleName (which is actually an object, not a string as you would expect), so assigning the CSS properties to ViewNavigatorApplication still works.

If you get Null Pointer Exceptions (NPE) about this._background, be sure you’re defining your CSS correctly, and ensure that the this.getStyle(‘backgroundImage’) line is assigning properly. If not, you either have a typo in your CSS declaration, or you’re not supplying the right data-type.

To understand more about how Embeds work, as well as how to debug retrievals of Embeds via getStyle, see my other blog post: Mixing Flash and Flex.

Advertisements

About killerspaz

I'm a developer that loves to tinker with cutting edge technology. I have recently been playing with the Flash Platform (AS3/Flex), Android (custom roms, replacement apps, scripting), and looking at opportunities in the mobile markets.

Posted on 11.02.2011, in AIR Mobile, Flash Player, Flex and tagged , , , , , . Bookmark the permalink. 4 Comments.

  1. Thanks for greate tutorial.
    But I have a problem. When i do everything in this article, When my app’s states is portrait, background working well but when i turn it to lanscape, its cutting from its center and my picture is being something awkward:
    http://imageshack.us/photo/my-images/688/problemxy.png/

    Regards

  2. Gurmeet Kochar

    I really want to thank you for this; searched all over the internet with no results and then, stumbled upon your blog. This is exactly what I was looking for. I have not programmed in Flex/ActionScript before but now I’m learning it to develop tablet apps…anyways, thanks again.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: