Using Flex 3 Component without MXML - only AS3

11.08.2007 40500 5

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

Commentaires

30.01.2008 à 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 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.

18.02.2008 à 19:13 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

14.03.2008 à 19:44 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?

21.04.2009 à 05:01 Mark

finally I found solution here:
groups.adobe.com/posts/e3...

28.06.2009 à 23:52 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.

Laisser un commentaire

http://
×