6 Replies Latest reply on Mar 5, 2007 12:24 PM by JennHysuick

    Populate ComboBox from database - NOT using Flex Data Services

    arosequist
      Hi there,

      We are using CF with Flex but are not using the Flex Data Service. I'm very much a newb and I'm having trouble finding any information on how to populate controles from a database without using Flex Data Service. Any help would be greatly appreciated.

      First I have a page... JobSearch.mxml that contains a combo box that I want to populate with the job_id and job_title from a MSSQL database.

      In Flex in the RDS DataView I used the "Create CFC" Wizard which generated "job.cfc" and "jobGateway.cfc". It also generated "job.as".

      The CF Function that selects the data appears to be defaulted and called "load" and the .as function is called simply "job".

      So, that all looks great. But I can't find any information on what I need to have on my JobSearch.mxml to actually get this data into the comboBox.

      I did:

      <mx:Script>
      <![CDATA[

      [Bindable]
      public var jobData:job = null;

      ]]>
      </mx:Script>

      And then:
      <mx:ComboBox text="{jobData.job_title}"></mx:ComboBox>

      But I'm being told "Type was not found or was not a complie-time constant: job"

      I guess I'm missing something, or doing something way wrong... I just don't know enough of Flex at this point to know what it is.

      Thanks!

      April
        • 1. Re: Populate ComboBox from database - NOT using Flex Data Services
          zerian
          I'd use the httpservice to link to a php page with odbc connections or link to an asp page. Either the php or asp page should connect to the mssql db and query accordingly. Those pages will then output you desired result in xml format. You can then use those results to populate the combo box.
          • 2. Re: Populate ComboBox from database - NOT using Flex Data Services
            arosequist Level 1
            Using php or asp is not an option, as we are a Cold Fusion House.

            I was looking at an article on Ben Forta's blog ( http://www.forta.com/blog/index.cfm?mode=e&entry=1786) and following his example I did this... only it doesn't work:

            I'm very very new to Flash and we are using ColdFusion but are not using Flex Data Services. I've been trying to figure out how to populate a combobox from a database and I'm just not having any luck.

            My project is called "PreTraffic". I have my main file as "JobSearch.mxml" and a folder under the root named "cfc" with a file called "job.cfc".

            job.cfc contains the following code:

            <cfcomponent>

            <!--- Get jobs --->
            <cffunction name="GetJob" access="remote" returntype="query" output="false">

            <cfset var job="">
            <cfset var results="">

            <cfquery datasource="discsdev" name="job">
            SELECT job_id, job_title
            FROM job
            WHERE status = 'O'
            ORDER BY job_title
            </cfquery>
            <cfquery dbtype="query" name="results">
            SELECT job_title AS label, job_id AS data
            FROM job
            ORDER BY label
            </cfquery>

            <cfreturn results>

            </cffunction>

            </cfcomponent>

            And JobSearch.mxml has the following code:

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application
            xmlns:mx=" http://www.adobe.com/2006/mxml"
            xmlns="*"
            layout="absolute"
            backgroundGradientColors="[#ffffff, #d0d0d0]"
            creationComplete="InitApp()">

            <mx:Style source="style.css" />

            <mx:Script>
            <![CDATA[

            public function InitApp():void {
            jobSvc.GetJob();
            }
            ]]>
            </mx:Script>

            <!-- ColdFusion CFC (via AMF) -->
            <mx:RemoteObject id="jobSvc" destination="PreTraffic" showBusyCursor="true" />

            <mx:VBox label="Job History" width="100%" height="100%" x="10" y="92">
            <mx:Label text="Search jobs by"/>
            <mx:Form label="Task" width="100%">
            <mx:FormItem label="Job Name:">
            <mx:ComboBox id="jobNameCB" dataProvider="{jobSvc.GetJob.results}"></mx:ComboBox>
            </mx:FormItem>
            </mx:Form>
            <mx:HBox>
            <mx:Button label="Search"/>
            <mx:Button label="Clear"/>
            </mx:HBox>

            </mx:VBox>
            </mx:Application>

            My Compiler thingy points to:
            -services "/Volumes/flexwwwroot/WEB-INF/flex/job-services-config.xml" -locale en_US

            and job-services-config.xml contains the following code:

            <destination id="PreTraffic">
            <channels>
            <channel ref="my-cfamf"/>
            </channels>
            <properties>
            <source>flex.pretraffic.cfc.job</source>
            <lowercase-keys>true</lowercase-keys>
            </properties>
            </destination>

            Well, when I run the app... the combobox is not populated... Can anyone help with what I've done wrong?

            Thanks!

            April
            • 3. Re: Populate ComboBox from database - NOT using Flex Data Services
              JennHysuick Level 1
              We are also mostly a CF shop (at least what I do, which is Flex front ends, and CF backends).
              I'm not sure if what you are doing will work with some tweeking, but for an example, I'll show you what I do to populate combo boxes with a datasource.

              <mx:RemoteObject id="getParams" destination="ColdFusion" source="full.Path.Starting.With.Sandbox.Root">
              <mx:method name="getTime" result="showTime(event)" />
              </mx:RemoteObject>
              <!-- the method is the cf function you are working with - this way you can have multiple methods in one remote object (cfc file). As well - the cfc returns an "event", so you need to send that as a result to a function - in the above example, I'll send whatever the getParams.cfc to a function called showTime() -->

              in Actionscript:

              public function showTime(event:ResultEvent):void
              {

              • 4. Re: Populate ComboBox from database - NOT using Flex Data Services
                JennHysuick Level 1
                opps - hit the tab button, and then IE 7 submitted for me...I'll continue...
                public function showTime(event:ResultEvent):void <!-- need to capture the results of the cfc query -->
                {
                var myResults:arrayCollection = new ArrayCollection(event.result as Array); //assign the results to a AC or an object
                //based on this, you can create an array of what you want to use - taking myResults.name if that is the part of the array
                //collection you wish to use - just push that part of the collection onto a new aray
                }

                - then for the combo box, what I do (mind you, I've written my own combo box called an HTMLComboBox , but it shouldn't be too different
                <mx:ComboBox id="cmb1" dataprovider={myResultArray} >
                <mx:Text text={data} />
                </mx:ComboBox>

                I hope that all make sense - your remote object seemed to be missing a few things, and you weren't catching the results your cfc was returning. And the combo box needs a separate component for the text. Its one of those things that you struggle with the first time, but once you get it, it just makes sense.
                We aren't using anything special for this - CF7 server, and I have flex builder, and you only need 1 mxml file to do this.
                • 5. Re: Populate ComboBox from database - NOT using Flex Data Services
                  arosequist Level 1
                  Thank you for everyone's responses, but I'm still not having any luck. I'm not getting any errors - but my combobox is not populating. Again, I'm really new to Flex.

                  My app is called PreTraffic with the following structure:

                  PreTraffic
                  cfc (folder)
                  job.cfc
                  JobSearch.cfc

                  **********************************************************

                  job.cfc contatins:

                  <cfcomponent>
                  <!--- Get jobs --->
                  <cffunction name="GetJob" access="remote" returntype="query" output="false">

                  <cfset var job="">
                  <cfset var results="">

                  <cfquery datasource="discsdev" name="job">
                  SELECT job_id, job_title
                  FROM job
                  WHERE status = 'O'
                  ORDER BY job_title
                  </cfquery>
                  <cfquery dbtype="query" name="results">
                  SELECT job_title AS label, job_id AS data
                  FROM job
                  ORDER BY label
                  </cfquery>
                  <cfreturn results>
                  </cffunction>
                  </cfcomponent>

                  **************************************************************

                  JobSearch.mxml contains:

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application
                  xmlns:mx=" http://www.adobe.com/2006/mxml"
                  xmlns="*"
                  layout="absolute"
                  backgroundGradientColors="[#ffffff, #d0d0d0]"
                  creationComplete="InitApp()">

                  <mx:Style source="style.css" />

                  <mx:Script>
                  <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.rpc.events.ResultEvent;

                  public function InitApp():void {
                  jobSvc.GetJob();
                  }

                  private function getJobResult(event:Object):void{
                  jobNameCB.dataProvider = event.result as ArrayCollection;
                  }

                  [Bindable]
                  private var jobs:ArrayCollection = new ArrayCollection();

                  private function jobHandler(event:ResultEvent):void{
                  jobs = event.result.catalog.job;
                  var jobObj:Object = new Object();
                  jobObj.name = "All";
                  jobObj.jobID = 0;
                  jobs.addItemAt(jobObj, 0);
                  jobNameCB.selectedIndex = 0;
                  }
                  ]]>
                  </mx:Script>

                  <!-- ColdFusion CFC (via AMF) -->
                  <mx:RemoteObject id="jobSvc" destination="ColdFusion" source="PreTraffic.cfc.job" showBusyCursor="true">
                  <mx:method name="GetJob" result="getJobResult(event)"/>
                  </mx:RemoteObject>

                  <mx:VBox label="Job History" width="100%" height="100%" x="10" y="92">
                  <mx:FormItem label="Job Name:">
                  <mx:ComboBox id="jobNameCB" dataProvider="{jobs}" labelField="{data}">
                  </mx:ComboBox>
                  </mx:FormItem>
                  </mx:Form>
                  <mx:HBox>
                  <mx:Button label="Search"/>
                  <mx:Button label="Clear"/>
                  </mx:HBox>

                  </mx:VBox>
                  </mx:Application>
                  • 6. Re: Populate ComboBox from database - NOT using Flex Data Services
                    JennHysuick Level 1
                    Try
                    <mx:ComboBox id="jobNameCB" dataProvider="{jobs}" labelField="name" />

                    Or you can use any other property of the Jobs object to be the labelField....simply using Data in this case isn't specific enough, as there are other attrubutes contained in Data.

                    hope this helps...I got the example from my Flex Training From the Source book, and this was the only differenct between their example and your code.