How to reference Flex elements added during runtime?

Question

This feels like a newbie question, so brace yourself.

I am having difficulty getting a reference to elements added after compile-time using the 'id' property. I have seen a few forum topics suggesting that this isn't possible, and that getting a reference to elements added this way is trickier, but never just exactly what that trick is. This code throws a fun little: Error: uncaught exception: Error calling method on NPObject! [plugin exception: "ReferenceError: Error #1069: Property canvas_tentpoles_0 not found on SGraph and there is no default value."].

public function calledAfterInit(graph_values:Array):void
{
 for(var i:int=0; i<graph_values.length; i++) {
  var cdc:CartesianDataCanvas = new CartesianDataCanvas();
  cdc.id = "canvas_tentpoles_"+i;
  cdc.includeInRanges = false;
  cdc.visible = false;
  Areachart.annotationElements = Areachart.annotationElements.concat(cdc);
  // [...do stuff...]
 }
 // [...later...]
 for(var j:int=0; j<graph_values.length; j++) {
  drawOnCanvas(j);
 }
}

private function drawOnCanvas(index:int):void {
 var canvas:CartesianDataCanvas = this["canvas_tentpoles_"+index]; // ← Error likely from here
 canvas.lineStyle(1);
 canvas.moveTo(10,10);
 canvas.lineTo(10,20);
 // [...etc...]
}

I'd like to not have to pre-add any more <mx:CartesianDataCanvas> tags than I'll need, and I'll only need as many as graph_values.length. Could someone kindly show me where I'm going wrong?

Answer 1

this["objects_id"] and this.objects_id syntax works only when "objects_id" is an instance variable of the class corresponding to this object. When you declare <CartesianDataCanvas id="myCdc"/> in an mxml file (say CustomCanvas.mxml that has <mx:Canvas> as it's root tag), the Flex compiler generates a class by the name CustomCanvas that extends mx.Canvas and adds a public variable myCdc of type CartesianDataCanvas to it. This is why you are able to access it with this.myCdc. But when you assign a value to the id property of an object created at run time, no variable is added to the class and hence you cannot access it with this.id syntax.

A simple workaround is to declare an array, store the objects in that array and retrieve elements later as required.

private var tentPoles:Array = [];
public function calledAfterInit(graph_values:Array):void {
 for(var i:int=0; i<graph_values.length; i++) {
  var cdc:CartesianDataCanvas = new CartesianDataCanvas();
  tentPoles.push(cdc);
  // ...do stuff...
 }
 // [...later...]
 for(var j:int=0; j<graph_values.length; j++) {
  drawOnCanvas(j);
 }
}

private function drawOnCanvas(index:int):void {
 //read from the array and cast it appropriately
 var canvas:CartesianDataCanvas = CartesianDataCanvas(tentPoles[j]);
 canvas.graphics.lineStyle(1);
 canvas.graphics.moveTo(10,10);
 canvas.graphics.lineTo(10,20);
 // [...etc...]
}

Answer 2

If you set name as well as id, you should be able to use Container.getChildByName().