3 Replies Latest reply on Jun 2, 2010 3:42 PM by rtalton

    Using an ArrayCollection of a Class in form fields

    mumcs01 Level 1

      So I've seen loads of examples of this with datagrids, But I'm looking for somoe advice to following a proper path to perform the following. Any advice would be great to help me minimize my experienting to get this right.

       

      I have a simple Class I made with 10 or so different properties......

       

      I have an arraycollection of data of the type of the class created above. ITs populated with data from an httpservice onload.

       

      In FLEX, I have a form which allows the user to see and edit via textboxes each of the 10 or so properties per instance of the class, and a 'forward' and 'back', button that advances one record in the array collection (or back).

       

      What i want is a way to directly BIND the textbox of each property in the form to the property name, and be able to index forward and back. If the user changes the data in a text box when a particular instance is up, the binding should update the correct arraycollection/property instance.

       

      What is the best way to go about this index type binding in a form. I know this has got to be easy, as the datagrid does this? Just I want to do it to a different displayer (form fields)....

       

      Any ideas would be great. Thanks!

        • 1. Re: Using an ArrayCollection of a Class in form fields
          UbuntuPenguin Level 4

          This is the quick and dirty way to do it  , but I usually put this logic somewhere else

           

          <ContainerOfSomeSort>

            <TextInput id="firstNameText" editable="false" text="{vo.firstname}" change="{vo.firstname = firstNameText.text}"/>

            <TextInput id="lastNameText" editable="false" text="{vo.lastname}" change="{vo.lastname = lastNameText.text}"/>

            <Button label="Previous" click="{prevClick(event)}" />

            <Button label="Next" click="{nextClick(event)}" />

          <fx:Script>

             [Bindable] public var vo:ValueObject;

             public var voCollection:ArrayCollection;

           

             public function nextClick():void

             {

                 vo = ///get next object in collection;

             }

           

             public function prevClick():void

             {

                 vo = ///get prev object in collection;

             }

           

           

          If this post was helpful , please mark it as such.

           

          Sincerely,

            Ubu

          1 person found this helpful
          • 2. Re: Using an ArrayCollection of a Class in form fields
            mumcs01 Level 1

            Ahh.. I see how this works.Thanks!However i noticed one problem.

            I have a main application and a custom component that extends form.

            The main application holds the arraycollection, and the form fields are in the compoent. (Excerts below). The problem I'm having is that it seems bindings don't reference back to the main application. I've seen other complaints about this online as well. Is there a way around this? Seems like a crippling drawback. how can I bind or pass in to a component an arraycollection from the main applciaiton.

             

             

            When I run below I get nothing brought into the form... Get through Debug, the arraycollection is populated in the main app.... Help?

             

            Main application:

            -----------------

            [Bindable] public var subnetResults:ArrayCollection = new ArrayCollection;

            --> Further down I populate this arraycollection with stuff via HTTPService.

             

            The Class I built that is instances of the array collection. IN a seperate package:

            ------------------

            package
            {
            public class Subnets
            {
              public function Subnets(
               key:int,
               subnet:String,
               netmask:String,
               next_server:String,
               option_router:String,
               subnet_mask:String,
               option_nis_domain:String,
               option_domain_name:String,
               option_domain_name_server:String,
               option_ntp_server:String,
               default_lease_time:String,
               max_lease_time:String,
               action:String='')
              {
               this.key = key;
               this.subnet = subnet;
               this.netmask = netmask;
               this.next_server = next_server;
               this.option_router = option_router;
               this.subnet_mask = subnet_mask;
               this.option_nis_domain = option_nis_domain;
               this.option_domain_name = option_domain_name;
               this.option_domain_name_server = option_domain_name_server;
               this.option_ntp_server = option_ntp_server;
               this.default_lease_time = default_lease_time;
               this.max_lease_time = max_lease_time;
               this.action = action;
              }
             
              [Bindable] public var key:int;
              [Bindable] public var subnet:String;
              [Bindable] public var netmask:String;
              [Bindable] public var next_server:String;
              [Bindable] public var option_router:String;
              [Bindable] public var subnet_mask:String;
              [Bindable] public var option_nis_domain:String;
              [Bindable] public var option_domain_name:String;
              [Bindable] public var option_domain_name_server:String;
              [Bindable] public var option_ntp_server:String;
              [Bindable] public var default_lease_time:String;
              [Bindable] public var max_lease_time:String;
              [Bindable] public var action:String;

            }

             

            The Form component that uses the array collection: (Ignore the IPAddressValidator... Its a custom validator I use).

            -----------------------

            <mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:com="val_classes.*">

            <com:IPAddressValidator source="{next_server}" property="text" triggerEvent="change"
            valid="{ parentDocument.subnetResults[ subnetSelectedIndex ].next_server = next_server.text};
               { parentDocument.subnetResults[ subnetSelectedIndex ].action = 'us'};"/>

            <mx:FormItem label="Issued tFTP Server:">
            <mx:TextInput id="next_server" maxChars="15" restrict="0-9."
              text="{ parentDocument.subnetResults.getItemAt(subnetSelectedIndex).next_server }" />
            </mx:FormItem>
            </mx:Form>

            • 3. Re: Using an ArrayCollection of a Class in form fields
              rtalton Level 4

              I'm having trouble understanding your intent with your code sample. Your component probably should not be referencing the parent in a binding expression, as that makes it "tightly coupled" to the application.

               

              Try using the <mx:Binding /> tag to bind the data from the form field back to the VO, like:

              <mx:Binding source="myTextField.text" destination="myVO.next_server"/>