Say hello to the Singleton MXML/AS3 hybrid!
Often times you might ask yourself when should I use a MXML file or an AS3 file? Well the absolutely most important thing to remember is they are the same thing. MXML gets compiled into an AS class before they are compiled into a usable SWF. Now often a misconception is you can only create a MXML file/class off an existing UI component – such as the Canvas or something. This is not true, you can actually create a MXML file off an existing or custom class, once your naming and name spaces are resolved of course. So now that we have established there really is no difference in the end between MXML and AS3, why even the decision? The reason being is there are many benefits or required usage even for both – or at least benefits of MXML and required usage of AS3 for functionality management.
So lets break this down:
MXML:
Pros: One of the biggest benefits of MXML is ease of use and expedited development. Its quick and easy to do lots – layout, data, whatever espescially when it has to do with the Adobe UI Component framework.
Cons: You cant handle much more advanced or dynamic user interaction or data manipulation with MXML on its own. Often limited to only the view/display. Also many design pattern implementation can not be leveraged with MXML alone.
- Point is not matter what you NEED AS3, and you can put it in a MXML document directly, linked, or through its class hierarchy.
AS3:
Pros: AS3 is the foundation for functionality and what is the core base for MXML. Its direct and powerful, and enables complex management and scoping such as the use of the Singleton pattern
Cons: The biggest down side when compared to MXML is effort and time. It takes much longer – or more code – to do many of the same operations that can be done in MXML than with AS3.
- AS3 is a vital part, but knowing that it has a valid counterpart in MXML that when used appropriately is key to not limiting yourself and taking true advantage of rapid development opportunities.
Ok so hopefully you get that AS3 and MXML both play a big part. So now the question is when to truly use them together, and think past the generic Canvas or Application MXML file with a script block. The generic approach just mentioned focuses on adding code to your view/display. Thats fine and dandy – useful too – but only a small piece of a much bigger pie. What about the opposite approach of wanting to use AS3 as the base for a model manager (data management/storage) and having MXML components be part of its contents? This way we can get best of both worlds! We can have our Model be a singleton for enhanced management and scope control, plus we can use MXML for generating – what would otherwise be, pain in the @$$ UI Components (in this case DataGridColumns) in just a few simple lines of MXML!!! Now thats sexy!
Ok, so how do we make this happen? Well the base is going to be a MXML file still, with a script block (my prefference with scrip blocks is to include the AS3 from an external file, so I am not mixing and matching different syntaxes/code. This could also be done with a code behind class extension. Where we start with a AS3 class in its entirety and then use our MXML file to extend it. Works similar but then makes Flash work a little harder since it has to manage 2 classes – still a cool pattern but little more overhear I assume. Anyways, our base MXML file will based off of the EventDispatcher (in essance extends it) to enable event dispatching automatically within our new Model. Then in the file I can create and MXML data structures or components I desire – being very careful to give them all ID’s as a good practice regardless. Then in my included AS3 file I can set up my getInstance() method and such to enable singleton based access. Now the biggest downside at the moment is since we are including this code into a MXML base we can not specify our constructor and also makes it a bit difficult to manage and additional tricks to enforce singleton – but that is largely due to issues in AS3 anyways with true singletons since private constructors aren’t allowed anyways. Once we have our getInstance(0 setup we are off to the races. We have an AS3 include and an MXML base accessible via singleton access and best of both worlds at our hands! Below is the code samples for this. These files are used to simply handle dynamic DataGridColumn configuration (add/remove).
______________________________
MXML:
<?xml version=”1.0″ encoding=”utf-8″?>
<events:EventDispatcher xmlns:events=”flash.events.*” xmlns=”*” xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script source=”_includes/_REDLogConfigModel.as”/>
<mx:DataGridColumn headerText=”Level” dataField=”level” width=”75″ id=”level_column”/>
<mx:DataGridColumn headerText=”Message” dataField=”msg” width=”200″ id=”msg_column”/>
<mx:DataGridColumn headerText=”Data” dataField=”debugObjName” width=”175″ id=”data_column”/>
<mx:DataGridColumn headerText=”Memory Utilization” labelFunction=”toKB” dataField=”memUtilization” width=”120″ id=”mem_column”/>
<mx:DataGridColumn headerText=”Timestamp” labelFunction=”toDateTime” dataField=”timeStamp” width=”220″ id=”time_column”/>
<mx:DataGridColumn headerText=”Translated” dataField=”debugObjXML” labelFunction=”checkIfTranslated” width=”75″ id=”translated_column”/>
<mx:DataGridColumn headerText=”Session ID” dataField=”redbugSessionID” width=”100″ id=”sessionID_column”/>
<mx:DataGridColumn headerText=”Application ID” dataField=”redbugAppID” width=”100″ id=”appID_column”/>
</events:EventDispatcher>
______________________________
AS:
//////////////////////////////////////////////////
//
// Copyright (C) 2007 RealEyes Media LLC.
//
//////////////////////////////////////////////////
import flash.events.EventDispatcher;
import mx.utils.ObjectUtil;
import mx.controls.DataGrid;
//————————————————
//DECLARATIONS
//————————————————
[Bindable]
public var showLevels:Boolean = true;
[Bindable]
public var showMsg:Boolean = true;
[Bindable]
public var showData:Boolean = true;
[Bindable]
public var showMem:Boolean = true;
[Bindable]
public var showTime:Boolean = true;
public var dgPointer:DataGrid;
private static var _instance:REDLogConfigModel;
//———————————————–
//INIT METHODS
//———————————————–
/**
* Since this is a Singleton class, this is how we access the instance.
*/
public static function getInstance():REDLogConfigModel
{
if (_instance == null)
{
_instance = new REDLogConfigModel();
//init();
}
return _instance;
}
/* private function init():void
{
} */
//———————————————————–
//CONTROL METHODS
//———————————————————–
public function toKB(p_item:Object,p_column:DataGridColumn):String
{
var returnVar:String;
returnVar = String(Number(p_item.memUtilization) / 1000) + ‘ KB’;
return returnVar;
}
public function toDateTime(p_item:Object,p_column:DataGridColumn):String
{
var tempDate:Date = new Date();
var returnVar:String;
tempDate.time = p_item.timeStamp as Number;
returnVar = tempDate.toUTCString();
return returnVar;
}
public function updateDGColumns():void
{
var columns:Array = new Array();
if(showLevels)
{
columns.push(level_column);
}
if(showMsg)
{
columns.push(msg_column);
}
if(showData)
{
columns.push(data_column);
}
if(showMem)
{
columns.push(mem_column);
}
if(showTime)
{
columns.push(time_column);
}
dgPointer.columns = columns;
}
Well Looky there – I guess I am a speaker at MAX. Fourth year running!