Ted On Flash: Singleton in MXML

Singleton in MXML

DIGG IT! 16 Comments Published Wednesday, January 03, 2007 at 10:19 PM .

I am in Edmonton Canada this week working with Grant Skinner and his amazing team teaching them Flex. Today we talked a lot about MXML and AS3 Classes and when to use each. The thing is that they are 100% the same. MXML is translated into an AS3 class during the compilation process. There is really no different between MXML and AS3 Classes and they can be used interchangeably. No really! To show this I wrote a singleton in MXML. I have found this very handy for Settings Dialogs and Pop-ups where you want 1 and only 1 instance.

So here it goes:

<SettingsDialog xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>

        private static var singleton:SettingDialog;

        public static function getInstance():SettingsDialog
        {
            if ( SettingsDialog.singleton )
            {
                return SettingsDialog.singleton;
            }else{
                SettingsDialog.singleton = new SettingsDialog();
                return SettingsDialog.singleton;
            }            
        }

    </mx:Script>

    <mx:TextInput id="name" width="100">
    <mx:TextInput id="age" width="100">
    <mx:TextInput id="rank" width="100">
    <mx:TextInput id="serial" width="100">
    <mx:ColorPicker id="uiColor" >

<SettingsDialog>


Usage:
//call popupmanager with getInstance
mx.managers.PopUpManager.addPopUp( SettingsDialog.getInstance() , basePanel , true );

An AS3 Class and an MXML file are identical. Anything you can do in a Class you can do in MXML and vice versa. Plus this way your Singletons can have a UI too. Plus this way your SettingsDialog will maintain state naturally and you will never need to persist a thing. Anytime you pull up the settings dialog, it will be in the state you left it in last time, plus you can just get an instance and change the data in it without being on the DisplayList.

Cheers,

Ted :)

16 Responses to “Singleton in MXML”

# Yakov January 4, 2007 3:17 AM

And what about throwing an exception from the constructor if someone decides to use it like
<mylib:SettingsDialog>
# creacog January 4, 2007 3:51 AM

slight typo? Variable declaration should read....

private static var singleton:SettingsDialog;
# Ted Patrick January 4, 2007 6:52 AM

Yakov,

Yeah there are some holes but mostly these are related to private constructors in AS3 Classes. I think there might be another way to do this with Proxy that would provide much more grainular behavior and allow control of the constructor calls.

The exception would be great especially to avoid use as MXML component directly. In the constructor you could compare 'this' to the static 'singleton' property and then throw.

Hmmmm singleton's leveraging Proxy...

Cheers,

Ted :)
# Phillip January 4, 2007 9:20 AM

As a flash person wanting to get what I can out of Flex, what I don't get is exactly why (if they're the same) would I want to wrap my AS3 into MXML? I mean, are you thinking it's because I'll also want other benefits available in the Flex framework?

I'm not trying to be (my normal) pain here... I'm sincerly trying to figure out how to fit flex into my typical projects: namely, one off custom apps that use plenty of programming. It's just what I DON'T need is the built-in componenets for example. What I do want is to be in the FlexBuilder environment... and to be efficient with AS3.

P.S. every time I leave a comment my first attempt at "word verification" is rejected--I'm not that consistently off.
# Tink August 20, 2007 5:22 PM

"Anything you can do in a Class you can do in MXML and vice versa."

We can't instantiate a singleton with MXML. Because Flex requires the main class to be MXML you end up with a mix of MXML or AS here when creating things like managers that need to sit on top of the stages displayList.
# Zack Jordan April 11, 2008 11:28 AM

"We can't instantiate a singleton with MXML."

I'd disagree with that- I'm working on a project right now in which I instantiated a Singleton with MXML. It's a little hacky, but hey.

Here's a little writeup.
# C.P. Achter June 8, 2008 5:19 AM

The code is to be written in a MXML file, is it?

Is it a MXML Component or a MXML Module?

I don't understand where to put the tag

SettingsDialog xmlns:mx="http://www.adobe.com/2006/mxml"

because MXML Components or Modules will already start with other first line tags.

You understand my problem?
# Anonymous October 20, 2008 3:50 PM

Does this idea work when the modal property of addPopUp is false? I am having issues when modal = false.
# Nishant Kyal November 1, 2008 12:50 PM

Hey,

How can I make this mxml component based on some other component?

Nishant
# Nishant November 1, 2008 12:51 PM

Hey,

How can a singleton mxml component extend some other components (a viewstack for instance)

Nishant
# Anonymous November 11, 2008 6:48 PM

Nishant;

Your component is extending something just by the fact you are building a custom component, whether it is extending Canvas, Tile, TitleWindow, etc.

Also, don't forget the parameter "implements" within your MXML component tag for interfacing.

As in: mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.controls.listClasses.IListItemRenderer"

Enjoy;
# Nishant January 3, 2009 3:29 AM

Lemme rephrase, how can I make an MXML component that is based on Canvas and is singleton?
# Chinnu January 28, 2009 9:23 PM

I am ram working in flex framework.. i had a problem to working with image in flex. i need to change the image border color on mouse rollover, it's more over like to select that picture...

Kindly provide any one to my problem..
u may contact me : emails4ram@gmail.com
Thanx in Advance...
# sinstone March 8, 2009 9:12 PM

Ted, why is it that my embedded components are all coming out null after my singleton is created? my creationPolicy is set to all and still the nested components are not getting created.
any ideas? thanks!
# Maoan ZHOU August 11, 2009 1:46 AM

with PopUp is OK, because every time, you only display one instance.
But I have a question, how can I do this if I want to display it in several places. For example:
I have 2 VBox.

var vb1: VBox = new VBox();
var vb2: VBox = new VBox();
vb1.addChild(SettingDialog.getInstance() );
vb2.addChild(SettingDialog.getInstance() );

The result is Flex only displays the component is vb2, not in vb1.
I thinks it's because when vb2 add the same instance, it removes the relation of this instance from vb1.

Do you have any idea how to solve this problem ?
# Xyrer February 26, 2010 3:19 PM

After trying it, copy-paste doesn't work either, it says:
Could not resolve to a component implementation. Singleton.mxml line 1.

event after solving some typos.

So, how do I implement this?

Ted Patrick - Demos & MAX @ Adobe Systems

Note: This is the personal blog of Ted Patrick. The opinions and statements voiced here are my own.

Singleton in MXML

16 Responses to “Singleton in MXML”

Where to find me:

Latest

Lists

Links

Jobs

Archives