Jul 14 2008

Flex: Dynamic controls

Sometimes you can’t predict exactly what controls you’ll need on a form and after the program starts you’ll have to add more. I can’t think of any examples of this offhand, but I know I’ve been in that spot before. With that in mind I looked up how to do it in Flex and wrote this tutorial kind of thing.

First you’ll need to import the necessary object for the control you’d like to create. In the example I’m using a button, so I need to import the mx.controls.Button object. Then you’ll need to declare a variable to use when creating the new control. It doesn’t have to be a global variable, just be aware that local variable aren’t available when the function ends leaving you without an easy means to reach the control in script. To make things easier, I’ll be using a global variable to create the button in.
import mx.controls.Button;
public var gbtnNew:Button = null;

To actually create the button we need to first construct the button object. Then we can set any properties that are needed; such as the caption or X and Y coordinates. I’m only going to set the caption for now.
gbtnNew = new Button();
gbtnNew.label = "Created in Script";

Once your button has been created and all the essential values are set, we need to add it to a visible container. All containers have an addChild() method which will add controls to that container. Any panel or other visible container will work, I’m not bothering with those in this example; instead I’ll use the this keyword to add it to the main application window. The addChild() method takes one parameter, the object to add, in this case the button.
this.addChild(gbtnNew);

After that command runs your new control will be visible and the user can interact with it. However, the control won’t do much good since there aren’t any event handlers assigned to it. The control objects all have a addEventListener() method which will let us set the handler functions at run time. The function takes two parameters, the first is the event and the second is the function name.
gbtnNew.addEventListener(MouseEvent.CLICK, ButtonClick);
I’m assigning the mouse click event handler, which requires importing the flash.events.MouseEvent object. Unlike setting the callback in the XML tag for the control you can only specify the name of the function, you can’t specify the parameters to pass to the function. Your event handling function must accept the event variable, and nothing else.
private function ButtonClick(event:MouseEvent): void

Once we’re done with the control we can remove it using the removeChild() method of the container. Like the addChild() method, removeChild() takes a single parameter which is the object to remove.
this.removeChild(gbtnNew);

To wrap all this into an example here is the source code for this Flex example:








There is a button created in the XML, which its clicked it will create and show a second button. There is a check to ensure that only one button is created. If you click the dynamically created button it will change caption, then remove itself. Nothing fancy, but it should show off those functions.

Leave a Reply

© 2007 Mindlence