How do I dynamically generate components?

[Tackle]

I couldn't think of a short describing topic title.
Please view the attached image.

What you can see is a very early basic mockup of an application I'm writing.
This application will connect to a locally stored database to get information such as what users are in the database.

Under the field called Item, there's 5 checkboxes with names. These 5 names are supposed to be in a database as well. The application should support adding users, which then should show up as individual checkboxes.

Right now they're just added manually.

How would you make this work? I don't know what format they should be in to begin with (as in Array, or ArrayCollection?).


When this is working, there another even larger issue; the DataGrid. As you can see, the names should appear as columns there as well. They will also appear inside the local database in a probably similar fashion. Do you think it's possible to make it work?

[drkstr]

Step 1, create a data model class.

Here is an example of what one may look like:

package pkg {

[Bindable]
public class UserModel extends EventDispatcher {

public var userName:String;

}
}

Your data model should "describe" the data retrieved from the server, and probably will be the same as what's stored in your DB.

Step 2, load the data and fill a data provider with instances of your model.

[Bindable]
private var _userDataCollection:ArrayCollection;

private function handleServerData(event:Event): void {
//pull data result (not shown)...
//assuming you loaded it via xml
var users:Array = [];
for each( var user:XML in result.children() {
var userModel:UserModel = new UserModel();
//assign data from result to your model
users.push(userModel);
}

_userDataCollection = new ArrayCollection(users);
}

Step 3, bind your data models to visual components that conceptualizes your data.

For instance, your check boxes could be a HorizontalList with an itemRenderer set to a CheckBox.

Here is more info on item renderers/editors: http://livedocs.adobe.com/flex/201/html/cellrenderer_072_01.html

Post back if you still need help.


Best Regards,
~Aaron