Loop Through Forms Dynamically In Flex

APPLICATION – SOURCE Long time no tech talk…. Alright so one of the recent things we had to do at cfwebtools was create an application for a client, where they had total control over all of these form fields… they essentially want to be able to create any form, for anything, and be able to save the data… this is a real simple solution in coldfusion because everything is server side, and forms arent as complicated in html… what makes them complex in flex is the recursion of DisplayObjectContainers…

DisplayObject, DisplayObjectContainer

In flex you have the DisplayObject and DisplayObjectContainer. Your flex containers like panels, HBox, VBox, Canvas, etc… inherit from the the DisplayObjectContainer Class… this class can contain other DisplayObjects (IE. TextInputs) or it can contain other instances of the DisplayObjectContainer. To handle this dynamically takes a lot of planning. We’re gonna keep it relatively simple here… Mike from flexcoders.nl had a great post on dynamic forms, and he used binding to save to his data model… in his that worked out because he knew what form fields or types of form fields he was working with… what happens when you don’t? You don’t have any clue what the customer is going to do… you have to give them ways to do validation… and all sorts of things… it gets pretty nasty, but like I said we’ll try to keep it simple. Basically what you have to do to save the dynamic form field is associate an ID with it… For Example TextInput -ID -Label -text The text input already has an id associated with it, so we will use a different name… something like “custom_id”. We will now extend out TextInput to make our CustomTextInput
<?xml version=“1.0” encoding=“utf-8”?> <mx:TextInput xmlns:mx=“http://www.adobe.com/2006/mxml“>    <mx:Script>       <![CDATA[          [Bindable]          public var custom_id:Number = 0;                 ]]>    </mx:Script> </mx:TextInput>

Now we can use our as a tag, and give it an id…

We can create this form statically or dynamically, my example shows dynamically… in that dynamic loop, I add it to an array of form fields that I want to save… You could do this without an array of form fields… by looping over the containers using the method getChildAt() of the container… but that gets sooo complicated when not knowing the container… and getting into the recursive nature of the DisplayObjectContainer… So I just create an array, and loop through the array, it’s much quicker and I have more control… just remember that if you do the array, and you create your forms manually in mxml… you can use the creationComplete Method of each component to add it to the array… IE.

//use the following to add the form field to an array that //we will loop over when we save our data… private function addObjectToArray(formField:DisplayObject):void{ this.aFormFields.push(formField); } <CustomTextInput id=“firstName” custom_id=“12” creationComplete=“addObjectToArray(firstName)”/>

This can get long an ugly, but it’s a quick fix for what we are doing…

Saving the data to an array in flex

Here is the example of saving the data

Page 1 of 2 | Next page