justRIA

Besides the full features Flex debugger, the trace() method is a useful way to inspect variables during debugging a Flex application: If you start a Flex application in Debug mode, trace() prints the value of the passed expression to consol.

Another way is to register a variable for permanent traceing. This way, the variable gets traced, each time it changes its value.

Based on the following TATRace component, you request tracing of a variable using a small piece of MXML. Suppose you’d like to trace a variable ‘traceableVariable’, then you just add [Bindable] in the line just before the declaration of the variable. This enables the variable to be referenced as ‘{traceableVariable}’.

Mark a variable as traceable

To trace each change of traceableVariable, add this element in your main MXML file

<ns1:TATrace x="0" y="0" width="0" height="0"
variable="{traceableVariable}"
infoString="describe traceableVariable here"
/>

Note, that you need to assing ‘{traceableVariable}’ to the attribute ‘variable’ of TATrace. This keeps TATrace informed, each time ‘traceableVariable’ changes. Furthermore, you need an informational text to ‘infoString’, which gets printed literally upon each changed of the traced variable.

TATrace MXML-component

TATrace is a very simple component. I created it as a subclass of Canvas, but this isn’t important at all. In this case, since Canvas is a visual component, TATrace is availale in FlexBuilder’s ‘Custom Components’ menu.

The component has two private variable, one is ‘_boundVariable’, which keeps a copy of the traced variable, and ‘_infoString’, which is the informational text mentioned above. For both private member variables, I defined a settter and getter. The setter for ‘variable’ traces the variable and updates its local copy.

Note the static member variable ‘_traceEnabled’. This is shared between all instances of TATrace. Using the setter ‘traceState’, it allows to globally enable or disable tracingt my means of TATrace.

To use the TATrace component, save this MXML as TATrace.xml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" creationComplete="initComponent();">

<mx:Script>
<![CDATA[

private var _boundVariable:Object;
private var _infoString:String;

// Statics are shared among all instances of the component [class]
static private var _traceEnabled:Boolean;

// Don't make us appear on the scene
public function initComponent():void {
this.visible = false;
}

// Keep a reference to the bound Variable
public function set variable( someVariable:Object ):void {
if ( true == _traceEnabled ) {
trace( _infoString + ' :: '  + someVariable );
_boundVariable = someVariable;
}
}

public function get variable( ):Object {
return _boundVariable;
}

// And keep a reference to the infostring
public function set infoString( someVariable:String ):void {
_infoString = someVariable;
}

public function get infoString( ):String {
return _infoString;
}

// Set the trace state
public function set traceSate( newState:Boolean ):void {
_traceEnabled = newState;
}

]]>
</mx:Script>
</mx:Canvas>

Give it a try and don’t forget to declare traceable variables as [Bindable].