12 Replies Latest reply on Jan 24, 2007 6:35 AM by davidmedifit

    binding data CFC search results to a data grid

    rotoole Level 1
      irst and foremost i am web developer new to flex/actionscript/coldfusion. i have a java background but this language is new to me. i keep getting syntax errors and i am not sure what i need to do in this situation. i am trying to populate a datagrid with the results from a search to a mySQL db using cf and im pretty sure i have it for the most part im just not sure how to get the results from an "event" from what i was told the results where coming back in, to a object/array that i can bind as a dataprovider. right now i am not getting any errors but i am just getting a blank datagrid. this code is still in progress...sorry
      any help anyone can give me would be greatly appreciated...tia

      ps. i know theres a whole bunch of extra imports in there

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:v="*" creationComplete="init(event)" borderColor="#ffffff" backgroundGradientColors="[#000000, #555555]" backgroundGradientAlphas="[0.92, 0.96]" >


      <mx:Script>
      <![CDATA[
      import mx.rpc.soap.mxml.WebService;
      import mx.collections.*;
      import mx.events.*;

      import mx.controls.Alert;
      import flash.utils.*;
      import mx.rpc.events.*;

      import mx.core.IFlexDisplayObject;
      import mx.core.Container;
      import mx.controls.*;
      import asFiles.*;
      import mx.messaging.*;

      public var searchWebService:SearchWebService;
      [Bindable]
      public var searchObj:SearchConstructor;
      [Bindable]
      public var arrayResults:ArrayCollection;


      public function init(event:Event)
      {
      creation.text = "loading complete";
      dg.visible = false;
      }

      public function searchFunc():void
      {
      searching.text = "searching is a go!!!";
      searchObj = new SearchConstructor(searchInput.text, searchCombo.text);
      searchWebService = new SearchWebService();
      addChild(searchWebService);
      searchWebService.myService.SearchWeb(searchObj.searchField);
      }

      public function faultEvent(event:Event):void
      {
      searching.text = "the webservice faulted";

      }
      public function handleResults(event:ResultEvent):ArrayCollection
      {
      setting.text="receiving results info...maybe displaying it too";
      arrayResults = (event.result as ArrayCollection);
      dg.dataProvider = arrayResults;
      //not sure if this is suppposed to be here or set below
      dg.visible = true;

      return arrayResults;
      }



      ]]>
      </mx:Script>






      <mx:Panel x="238" y="10" width="315" height="165" layout="absolute" title="Search">
      <mx:Form x="10" y="10">
      <mx:FormItem label="Search For:">
      <mx:TextInput id="searchInput"/>
      </mx:FormItem>
      <mx:FormItem label="in:">
      <mx:ComboBox id="searchCombo" dataProvider="[HONAME,ADDRESS,CITY,STATE,PHONE,ACCOUNT]">
      </mx:ComboBox>
      </mx:FormItem>
      <mx:FormItem>
      <mx:Button label="Search" id="srchButton" click="searchFunc()"/>
      </mx:FormItem>
      </mx:Form>
      </mx:Panel>

      <mx:Label x="574" y="67" text="Label" id="creation" color="#ffffff"/>
      <mx:DataGrid id="dg" x="0" y="251" height="100%" width="100%" dataProvider="{arrayResults}">
      <mx:columns>
      <mx:DataGridColumn headerText="HONAME" />
      <mx:DataGridColumn headerText="SPOUSE" />
      <mx:DataGridColumn headerText="ADDRESS" />
      <mx:DataGridColumn headerText="CITY" />
      <mx:DataGridColumn headerText="STATE" />
      <mx:DataGridColumn headerText="ZIP" />
      <mx:DataGridColumn headerText="PHONE" />
      <mx:DataGridColumn headerText="2ND PHONE" />
      <mx:DataGridColumn headerText="CREDIT" />
      <mx:DataGridColumn headerText="OWNERSHIP" />
      <mx:DataGridColumn headerText="OFFICE" />
      <mx:DataGridColumn headerText="SMNOTES" />
      <mx:DataGridColumn headerText="CLOSER" />
      <mx:DataGridColumn headerText="COMPANY" />
      <mx:DataGridColumn headerText="LEADGEN" />
      <mx:DataGridColumn headerText="ACCOUNT" />
      <mx:DataGridColumn headerText="MR" />
      <mx:DataGridColumn headerText="NOTES" />
      <mx:DataGridColumn headerText="EXTRAEQUIP" />
      <mx:DataGridColumn headerText="RESULT" />
      </mx:columns>
      </mx:DataGrid>
      <mx:Label x="574" y="93" text="Label" color="#ffffff" id="searching"/>
      <mx:Label x="574" y="110" text="Label" color="#ffffff" id="sending"/>
      <mx:Label x="574" y="136" text="Label" color="#ffffff" id="setting"/>

      </mx:Application>

        • 1. Re: binding data CFC search results to a data grid
          rotoole Level 1
          so i have changed the results to XML and now i am getting results that i am binding to a textarea but still not sure what to do about the datagrid .

          im not sure if am overthinking this but do i need to somehow pass the results to an constructor class and then bind that object to the datagrid...im just not sure what is the right way to go about this whole situation.

          thanks again to anyone that can help
          • 2. Re: binding data CFC search results to a data grid
            davidmedifit Level 1
            What I don't see in here - and maybe I missed it - is your call to the CFC. Let me basically show you how I would do it, and hopefully you'll be able to take it from there - it should be quite easy. You have alot of code in there - I'm not sure what is the datagrid issue, and what is everything else you are trying to do.

            1) Declare the call to the CFC
            <mx:RemoteObject id="libraryItemList" destination="ColdFusion" source="cfcname" showBusyCursor="true">
            <mx:method name="getItems" result="handleItemResult(event)"/>
            </mx:RemoteObject>

            2) Handle the results:
            <mx:Script>
            <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable] public var qResult:ArrayCollection;

            public function handleItemResult(event:ResultEvent):void{
            qResult=event.result as ArrayCollection;
            }
            ]]>
            </mx:Script>

            3) Define the panel, and columns:
            <mx:Panel title="Item List" layout="vertical" width="40%">
            <mx:DataGrid dataProvider="{qResult}" id="dg" width="100%">
            <mx:columns>
            <mx:DataGridColumn dataField="itemid" visible="false"/>
            <mx:DataGridColumn dataField="itemName" visible="true"/>
            <mx:DataGridColumn dataField="itemType" visible="true"/>
            </mx:columns>
            </mx:DataGrid>
            </mx:Panel>

            See if you can get the datagrid part working first, and go from there - let me know how that works out.

            Cheers,

            David
            • 3. Re: binding data CFC search results to a data grid
              davidmedifit Level 1
              Oh yes - one quick thing, the code above is expecting a query item to be returned

              example:
              <cfquery name="myQuery" datasource="default">
              select * from myTable
              </cfquery>

              <cfreturn myQuery>
              • 4. Re: binding data CFC search results to a data grid
                lmt002 Level 1
                I wonder if I can request help on remoting and binding.

                I want to have a user enter an ID number into a textInput field.
                Then on a button click, I want to fill other text input fields with results from the cfquey (done in the .cfc). I don't want to use a datagrid to do the binding. Is this possible?

                I've been looking for help but I can't seem to figure it out.
                • 5. Re: binding data CFC search results to a data grid
                  rebster Level 1
                  yes, I need help with this binding too. TextInput field does not have dataProvider? Any help would be greatly appreciated.
                  • 6. Re: binding data CFC search results to a data grid
                    davidmedifit Level 1
                    I'll try respond to both questions with one post (here goes!).

                    1) IMT002, What you want to do, is call the CF remoting object, with a parameter, that is bound to the value of the text field, so, the code would go something like this:

                    Call to the CFC:
                    <mx:RemoteObject id="ItemList" destination="ColdFusion" source="library" showBusyCursor="true">
                    <mx:method name="updateItem" fault="Alert.show(event.fault.message)"
                    result="handleUpdateResult(event)">
                    <mx:arguments>
                    <arg1>{myTextInputField.text}</arg1>
                    </mx:arguments>
                    </mx:method>
                    </mx:RemoteObject>

                    You can call the function in a button, or the likes, with code like this:
                    click='ItemList.updateItem()'

                    You may have to research the code above a little - I am coding without testing at the moment. Please post back and let me know how it worked out.

                    2) rebster, I think you are trying to do the opposite, no? Have the value of a datagrid appear in a text input field? If that's what you are trying to do, try something like this:

                    <mx:TextInput text="{dg.selectedItem.columnNameYouWishToDisplay}"/>

                    Let me know how it works out guys.

                    Cheers,

                    David

                    • 7. Re: binding data CFC search results to a data grid
                      Jared Langdon Level 1
                      Instead of
                      <mx:DataGridColumn headerText="HONAME" />

                      You need
                      <mx:DataGridColumn dataField="HONAME" />
                      • 8. Re: binding data CFC search results to a data grid
                        rebster Level 1
                        Thank you both. I did use the grid but didn't really want to...
                        I wanted the user to enter a equipment ID number into a textInput field.
                        Then once they left the field (focusout) fill the Serial Nubmer and Description fields with the results from the query. I have this working with the datagrid. I just hid the grid behind the text input field and in the result handler set the datagrid to 0 so the first (and should be only) item is selected. It's working but not proper.... Thanks again
                        • 9. Re: binding data CFC search results to a data grid
                          davidmedifit Level 1
                          rebster, let me tell you what I think you should do, and see if this is something you've done already:

                          1) On focusout, call the remoteObject, which has a parameter bound to the text input field
                          2) Use a "result" function with the remoteObject call to take the results (two fields, I assume), and set two public bindable variables to the serial number and description you got from the RO.
                          [Bindable] public var serialNumber:String;
                          3) Have two text fields defined, and bound to the public variables:
                          <mx:Text id="mySerialNumber" text="{serialNumber}"/>

                          Feel free to post the code if you run into trouble.

                          Cheers,

                          David
                          • 10. Re: binding data CFC search results to a data grid
                            lmt002 Level 1
                            So I use the <mx:Text instead of mx:textInput?
                            Would the user be able to change the "serialNumber" in case it was wrong in the database?

                            <mx:Text id="mySerialNumber" text="{serialNumber}"/>

                            I'll do some research on this.
                            Thanks for the help. I'm new to flex but have some experience with flash.
                            Got a lot of help from the ASFusion people (Real Eastate sample).
                            • 11. Re: binding data CFC search results to a data grid
                              lmt002 Level 1
                              Found text control in livedocs.macromedia.com/flex/201...
                              The Text control displays multiline, noneditable text.
                              I will try this with textInput control and use the text property.

                              Thanks again.
                              • 12. Re: binding data CFC search results to a data grid
                                davidmedifit Level 1
                                Yes, sorry, "textInput" if you want a single line that the user can edit.

                                David