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.

[sourcecode language=”actionscript3″]
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);
}
}
}
[/sourcecode]

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.

[sourcecode language=”css”]s|ViewNavigatorApplication {
skinClass: ClassReference("skins.common.BGApplicationSkin");
backgroundImage: Embed(‘/skins/skinFiles/commonComponents.swf#BackGround’);
backgroundColor: #000000;
}

s|View {
backgroundAlpha: 0;
}
[/sourcecode]

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.