Examples: Styling a button

Examples: Styling a button

Example 1: Default styles

This example shows the most basic way to create a Button. NOTE: Instead of using the ControlFactory class, you could also simply use "new Button()". However, using the ControlFactory class provides some speed optimizations when using custom styles and stylesheets.

package
{
	import flash.display.Sprite;
	import razor.controls.Button;
	import razor.core.ControlFactory;
	import razor.skins.plastic.PlasticStyleSheet;
	import razor.skins.Settings;
	
	public class Main extends flash.display.Sprite
	{
		public function Main():void
		{
			Settings.setSkin(new PlasticStyleSheet());
			
			var b:Button;
			b = ControlFactory.create(Button) as Button;
			addChild(b);
			b.setSize(200,28);
			b.move(10,10);
			b.label = "Sample Button";
		}
	}
}

Example 2: Using a preset style

This example shows how to modify Example 1 to use one of the packaged preset styles. In this case, "Sharp".

package
{
	import flash.display.Sprite;
	import razor.controls.Button;
	import razor.core.ControlFactory;
	import razor.skins.plastic.PlasticStyleSheet;
	import razor.skins.plastic.presets.Sharp;
	import razor.skins.Settings;
	
	public class Main extends flash.display.Sprite
	{
		public function Main():void
		{
                        // We have added a new preset to be applied to the whole skin here:
			Settings.setSkin(new PlasticStyleSheet(), new Sharp());
			
			var b:Button;
			b = ControlFactory.create(Button) as Button;
			addChild(b);
			b.setSize(200,28);
			b.move(10,10);
			b.label = "Sample Button";
		}
	}
}

Example 3: Applying a style to a single Button instance at runtime

The mergeStyle method on all StyledContainers takes either a Style instance, or an Object with style parameters, and applies those parameters to a component at runtime. Note that this is potentially computationally expensive since the component is redrawn each time. A better method would be to set the style beforehand using stylesheets, as shown in later examples.

package
{
	import flash.display.Sprite;
	import razor.controls.Button;
	import razor.core.ControlFactory;
	import razor.skins.plastic.PlasticStyleSheet;
	import razor.skins.plastic.presets.Sharp;
	import razor.skins.Settings;
	import razor.skins.Style;
	
	public class Main extends flash.display.Sprite
	{
		public function Main():void
		{
			Settings.setSkin(new PlasticStyleSheet(), new Sharp());
			
			var b:Button;
			b = ControlFactory.create(Button) as Button;
			addChild(b);
			b.setSize(200,28);
			b.move(10,10);
			b.label = "Sample Button";
			
			b.mergeStyle({roundedness: 20});
		}
	}
}

Example 4: Defining a custom StyleSheet and setting a rule

Here we expand our example further by creating a style class called "pinkButton", and assigning the styleClass name to our button.

package
{
	import flash.display.Sprite;
	import razor.controls.Button;
	import razor.core.ControlFactory;
	import razor.skins.plastic.PlasticStyleSheet;
	import razor.skins.plastic.presets.Sharp;
	import razor.skins.Settings;
	import razor.skins.Style;
	import razor.skins.StyleSheet;
	
	public class Main extends flash.display.Sprite
	{
		public function Main():void
		{
			Settings.setSkin(new PlasticStyleSheet(), new Sharp());
			
                        // First create a dynamic StyleSheet. You can pass style parameters into the constructor.
			var myStyleSheet:StyleSheet = new StyleSheet( { baseColor: 0xff6688 } );

                        // Then add the rule to the root stylesheet. The Settings class has a static link to the
                        // default rootStyleSheet. You can choose your own unique name.
			Settings.rootStyleSheet.addRule("pinkButton", myStyleSheet);
			
                        // Create the button as normal
			var b:Button;
			b = ControlFactory.create(Button) as Button;
			addChild(b);
			b.setSize(200,28);
			b.move(10,10);
			b.label = "Sample Button";
			
                        // Set the styleClass of the button to the rule you added:
			b.styleClass = "pinkButton";
		}
	}
}

You can also use the ControlFactory class to initialize the component with your styleClass:

        b = ControlFactory.create(Button, "pinkButton") as Button;

Example 5: Skinning the whole button with bitmaps

The ButtonStyles class (in the razor.skins.stylesheets package) has helper code to shorten this process. We're going to modify example 4 to use the "pinkButton" rule, but this time the rule will contain bitmaps for all 4 button states (up, over, down, disabled).

