1 Reply Latest reply on Jul 6, 2010 12:28 PM by rtalton

    How to bind data with <mx:states> tag ?

    snkd Level 1

      I have a form in my application.And there are three(3)  states in my app.

      1. new {Enter new records,Fields must be blanked and bata should be bounded,Feilds editable}

      2. edit {Edit the puticular record,Fields must not be blanked and bata should be bounded,Feilds editable}

      3. readonly {View only,Fields must be blanked and bata should be bounded,,Feilds not editable}

       

       

      how can I do that...?

      Actually I am doing as following way,but I am not satisfy with that with method..Because in new state I have to reset each an every field manually..

      is there any method somthing like form.reset(); bcz when the form is become large it will be a headache...

       

      when data loaded to the form,state is readonly,then you can go to new or edit state...that is the app behaviour
         <mx:states>
              <mx:State name="new">
              <!--Set Accessibility-->
                      <mx:SetProperty target="{tiDebCode}" name="enabled" value="true"/>
                      <mx:SetProperty target="{tiDebIdNo}" name="enabled" value="true"/>
                      <mx:SetProperty target="{dtDob}" name="enabled" value="true"/>
                      <mx:SetProperty target="{cboStatus}" name="enabled" value="true"/>
                     
                  <!--Set Accessibility-->
                  <!--text-->
                      <mx:SetProperty target="{tiDebCode}" name="text" value=""/>
                      <mx:SetProperty target="{tiDebIdNo}" name="text" value=""/>
                      <mx:SetProperty target="{dtDob}" name="text" value=""/>
                      <mx:SetProperty target="{cboStatus}" name="prompt" value="Select"/>
                  <!--text-->
              </mx:State>

              <mx:State name="edit">
                  <!--Set Accessibility-->
                      <mx:SetProperty target="{tiDebCode}" name="enabled" value="true"/>
                      <mx:SetProperty target="{tiDebIdNo}" name="enabled" value="true"/>
                      <mx:SetProperty target="{dtDob}" name="enabled" value="true"/>
                      <mx:SetProperty target="{cboStatus}" name="enabled" value="true"/>
                      <!--<mx:SetProperty target="{cboStatus}" name="selectedIndex" value="{lstFDebtorList.getItemAt(intCurrentRecNo).status-1}"/> -->
                  <!--Set Accessibility-->
              </mx:State>

             <mx:State name="readonly">
                  <!--Set Accessibility-->
                      <mx:SetProperty target="{tiDebCode}" name="enabled" value="false"/>
                      <mx:SetProperty target="{tiDebIdNo}" name="enabled" value="false"/>
                      <mx:SetProperty target="{dtDob}" name="enabled" value="false"/>
                      <mx:SetProperty target="{cboStatus}" name="enabled" value="fasle"/>
                      <!--<mx:SetProperty target="{cboStatus}" name="selectedIndex" value="{lstFDebtorList.getItemAt(intCurrentRecNo).status-1}"/> -->
                      <!--selectedIndex="{lstFDebtorList.getItemAt(intCurrentRecNo).status}"-->
                  <!--Set Accessibility-->
              </mx:State>

         </mx:states>

       

          <!--Databinding For Entier Application-->
              <mx:Binding destination="tiDebCode.text" source="{lstFDebtorList.getItemAt(intCurrentRecNo).debCode}" />
              <mx:Binding destination="tiDebIdNo.text" source="{lstFDebtorList.getItemAt(intCurrentRecNo).debIdNo}" />
              <mx:Binding destination="dtDob.text" source="{lstFDebtorList.getItemAt(intCurrentRecNo).dateOfBrith}" />
              <mx:Binding destination="cboStatus.selectedIndex" source="{lstFDebtorList.getItemAt(intCurrentRecNo).status-1}" />
              <mx:Binding destination="cboStatus.dataProvider" source="{lststatus}" />
          <!--Databinding For Entier Application-->

       

      Any ideas..?

        • 1. Re: How to bind data with <mx:states> tag ?
          rtalton Level 4

          Just an idea. Built in FB3.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          <mx:Script>
              <![CDATA[
                  import mx.collections.ArrayCollection;
                 
                  [Bindable]
                  private var isEnabled:Boolean;//Bound to all 'enabled' properties of text inputs.
                 
                  [Bindable]
                  private var ac:ArrayCollection = new ArrayCollection([
                  {lastname:'Smith', id:1},
                  {lastname:'Jones', id:2},
                  {lastname:'Crocker', id:3},
                  {lastname:'Hall', id:4},
                  ]);

           

                  private function handle_change():void{
                      //change boolean var's value.
                      //all text inputs' enabled props are bound to this.
                      isEnabled = Boolean(rbg.selectedValue);
                      if (rbg.selection.label == 'New'){
                          var obj:Object = {lastname:'new record', id:''}
                          ac.addItem(obj);
                          lst.selectedItem = obj;
                      }
                  }

           

              ]]>
          </mx:Script>

           

          <mx:Binding source="lst.selectedItem.lastname" destination="ti1.text"/>
          <mx:Binding destination="lst.selectedItem.lastname" source="ti1.text"/>

           

              <mx:List id="lst"
                  dataProvider="{ac}"
                  labelField="lastname"
                  x="19" y="25" width="125"/>

           

              <mx:TextInput id="ti1"
                  enabled="{isEnabled}"
                  valueCommit="{ac.refresh()}"
                  x="212" y="94"/>
             
              <mx:HBox x="184" y="147" width="217">
                  <mx:RadioButtonGroup id="rbg" change="handle_change()"/>
                  <mx:RadioButton groupName="rbg" label="New" value="true"/>
                  <mx:RadioButton groupName="rbg" label="Edit" value="true"/>
                  <mx:RadioButton groupName="rbg" label="Read-Only" value="false" selected="true"/>
              </mx:HBox>

           

          </mx:Application>