Action Script 3 - Events between Spark and Custom Components - actionscript-3

Question

We are building an interface for a game.
The interface has a tabbed menu at the bottom of the screen, with each tab displaying different aspects of an object (called a node).
When you click on one of these parts, it becomes the focus, and we download it's details in XML, including all it's sub-nodes and parent nodes and then update the tab display accordingly, or at least that's what we'd like to happen.
What we have:
MainInterface.mxml
<s:Application...
<fx:Script>
<![CDATA[
public var currentNode:Node = new Node();
protected function selectNodeHandler(event:Event):void
{
loader = new URLLoader(new URLRequest(ourWebSite + event.target.id + ".xml"))
//the xmlDownloaded function below is what changes the contents of currentNode
loader.addEventListener(Event.COMPLETE, xmlDownloaded);
...
<s:SkinnableContainer id="dashBoard"..
<mx:TabNavigator...
<s:NavigatorContent...
<s:SkinnableDataContainer ...
dataProvider="{currentNode.children}"
itemRenderer="renderers.NodeRenderer">
Node.as (valueObjects.Node)
...
[Bindable] public var id:String;
[Bindable] public var name:String;
[Bindable] public var children:ArrayCollection = new ArrayCollection();
[Bindable] public var parents:ArrayCollection = new ArrayCollection();
...
NodeRenderer.mxml (renderers.NodeRenderer)
<s:ItemRenderer ... click="nodeRenderer_clickHandler(event)">
<fx:Script>
<![CDATA[
protected function nodeRenderer_clickHandler(event:MouseEvent):void
{
var eventObject:Event = new Event ("nodeSelected");
dispatchEvent(eventObject);
}
...
<s:Label text = "{data.name}"/>
We tried adding an event listener for "selectNode" to the dashBoard:SkinnableContainer you see see above, but it didn't seem to want to take. We suspect this is because dashBoard is from a spark component and the dispatcher for "selectNode" is on of our own custom components, but we weren't sure... in any case that's what the code assist seemed to indicate as we had to write it in by hand.
We're not sure how to pick up the Events in FlashBuilder 4's debugger, so we're having trouble working out where it's going wrong. Basically, when someone clicks on the label of a child or parent node (that is displayed by the itemRenderer), we want a URLRequest sent to our website, with the url specific to the node clicked on. We then want a URLLoader listening for the return which will update public variable 'currentNode' when xmlDownloaded is called by the loader.
If you could clarify how the click event should be dispatched, what should be listening for it then sending the URLRequest and where the URLLoader that is listening for the xml data to return should be that would solve our problems. Alternatively, if there is a better (more conventional) way to be doing what we're trying to do that would also help, as we're relatively new to actionscript and flex.

Answer 1

protected function selectNodeHandler(url:String):void
{
loader = new URLLoader(new URLRequest(url));
//consider identifying the loader, for instance
loader.name = url; // you could also pass a second parameter
//to the function and assign it to the name property of the loader.
//the xmlDownloaded function below is what changes the contents of currentNode
loader.addEventListener(Event.COMPLETE, xmlDownloaded);
}
protected function nodeRenderer_clickHandler(event:MouseEvent):void
{
var url:String = ourWebSite + event.currentTarget.id + ".xml";
selectNodeHandler( url );
}
protected function xmlDownloaded( event:Event ):void
{
//identify the target here with the name property
var id:String = event.target.name;
}