Question

I hope someone can help me…..

i am trying to build a dynamic form for a questionnaire module. Building on some previous posts I am using the process similar to that in question “How to generate a form(<mx:form>) dynamically in flex?” i have managed to prove out the fact of extending the XML to include a calendar, combobox etc.

my problem is that now need to get the data from an ArrayCollection rather than from an xml file. I am looking to loop through the AC and where type = “text” render a textinput field, where a type =”calendar” render a Calendar etc etc.

my code so far just looking at a textinput field (and sorry for all the comments included 😉 is:-

   [Bindable]
  public var AC:ArrayCollection = new ArrayCollection( [
  {type:'text', direction:'horizontal', tooltip:'test tooltip', label:'my textbox label', id:'1'},
          {type:'text', direction:'horizontal', tooltip:'another tooltip', label:'another label', id:'2'}
     ]);



  private function init():void

  {     
      var form:Form = new Form();

          for each(var elements:String in AC)

   {  
                          switch( [e-mail]()) 
                            { 
                                  case "text": 

                   var fi:FormItem = new FormItem(); 
                       //   fi.toolTip = elements.tooltip.toString();
                                            //   fi.required = getglobalprofile.required.toString();
                                            //   fi.direction = getglobalprofileb[i].@direction;

                      var li:Label = new Label();
                                          //  li.text = getglobalprofileb[i].@label;
                                          // li.width = 100;

                      var ti:TextInput = new TextInput(); 
                                             ti.text = "test"; 
                                      ti.width = 200;

                       form.addChild(fi);
                       fi.addChild(li);
                       fi.addChild(ti);

             //         break; 
                            }
             }    

                    this.addChild( form); 
           }   

 ]]>
    </mx:Script>

 <!-- Data grid added just to check that AC getting data-->

 <mx:DataGrid id="profile" selectedIndex="1" dataProvider="{AC}" width="100%" height="50%"  />

     <mx:Form  id="form" name="form">

     </mx:Form>

if you are interested in the working xml version (rendering only) let me know and i will post this as well

Answer 1

I have found the answer to the first part of this problem of getting the form to render with a simple request to the DB using a RO call.

The next issue is how to get the form to save when i don’t “know” the field ID, how many there are or what type of field it is………

another post methinks!

