We have been busy on a project for a client who wanted us to use flex . We knew nothing of flex so its been a bit of a learning curve.

During the last few week I learnt a lot and will over time post some of my learning as blog postings. I just had to post this solution to a problem we had in the hopes it helps others. It took a good couple of hours to work this out. If there is an easier way let me know, as I said I have just started with flex.

Flex components created dynamically at runtime

The app calls for a form to be created dynamically at runtime. The number,type and content of the form elements is also only know at run time. So you create your components with Actionscript and then add them to the parent container. In the code below I have left out iterating over the data and determining the type of component to create.

var textInput:TextInput = new TextInput();
textInput.id=item.modelns::name.text();
parent.addChild(textInput);

So we don't know how many of these there are, as it is dependent on the data returned form the web service. One thing we do have is the components id. In components designed using mxml you can refer to components by their id. E.G.

<mx:TextInput id="txtUsername" />

can be refered to in code like "txtUsername.text"

This makes access easy. (Basically when the flex compiler compiles your mxml file it create variables for each component with the id as the variable name.) Because ours components are declared at runtime we don't have this easy access mechanism available to us. According to some solutions I read, if you had the string representation for the component name, it's id or variable name, as a string you could go

this["txtUsername"]

to reference the component. But this only works if the component is known at compile time. Basically you are refering to the variable created by the compiler. BTW They refer to the Id as the component name when using this syntax. I suppose because it is the variable "name" created by the compiler but it can be confusing. At first I thought there needed to be another attribute on the component call "name".

Another solution offered was to create a variable for the component with component scope so you could refer to it later. Basically this is what the compiler does for components created with mxml.

Once again this won't work for component that you don't know will exist at compile time. In vain I looked for an API function such as getElementById. The closest I came was getChildByName but this seemed to refer to some objects that were not in the flex control

The solution - use Dictionary Object

Eventually I decided to do the following:

1. Create a Dictionary object with component scope,
2. Every time a dynamic component was created place it in the dictionary with its "id" as the key,
3. Retrieve the object form the dictionary when needed using the string representation of its "id"

private var componentBag:Dictionary; ....

private function createComponent():void{

var textInput:TextInput = new TextInput();
textInput.id=item.modelns::name.text();
parent.addChild(textInput);
componentBag[textInput.id]=textInput;

.....

=componentBag[item.modelns::name.text()].text;