To use a custom component as a statusbar it's quiet easy,
just create your component using MXML or Actionscript, it's the same, and the add this line to your WindowedApplication
statusBarFactory="{new ClassFactory(MyCustomStatusBar)}"
The following example shows you how to extends the ProgrammaticSkin and add an image as background of your WindowedApplication positioned at the center of the window;
usage :
WindowedApplication {
borderSkin: ClassReference("com.gnstudio.skins.ApplicationSkin");
}
package com.gnstudio.skins
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
import mx.controls.Image;
import mx.skins.ProgrammaticSkin;
public class ApplicationSkin extends ProgrammaticSkin{
[Embed(source="skin/application/bckg.jpg")]
private var imageClass:Class
private var _image:Bitmap;
private var _bitmapData:BitmapData;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
var backgroundColor:uint = getStyle("backgroundColor");
if(!_image){
_image = new imageClass()
_bitmapData = new BitmapData(_image.width, _image.height);
var matrix:Matrix = new Matrix();
_bitmapData.draw(_image,matrix);
}
if(unscaledWidth && unscaledWidth){
graphics.clear();
graphics.beginFill(backgroundColor);
graphics.drawRect(0, 0, unscaledWidth,unscaledHeight);
graphics.endFill();
var x:Number = unscaledWidth/2 - _bitmapData.width/2;
var y:Number = unscaledHeight/2 - _bitmapData.height/2;
var bd:BitmapData = new BitmapData(unscaledWidth,unscaledHeight,true,backgroundColor);
bd.copyPixels(_bitmapData,new Rectangle(0,0,_bitmapData.width,_bitmapData.height),new Point(x,y));
graphics.beginBitmapFill(bd, new Matrix(), false, true);
graphics.drawRect(x, y, _bitmapData.width, _bitmapData.height);
}
}
}
}