package
{
	import flash.display.Sprite;
	import razor.controls.Button;
	import razor.core.ControlFactory;
	import razor.skins.plastic.PlasticStyleSheet;
	import razor.skins.plastic.presets.Sharp;
	import razor.skins.Settings;
	import razor.skins.Style;
	import razor.skins.StyleSheet;
	import razor.skins.stylesheets.ButtonStyles;
	
	public class Main extends flash.display.Sprite
	{
                // Embed our assets
		[Embed(source="assets/pink_button_up.png")]
		private var pinkButton_up:Class;
		[Embed(source="assets/pink_button_over.png")]
		private var pinkButton_over:Class;
		[Embed(source="assets/pink_button_down.png")]
		private var pinkButton_down:Class;
		[Embed(source="assets/pink_button_disabled.png")]
		private var pinkButton_disabled:Class;
		
		public function Main():void
		{
			Settings.setSkin(new PlasticStyleSheet(), new Sharp());
			
			var myStyleSheet:StyleSheet =
                            new ButtonStyles(pinkButton_up, pinkButton_over, pinkButton_down, pinkButton_disabled, [5, 5, 5, 5]);

			Settings.rootStyleSheet.addRule("pinkButton", myStyleSheet);
			
			var b:Button;
			b = ControlFactory.create(Button, "pinkButton") as Button;
			addChild(b);
			b.setSize(200,28);
			b.move(10,10);
			b.label = "Sample Button";
		}
	}
}

The optional fifth parameter of the ButtonStyles constructor is a scaleNine array, consisting of [left, top, right, bottom] margins for slicing up the bitmaps.

Example 6: Using externally loaded bitmaps

The framework will try to automatically detect the type of image you are trying to apply to a button when using this method. Which means you could also use a String for each of the parameters in the last example. This String could be the name of a class or a url to be loaded. If the image load fails, you will get an error traced in the console, and a blank skin will be used for that particular state.

Bitmaps will be cached using the AssetCache class, so they will only be loaded the first time they are used.

If you are loading external assets, for now it is a good idea to use the AssetCache class to preload all your skin elements before showing the user interface. You can get the default instance of the AssetCache class from the Settings class:

Settings.assets

You can add your images to a queue to be loaded in order.

var cache:AssetCache = Settings.assets;
cache.addEventListener(AssetCache.E_QUEUE_COMPLETE, onAssetsLoaded);
cache.getAsset("assets/img1.png");
cache.getAsset("assets/img2.png");
cache.getAsset("assets/img3.png");

This process will be automated with a preloader in a future version of the framework.

Example 7: Skinning all Buttons

This example can be applied to other controls too. Basically, we are going to do the same as Example 5, except our rule is going to be called "Button", and we are going to append a new StyleSheet instead of trying to overwrite the default styles for Button.

package
{
	import flash.display.Sprite;
	import razor.controls.Button;
	import razor.core.ControlFactory;
	import razor.skins.plastic.PlasticStyleSheet;
	import razor.skins.plastic.presets.Sharp;
	import razor.skins.Settings;
	import razor.skins.Style;
	import razor.skins.StyleSheet;
	import razor.skins.stylesheets.ButtonStyles;
	
	public class Main extends flash.display.Sprite
	{
		[Embed(source="assets/pink_button_up.png")]
		private var pinkButton_up:Class;
		[Embed(source="assets/pink_button_over.png")]
		private var pinkButton_over:Class;
		[Embed(source="assets/pink_button_down.png")]
		private var pinkButton_down:Class;
		[Embed(source="assets/pink_button_disabled.png")]
		private var pinkButton_disabled:Class;
		
		public function Main():void
		{
			Settings.setSkin(new PlasticStyleSheet(), new Sharp());

			var myButtonStyles:StyleSheet = 
                            new ButtonStyles(pinkButton_up, pinkButton_over, pinkButton_down, pinkButton_disabled, [5, 5, 5, 5]);

			var myCustomStyles:StyleSheet = new StyleSheet();
			myCustomStyles.addRule("Button", myButtonStyles);
			// myCustomStyles.addRule("Scrollbar", myScrollBarStyles);
			// myCustomStyles.addRule("bluePanel", myBluePanelStyles);
			// etc...
			
                        // Append our custom stylesheet to the root stylesheet
			Settings.rootStyleSheet.appendStyleSheet(myCustomStyles);
			
			var b:Button;
			b = ControlFactory.create(Button) as Button;
			addChild(b);
			b.setSize(200,28);
			b.move(10,10);
			b.label = "Sample Button";
		}
	}
}

Creating a skin

You can construct a set of StyleSheets to represent a whole skin. Take a look at the PlasticStyleSheet class and follow the same convention. In a future (soon!) version of the framework, a CSS parser is planned in order to simplify this whole process into a flat CSS file.

Wiki Navigation