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

//please dont copy and paste, refer to the “source” at the top or bottom.
private function saveEvent(event:Event):void{
var i:int;
var tempAFormIDS:Array = new Array();
var tempAFormValues:Array = new Array();
var tempIDList:String;
for (i=0; i< aFormFields.length; i++){
tempAFormIDS.push(aFormFields[i][‘custom_id’]);
tempAFormValues.push(aFormFields[i][‘text’]);
}
tempIDList = tempAFormIDS.toString();
}

Now check out the example, and click save, you will see a comma separated list, that you could send to the server, and loop through and put into a cross reference table… mapping the id to some unknown association of an input type in la la land… and you now have filled your form dynamically, and gotten your new dynamic data back to the server…

Warning, the following links are the same as the ones at the top:

APPLICATION – SOURCE