DIGG IT! 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 :)
And what about throwing an exception from the constructor if someone decides to use it like
<mylib:SettingsDialog>
slight typo? Variable declaration should read....
private static var singleton:SettingsDialog;
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 :)
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.
"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.
"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.
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?
Does this idea work when the modal property of addPopUp is false? I am having issues when modal = false.
Hey,
How can I make this mxml component based on some other component?
Nishant
Hey,
How can a singleton mxml component extend some other components (a viewstack for instance)
Nishant
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;