flex button skins test

Using Flex 3 Component without MXML - only AS3
http://filt3r.free.fr/index.php/2007/08/11/28-using-flex-3-component-without-mxml-only-as3

by yonatan 06 Nov 2009

• Forked from mash's flex test
• Diff: 88
• Related works: 1

Tags

flex
Embed

// forked from mash's flex test
// Using Flex 3 Component without MXML - only AS3
// http://filt3r.free.fr/index.php/2007/08/11/28-using-flex-3-component-without-mxml-only-as3
package
{
	import mx.core.Application;
	import mx.events.FlexEvent;
	import mx.styles.StyleManager;
	import mx.styles.CSSStyleDeclaration;
	import mx.controls.Button;
	import mx.skins.halo.HaloBorder;
	import flash.display.Bitmap;

	public class Main extends Application
	{
		public function Main()
		{
			super();

			this.layout = "absolute";
			this.addEventListener(FlexEvent.CREATION_COMPLETE, handleComplete);

			setupStyles();
		}

		private function setupStyles() : void
		{
			var style:CSSStyleDeclaration = new CSSStyleDeclaration();
			style.setStyle( "borderSkin", CustomBorder ); // mx.skins.halo.HaloBorder );
			StyleManager.setStyleDeclaration( "Application", style, false );

			style = new CSSStyleDeclaration();
			style.setStyle( "textAlign", "left" );
			style.setStyle( "fontAntiAliasType", "advanced" );
			style.setStyle( "fontGridFitType", "pixel" );
			style.setStyle( "paddingLeft", 10 );
			style.setStyle( "paddingRight", 10 );
			style.setStyle( "paddingTop", 5 );
			style.setStyle( "paddingBottom", 5 );
			style.setStyle( "horizontalCenter", 0 );
			style.setStyle( "verticalCenter", 0 );
			style.setStyle( "upSkin", UpState );
			style.setStyle( "overSkin", OverState );
			style.setStyle( "downSkin", DownState );

			StyleManager.setStyleDeclaration( "Button", style, false );
		}

		private function handleComplete( event : FlexEvent ) : void
		{
			var button : Button = new Button();
			button.width = 200;
			button.height = 100;
			button.label = "I'm a Button object";
			addChild( button );

		}
	}
} 

// bitmap skins for button

import mx.core.BitmapAsset;
import mx.core.IFlexAsset;
import flash.display.BitmapData;

class UpState extends BitmapAsset {
    public function UpState() {
        super( new BitmapData( 1, 1, false, 0xFFFF00 ) );
    }
}

class DownState extends BitmapAsset {
    public function DownState() {
        super( new BitmapData( 1, 1, false, 0xFF00FF ) );
    }
}

class OverState extends BitmapAsset {
    public function OverState() {
        super( new BitmapData( 1, 1, false, 0x00FFFF ) );
    }
}

// custom border skin for app

import mx.skins.RectangularBorder;
import flash.display.Graphics;
import mx.graphics.RectangularDropShadow;

class CustomBorder extends RectangularBorder
{
    private var dropShadow:RectangularDropShadow;

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

        super.updateDisplayList(unscaledWidth, unscaledHeight);
        var cornerRadius:Number =  getStyle("cornerRadius");
        var backgroundColor:int = 0xFF0000; // getStyle("backgroundColor");
        var backgroundAlpha:Number = 1; // getStyle("backgroundAlpha");
        graphics.clear();
        
        // Background

        drawRoundRect
        (
            0, 0, unscaledWidth, unscaledHeight, 
            50, // {tl: cornerRadius, tr: cornerRadius, bl: cornerRadius, br: 0}, 
            0xff0000, 0.5 // backgroundColor, backgroundAlpha
        );
        
        // Shadow

        if (!dropShadow)
        dropShadow = new RectangularDropShadow();
        
        dropShadow.distance = 8;
        dropShadow.angle = 45;
        dropShadow.color = 0;
        dropShadow.alpha = 0.4;
        dropShadow.tlRadius = 0;
        dropShadow.trRadius = cornerRadius;
        dropShadow.blRadius = cornerRadius;
        dropShadow.brRadius = 0;
        
        //dropShadow.drawShadow(graphics, 0, 0, unscaledWidth, unscaledHeight);
    }

}