hope this is of use to someone.

    [Bindable] public var getglobalprofileb:ArrayCollection;

    public function init(event:ResultEvent):void {
                getglobalprofileb = event.result as ArrayCollection;

        var form:Form = new Form();

          for each(var elements:Object in getglobalprofileb)

            {  
                    switch(elements.type.toString()) 
                            { 
                                case "text": 

                                            var fi:FormItem = new FormItem(); 
                                            fi.toolTip = elements.tooltip.toString();
                                            fi.required = elements.required;
                                            fi.direction = elements.direction;

                                            var li:Label = new Label();
                                            li.text = elements.label;
                                            li.width = 100;

                                            var ti:TextInput = new TextInput(); 
                                            ti.text = elements.default_text.toString();
                                            ti.width = 200;
                                            ti.id = elements.id;

                                            form.addChild(fi);
                                            fi.addChild(li);
                                            fi.addChild(ti);

                                               break; 
                                  case "int": 
                                  break;


                                case "textarea": 
                                            var fa:FormItem = new FormItem(); 
                                            fa.toolTip = elements.tooltip;
                                            fa.required = elements.required;
                                            fa.direction = elements.direction;

                                            var la:Label = new Label();
                                            la.text = elements.label;
                                            la.width = 100;

                                            var ta:TextArea = new TextArea(); 
                                            ta.text = elements.default_text;
                                            ta.id = elements.id;
                                            ta.width = 200;
                                            ta.height = 100;

                                            form.addChild(fa);
                                            fa.addChild(la);
                                            fa.addChild(ta);

                                               break; 
                                  case "int": 
                                  break; 


                                  case "DateField": 
                                            var fdf:FormItem = new FormItem(); 
                                            fdf.toolTip = elements.tooltip;
                                            fdf.required = elements.required;
                                            fdf.direction = elements.direction;

                                            var ldf:Label = new Label();
                                            ldf.text = elements.label;
                                            ldf.width = 100;

                                            var tdf:DateField = new DateField(); 
                                            tdf.formatString="DD/MM/YYYY";
                                            tdf.width = 200;
                                            tdf.id = elements.id;

                                            form.addChild(fdf);
                                            fdf.addChild(ldf);
                                            fdf.addChild(tdf);

                                               break; 
                                  case "int": 
                                  break; 


                                  case "combobox": 
                                            var fcb:FormItem = new FormItem(); 
                                            fcb.toolTip = elements.tooltip;
                                            fcb.required = elements.required;
                                            fcb.direction = elements.direction;

                                            var lcb:Label = new Label();
                                            lcb.text = elements.label;
                                            lcb.width = 100;

                                            var tcb:combobox = new ComboBox();
                                            tcb.id = elements.id;
                                            tcb.width = 200;


                                            var datas:String = elements.Datas;
                                            var arr:ArrayCollection = new ArrayCollection ( 
                                                            datas.split(",")  
                                                                   );

                                            tcb.dataProvider = arr ;

                                            form.addChild(fcb);
                                            fcb.addChild(lcb);
                                            fcb.addChild(tcb);

                                            break; 
                                  case "int": 
                                  break; 

                                  case "HSlider": 
                                            var fhs:FormItem = new FormItem(); 
                                            fhs.toolTip = elements.tooltip;
                                            fhs.required = elements.required;
                                            fhs.direction = elements.direction;

                                            var lhs:Label = new Label();
                                            lhs.text = elements.label;
                                            lhs.width = 100;

                                            var ths:HSlider = new HSlider(); 
                                            ths.tickInterval = 10;
                                            ths.liveDragging = true;
                                            ths.snapInterval = 1;
                                            ths.width = 200;
                                            ths.id = elements.id;

                                            form.addChild(fhs);
                                            fhs.addChild(lhs);
                                            fhs.addChild(ths);

                                           break; 
                                  case "int": 
                                  break; 


                                case "CheckBox": 
                                            var fchb:FormItem = new FormItem(); 
                                            fchb.toolTip = elements.tooltip;
                                            fchb.required = elements.required;
                                            fchb.direction = elements.direction;

                                            var lchb:Label = new Label();
                                            lchb.text = elements.label;
                                            lchb.width = 100;

                                            var tchb:CheckBox = new CheckBox (); 
                                            tchb.id = elements.id; 

                                            form.addChild(fchb);
                                            fchb.addChild(lchb);
                                            fchb.addChild(tchb);

                                            break; 
                                  case "int": 
                                  break; 


                                  case "NumericStepper": 
                                            var fns:FormItem = new FormItem(); 
                                            fns.toolTip = elements.tooltip;
                                            fns.required = elements.required;
                                            fns.direction = elements.direction;

                                            var lns:Label = new Label();
                                            lns.text = elements.label;
                                            lns.width = 100;

                                            var tns:NumericStepper = new NumericStepper (); 
                                            tns.id = elements.id; 

                                            form.addChild(fns);
                                            fns.addChild(lns);
                                            fns.addChild(tns);

                                            break; 
                                  case "int": 
                                  break; 


                                case "Richtext": 
                                            var frte:FormItem = new FormItem(); 
                                            frte.toolTip = elements.tooltip;
                                            frte.required = elements.required;
                                            frte.direction = elements.direction;

                                            var lrte:Label = new Label();
                                            lrte.text = elements.label;
                                            lrte.width = 100;

                                            var trte:RichTextEditor = new RichTextEditor (); 
                                            trte.width = 400;
                                            trte.id =  elements.id;


                                            form.addChild(frte);
                                            frte.addChild(lrte);
                                            frte.addChild(trte);

                                           break; 
                                  case "int": 
                                  break; 




                             }
                     }    

                    this.addChild( form);
                //  form.id = 'demographics';


                 }