Using Flex 3 Component without MXML - only AS3

08.11.2007 41169 5

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.

    import mx.core.Application;
    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 var UpState        : Class;
        public var OverState    : Class;
        public var DownState    : Class;
        public function Main()
            this.layout = "absolute";
            this.addEventListener(FlexEvent.CREATION_COMPLETE, handleComplete);
        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 -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


01.30.2008 at 09:42 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 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 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, 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.

02.18.2008 at 19:13 Adrian Gillette

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?

03.14.2008 at 19:44 MArcio

I create the following function :

package com.cerebrum.utils {
    import mx.controls.Alert;
    public class Result {
        public var IconDialogInformation:Class;
        public function Result(event:ResultEvent,MyObject:Object):void {
  "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?

04.21.2009 at 05:01 Mark

finally I found solution here:

06.28.2009 at 23:52 Herr Moose

A solution can be found here:
This code snippet gives you the basic set of Flex components for use with ActionScript only.

Write a comment