6 Replies Latest reply on Apr 24, 2009 2:47 AM by Cesare Rocchi

    Dynamic forms in AIR/Flex

    p.jacobi

      OK, this is another of those "Is AIR the right tool for the job" questions. And I have zero previous exposure to Flash/Flex, just doing a fast forward through all available information, to reach an assessment.

       

      The app in question is mainly a vanilla database client (server component exists and has a ReSToid HTTP interface). It involves task lists, forms, all the ususal stuff and is glueing together a bunch of other (pre-existing) apps on the client  which are to be spawned from the glue app.

       

      In contrast to the legacy app which is to be replaced, the database structure shall be customizable per customer site and consequently have custom edit forms.

       

      Now, how to implement custom, dynamic forms in AIR/Flex? It seems logical to store the forms together with custom table in the database, but in which format? It is impossible to just store MXML forms, as Flex is a compiled language and I didn't find a hook to pull in extra MXML from an external source.

       

      Is there a Flex component turning an XML description of a form into a form on the screen, as mx:FlexNativeMenu can turn XML into a menu?

       

      Or am I looking into the wrong direction? It seems an AIR/Ajax soulution would be able to just pull the custom form in HTML from an external source and use it. But AIR/Flex is looking to be the friendlier and more productive environment....

        • 1. Re: Dynamic forms in AIR/Flex
          Cesare Rocchi Level 2

          You can dynamically compose a form at runtime via as3.

          Here is a quick example.

           

          HTH.

           

          ps: afaik there is no component which automatically builds a form from xml.

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">

           

          <mx:Script>

          <![CDATA[

           

               import mx.controls.TextInput;

               import mx.containers.FormItem;

           

           

               private function init():void {

                    var formItem:FormItem = new FormItem();

                    formItem.label = "FormItem1";

           

                    var textInput:TextInput = new  TextInput();

                    formItem.addChild(textInput);

           

                    myForm.addChild(formItem);

               }

          ]]>

          </mx:Script>

           

           

               <mx:Form id="myForm">

                    <mx:FormHeading label="My Form"/>

               </mx:Form>

           

          </mx:Application>

          • 2. Re: Dynamic forms in AIR/Flex
            p.jacobi Level 1

            Hi Cesare,  All,

             

             

            Oh, yes, I'm aware that I can create UI components at runtime using ActionScript. But AFAIK I cannot store the ActionScript source code in my database to create forms matching the customitzed database tables and execute it at run-time. Also without any measures taken, the ActionScript gets rather verbose.

             

            So I'm very much on my own defining the data format describing the form in the database and writing the ActionScript which turns the description into UI components?! For me it still sounds like something which must have been done already (several times!)

             

             

            Regards,

            Peter

            • 3. Re: Dynamic forms in AIR/Flex
              p.jacobi Level 1

              Sorry for replying to self (again), but I've found a partial, but rather elegant, solution for my problem and perhaps somebody is interested.

               

              Repeater!

               

              The basic ingredients are right here in http://www.adobe.com/devnet/flex/quickstart/using_the_repeater/ and I'm feeling somewhat stupid to not have it noticed earlier.Several bloggers have explained this approch, but all examples only cover creating an homogenous array of UI elements.

               

              So the missing ingredient seems to be using the repeat event and creating different UI elements from the AS code. Marco Casario blogged a bit about this, but I didn't find a complete worked out example anywhere.

               

               

              Peter

              • 4. Re: Dynamic forms in AIR/Flex
                Cesare Rocchi Level 2

                The code I provided above is a decent hint to the code for generating a UI, which I assume is more difficult than parsing xml

                (since there are tons of blog posts about that).

                 

                Of course, if your UI is heterogeneous you need some 'if' to match the graphical widget to the corresponding

                xml.

                 

                Out of curiosity ... how do you plan to manage the layout? are your ui elements horizontally/vertically arranged?

                Out of curiosity 2 ... isn't mxml (flex markup language) an xml based language? isn't it enough for your goals?

                 

                HTH.

                • 5. Re: Dynamic forms in AIR/Flex
                  Michael Borbor Level 4

                  You could also use the Prana Framework, sometimes the repeater isn't the best option because it's CPU intesive and consuming.

                  • 6. Re: Dynamic forms in AIR/Flex
                    Cesare Rocchi Level 2

                    This article can be of help (though focuses on Objects and not UI elements):

                     

                         http://ria.dzone.com/news/automatic-serialization

                     

                    HTH