Using Flex 3 Component without MXML - only AS3 | Michal Romecki - Consulting and forming web developpement, haXe, AS3 et Flash

Using Flex 3 Component without MXML - only AS3

Posted on 08.11.2007 by filt3rek

This post is a complement to an old post Mon premier SWF9 gratos avec Flex SDK (in french).
When using MXML, a lot of initializations are made in background (Application, UIComponent ...)
This post is a sample AS3 code without any MXML that enables you using Flex Component in pure AS3, initializing manually Flex Application.

Main.as:

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
	{
		[Embed(source="../library/up.png")]
		public var UpState		: Class;
		[Embed(source="../library/over.png")]
		public var OverState	: Class;
		[Embed(source="../library/down.png")]
		public var DownState	: Class;

		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", 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.label = "labelBtn";
			addChild( button );
		}
	}
}

Compile it with mxmlc.exe, included freely in the Flex SDK:

mxmlc Main.as -o Main.swf

Now you can use all Flex Application properties with the component.
This sample is for the Flex Button, but you can now try to use anothers Flex Components.

Download Sample

Notes :

I use custom skin for the Flex Button (embeded assets) to display it. (haven't found yet how to use the default skin... :-( )
All default Flex components behaviour are handled thanks to quick and manual Application and Component initialization

Comments :

Posted on 01.30.2008 at 09h42 by Terry Corbet

Thank you so much for this example. I have looked everywhere for an example of how to use Flash Controls with the SDK and command-line compiler since my project cannot afford either Flash CS3 or Flex Builder 3. After much googling, you can find partial solutions to closely-related topics, but not a direct answer to the problem of being able to take advantage of components without buying into the development tools.

Yes, I know that this example says that it demonstrates how to use Flex Controls with only the mxmlc compiler, but in the case of Button, the fact is that it is just Flash componentry, and as you demonstrate, the prickly problem is dealing with the Theme/Skin characteristics of the Flash UI components. No one seems to know how to get it right, but you did.

So, I want to add this -- I have been able to use the Halo Skins in your example! The solution was to put some trace statements in the source code for mx.skins.halo.ButtonSkin.as. Finding what was causing a null exception, my first attempt was to supply the missing style attribute values by looking at the generated code from an mxml application compilation. I found _globalstyle.as and it looked like it was providing the global default values programatically for all UI widgets. Unfortunately, even after I copied the code into an initialization function in your Main.as, it did not fix the problem. So, I still don't know how I can reliably set all the necessary defaults up front. There is a recommendation to use a 'minmal' mxml file and put all the Actionscript in the CREATION_COMPLETE callback instead of sub-classing Application. That might get the job done, but where I have tested that 'minimal' approach in order to let all the setup of the framework take place, it seemed to create a really large swf file, so I like your approach much better.

Well, since setting the missing style values through a "global" style declaration, I just added the four missing values directly to your Button-specific style declaration, and lo and behold, I could then just use the Halo skins where I wanted to and create my own skins only where I had to.

Posted on 02.18.2008 at 19h13 by Adrian Gillette

Terry,

I would like to see how you fix for the style issue. Could you post the code you used to add the missing values to the style declaration?

Thanks,

Adrian

Posted on 03.14.2008 at 19h44 by MArcio

I create the following function

---------------------------------

package com.cerebrum.utils {

import mx.rpc.events.ResultEvent
import mx.controls.Alert;

public class Result {

[Embed("/assets/images/dialog-information.png"]
public var IconDialogInformation:Class;

public function Result(event:ResultEvent,MyObject:Object):void {
Alert.show("teste", "teste", 4, null, null, IconDialogInformation);
}

}

}

---------------------------------

I as follows

import Result;

Result(event, meuobjeto);

---------------------------------

Is presented in the following error flex builder

1137: Incorrect number of arguments. Expected no more than 1.

---------------------------------

How should I inform the function that actually has 2 parameters?

Posted on 04.21.2009 at 05h01 by Mark

finally I found solution here:

groups.adobe.com/posts/e3...

Posted on 06.28.2009 at 23h52 by Herr Moose

A solution can be found here:
ersatz.tv/2009/off-topic-...

This code snippet gives you the basic set of Flex components for use with ActionScript only.

Follow post's comments

var post = new mtt.Post(); post.previewComment( "Posted on [datetime] by [author]", "%m.%d.%Y à %Hh%M" );