7 Replies Latest reply on Nov 27, 2007 7:42 AM by Karl_Sigiscar_1971

    Dynamically add data

    vishuheb
      How will i add data dynamically to Textinput from action script. I am fetching results from database and now i want to bind or add these data one be one to the textinput box in my mxml page. How do i do that?? pls suggest me any idea as i am new to flex.....
        • 1. Dynamically add data
          Karl_Sigiscar_1971 Level 3
          1. Is there a good reason why you want to do it in ActionScript as opposed to MXML ? MXML code is easier. Having too much ActionScript in your Flex project makes it less legible and harder to follow.

          2. To do it in ActionScript:

          Let's assume that when you pull data from the database, you put it in the application model (as in MVC or Cairngorm).

          import com.mycompany.core.model.Model;
          import mx.binding.utils.*;
          import mx.controls.TextInput;

          [Bindable]
          private var model:Model;

          [Bindable]
          public var myTextInput:TextInput;

          // Class constructor
          public function MyClass(reference:TextInput):void
          {
          // TextInput control reference
          myTextInput = reference;

          // Model
          model = Model.getInstance();

          // Set binding for TextInput control text
          BindingUtils.bindProperty(this.model, "result", myTextInput, "text");
          }

          You pass the reference to the TextInput control to the class constructor. You define binding between the model property result and the TextInput control text property. Whenever the model result changes, the TextInput control text will change.

          Regards,
          Karl.
          • 2. Re: Dynamically add data
            vishuheb Level 1
            Hi Karl,

            Thank you for replying for my question. But i am not clear!!! Let me put my question this way....

            First let me say you my requirement. I am having some data in my datagrid say custname, telenum, addr etc. Now on click of any one i want the entire customer details to be in a Textinput box (i.e custname in one textinoutbox, tele in another textinput box etc). What i am trying to do is on click of a perticular customer i am calling some cfc(coldfusion component) from which the search will be made and result will be returned. Now in my action script i am getting it as an object.

            If i alert it this way Alert.show(Event.result.length); it alerts 1 which means i am getting it from data base. Now i want to know how will i put it into textinput box???
            I am also pasting the code here.... pls go through it once.

            this is my action script code

            // ActionScript file

            import flash.profiler.showRedrawRegions;
            import mx.controls.Alert;
            import mx.controls.DataGrid;
            import flash.events.MouseEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.soap.mxml.WebService;
            import com.adobe.serialization.json.JSON;
            //Here Object for webservice & result to haanlde result coming from webservice
            private var ws:WebService = new WebService();
            public var result:Object = new Object ;

            public function initApp():void
            {
            ws.wsdl=" http://localhost/cflocaldev/flex/vishwas_test.cfc?wsdl";
            ws.loadWSDL();
            ws.useProxy=true;
            ws.read.addEventListener(ResultEvent.RESULT,getData);
            userSearch.addEventListener(KeyboardEvent.KEY_UP,search);
            var tempObj:Object=new Object();
            tempObj.arguments="";
            ws.read(tempObj);
            }
            private function getData(Event:Object):void
            {
            Custdetails.dataProvider=Event.result;
            }
            private function search(Event:Object):void
            {
            var tempObj:Object=new Object();
            tempObj.arguments=userSearch.text;
            ws.read(tempObj);
            }
            public function clickHandler(event:MouseEvent):void
            {
            ws.fetdata.addEventListener(ResultEvent.RESULT,getCustData);
            var tempObj:Object=new Object();
            tempObj.arguments=Custdetails.selectedItem.CUST_TELE;
            ws.fetdata(tempObj);
            listPanel.visible=false;
            editPanel.visible=true;
            }
            private function getCustData(Event:ResultEvent):void
            {
            //Custdetails.dataProvider=Event.result;
            var rawData:String = String(Event.result);
            var person:Object = JSON.decode(rawData);
            CustName.text = person.custname;
            }
            /*
            private function personJSON(event:ResultEvent):void
            {
            //get the raw JSON data and cast to String
            var rawData:String = String(event.result);
            var person:Object = JSON.decode(rawData);
            txtName.text = person.first_name + " " + person.last_name;
            txtEmail.text = person.email;
            txtAddress.text = person.address;
            txtEmployees.text = "No";
            txtTitle.text = "No Title";
            }

            */


            AND THIS IS MY MXML CODE

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp();">
            <mx:Script source="class/vishwas_test4.as"/>


            <mx:Panel id="listPanel" width="99%" height="50%" layout="absolute" cornerRadius="15">
            <mx:Label text="Customes Search " x="300" width="110" y="10"/>
            <mx:TextInput id="userSearch" x="410" y="10"/>

            <mx:DataGrid id="Custdetails" width="60%" height="120" x="8" y="60" click="clickHandler(event)">
            <mx:columns>
            <mx:Array>
            <mx:DataGridColumn dataField = "CUSTNAME" headerText= "CUSTNAME" />
            <mx:DataGridColumn dataField = "CUST_ADDR" headerText= "CUSTADDR" />
            <mx:DataGridColumn dataField = "CUST_TELE" headerText= "CUSTTELE" />
            </mx:Array>
            </mx:columns>
            </mx:DataGrid>
            </mx:Panel>
            <mx:Panel id="editPanel" visible="false" width="99%" height="50%" layout="absolute" cornerRadius="15">

            <mx:Label text="Customer Name" width="110" y="22" x="205"/>
            <mx:TextInput id="CustName" y="20" x="323" />
            <mx:Label text="Customer Addr " y="59" x="205"/>
            <mx:TextInput id="custAddr" y="57" x="323" text="{Custdetails.selectedItem.CUST_ADDR}"/>
            <mx:Label x="205" y="95" text="Customer Tele" />
            <mx:TextInput x="323" y="93" text="{Custdetails.selectedItem.CUST_TELE}"/>

            </mx:Panel>
            </mx:Application>
            • 3. Re: Dynamically add data
              ntsiii Level 3
              Are you getting the data in the DataGrid?

              If so, then you can do:
              <mx:TextInput id="CustName" y="20" x="323" text="{Custdetails.selectedItem.CUSTNAME}" />

              If not, then do that first.

              Tracy
              • 4. Re: Dynamically add data
                vishuheb Level 1
                Hi,

                I dont want it that way....I have already tried it. What i want is based on the click of an customer in data grid i want to fetch his entire details from database i.e also the details which are not displayed in datagrid and display it in textinput box.

                I hope u got my point!!!

                Regards,

                Vishu
                • 5. Dynamically add data
                  Karl_Sigiscar_1971 Level 3
                  Hi Vishu,

                  Here is an example I created for you:

                  <?xml version="1.0"?>
                  <!-- dpcontrols/DataGridSimple.mxml -->
                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

                  <mx:Script>
                  <![CDATA[

                  private function onChange():void
                  {
                  this.currentAlbum.text = this.albums.selectedItem.Album;
                  }

                  ]]>
                  </mx:Script>

                  <mx:DataGrid id="albums" change="onChange()">
                  <mx:ArrayCollection>
                  <mx:Object>
                  <mx:Artist>Pavement</mx:Artist>
                  <mx:Price>11.99</mx:Price>
                  <mx:Album>Slanted and Enchanted</mx:Album>
                  </mx:Object>
                  <mx:Object>
                  <mx:Artist>Pavement</mx:Artist>
                  <mx:Album>Brighten the Corners</mx:Album>
                  <mx:Price>11.99</mx:Price>
                  </mx:Object>
                  <mx:Object>
                  <mx:Artist>Bjork</mx:Artist>
                  <mx:Album>Oceania</mx:Album>
                  <mx:Price>19.99</mx:Price>
                  </mx:Object>
                  <mx:Object>
                  <mx:Artist>U2</mx:Artist>
                  <mx:Album>Boy</mx:Album>
                  <mx:Price>9.99</mx:Price>
                  </mx:Object>
                  </mx:ArrayCollection>
                  </mx:DataGrid>

                  <mx:TextInput id="currentAlbum" />

                  </mx:Application>

                  With the selectedItem property, you access the object currently displayed and selected in the datagrid. Even if a property of the object is not displayed in a DataGridColumn, you should be able to access it and display it in the TextInput control.
                  • 6. Re: Dynamically add data
                    vishuheb Level 1
                    Hi Karl,

                    Thank you for creating a sample for me. Let me use this sample to tell you more clearly what my requirement is actually.

                    What you are doing in the sample is just using the selected value from the data grid
                    and displaying in the text input box. You are displaying only 3 fields in datagrid. Now suppose we have more than 3 records in the database but not being displayed on the data grid. Now on click of an item from data data grid i.e any album the corresponding records should be displayed in the textbox which is not in the datagrid. i.e suppose a field called 'Company' which is there in the database but not displayed in data grid and on click of the particular album i want Company name to be displayed in Textinput box.

                    Please let me know if you have any doubt in understanding my requirement. Also find the above attached code which i have pasted in my earlier comment.

                    Regards,

                    Vishu
                    • 7. Re: Dynamically add data
                      Karl_Sigiscar_1971 Level 3

                      Hi Vishu,

                      That's exactly what I was talking about. In the sample, when you click on a row in the DataGrid, the onChange() method is called and the selectedItem property is updated. This allow you to access the object the current row corresponds to and assign other properties of this object to the TextInput control text than those displayed in the Datagrid. Makes sense ?

                      You just have to modify the onChange() method, selecting the object properties you want to display in the TextInput.

                      Your objects could have 20 properties and you could have 5 columns only in the datagrid, it doesn't matter.

                      Cheers,
                      Karl.