Home > ColdFusion, Flex, Flex 3 > Flex Combobox using ColdFusion datasource

Flex Combobox using ColdFusion datasource

June 29th, 2009

This will show you how to simply populate a flex combo box with a coldfusion cfquery in a cfc. The data return is an arrayCollection.

index.as

 
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
 
[Bindable] public var cfdata:ArrayCollection = new ArrayCollection;
 
private function UserHandler(event:ResultEvent):void {
  cfdata = event.result as ArrayCollection;
}
 
 
public function init():void {
 /* call my remote Object to get my data */
  roUser.getMyData();   
 
}

I have separated the actionscript from the mxml for formatting purposes.
and because I usually do this for good practice.

index.mxml

<?xml version="1.0" encoding="utf-8"?>
 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
 initialize="init();">
 
<mx:Script>
 
<![CDATA[
 
 
include "/as/index.as";
 
]]>
 
 
</mx:Script>
 
 
<mx:RemoteObject id="roUser" destination="ColdFusion" source="cfc.MyCFC" 
showBusyCursor="true">
  <mx:method name="getMyData" result="UserHandler(event);"/>
</mx:RemoteObject>
 
<!--data is coming from the arraycollection that is populated by the db-->
<!--the label field is the database column name, or the arraycollection column-->
<mx:ComboBox dataProvider="{cfdata}" labelField="first"/>
 
 
 
</mx:Application>

MyCFC.cfc

The table t00users has a column called first.

 
<cfcomponent output="false">
     <cffunction name="getMyData" output="false" access="remote" returntype="query">
 
     <cfset var qRead="">
 
          <cfquery name="qRead" datasource="#MyDataSource#">
               select first
               from t00users
          </cfquery>
 
          <cfreturn qRead>
     </cffunction>
 
</cfcomponent>

ColdFusion, Flex, Flex 3

  1. splamco
    August 25th, 2009 at 22:08 | #1

    This is really helpful. My problem is that I pass the ComboBox selection to another cfc as an argument to a query that populates a grid. Unfortunately, I’m getting an error that says that my selected ComboBox argument is not a String. I’m not sure where or how to cast it as a String (I’m new to Flex and ok with CF). Thanks.

  2. August 25th, 2009 at 22:44 | #2

    So basically you have a cfc that will call a table that has your default data that populates the combo box, and when you select an item in the combo box, you want this to send this data to another cfc function to save to another table. Is this correct? if not, please explain in more detail what you are trying to do. if you are working with coldfusion and have created your dto (data typed object) to send data off to the server, then you will need to cast your data as this.

    String(mytext.text); //text input as string
    Number(myprice.text); // text input as numeric
    Boolean(isActive.selected); // radio or checkbox as boolean

    Now if you are casting a date it will be a little different, it’s: mydate as new Date;

  3. splamco
    August 26th, 2009 at 11:35 | #3

    Well, I’m successfully using your code to populate the combobox. I then bind (triggered on change of combobox named catPop) it’s results and submit to another cfc as shown here:

    private function doSearch():void{
    searchService.searcher(String(catPop.selectedItem), “post”, searchInput.text);}

    I get the error:
    Unable to invoke CFC – Invalid search criteria specified: (CF_CUSTOM3 [object Object]) (this is edited just to show relevant stuff)

    For some reason, String(catPop.selectedItem) is seen by the search cfc as [object Object].

    Thanks so much for your help.

  4. August 26th, 2009 at 15:02 | #4

    @splamco

    if you use “catPop.selectedItem”, this will return you the complete object, aka [object object]
    In order to use a string, add the property that you want to send.

    example: my combobox’ dataProvider selecteditem is this object:

    {name:”captain kirk”, age:”31″}

    I could have my combobox lablefield as “name” and it would show “captain kirk” on the label, but I when I select that label I want to use the “age” property so I could reference it by using: catPop.selectedItem.age

    This is why you get this error.
    I sometimes like to pass my information by object into a cfc. I mostly send it off as an obj for ease of use.

    private function doSearch():void{

    var obj:Object = new Object();
    obj.combo = String(catPop.selectedItem.age);
    obj.type = String(“post”);
    obj.keyword = String(searchInput.text);

    searchService.searcher(obj);
    }

  5. splamco
    August 26th, 2009 at 17:40 | #5

    Thank you so much! Your explanation makes perfect sense and it works as you prescribed.

    One other issue if you don’t mind, what my search cfc does is take the arguments from Flex, does a cfsearch and then a cfquery with the returned keys (so I can bring back the entire, current record). This works fine when when cfsearch finds something. When it doesn’t, my ugly hack is to cfquery for a record that I know doesn’t exist – this works ok. Is there a nicer way to handle that?

    Thanks again, you are very kind to put up these great examples and answer questions.

  6. August 27th, 2009 at 00:34 | #6

    @splamco

    I use a few methods for searching for data, it really depends on the scale and the server. for example, if you have a client that needs to query around 180,000+ records, you definetely do not want to try to create those objects on the ColdFusion server. ( I tried..)

    1. you could either create a straight forward query (getAllAsQuery, if you use the coldfusion CRUDS) which is what I do sometimes, this will bring back all of your data already in an ArrayCollection, but not in a ‘data typed object ArrayCollection’.
    2. create a method that retrieves so many records at a time (much like page navigation) and create a next, store all the data in a ArrayCollection. (This makes searching almost impossible to achieve)

    Why do I prefer to download as as much data as I can? To keep the webserver humming along. The less resources I use on my server, the better I am off. especially if I can pawn those resource responsabilites on the client, (the user running the app).

    Now if you really think about this, 180,000+ records can take a few seconds before it starts to hit a datagrid, but when I have all of these records, I can now use a property in the ‘ArrayCollection’ called filterFunction.

    I don’t know if you have used this, but I use this alot when creating a search engine. It is not as straight forward, but if you have all the records in a datagrid, why reQuery?

    A filterFunction will loop over each object in the ArrayCollection

    private function filterTitle(item:Object):Boolean {
    return (item.Title == _keyword.text);
    }

    Imagine that I have a datagrid with 1000 records of books, and I would like to search for a specific title that I know. I could use the above function that would loop over each item in the ArrayCollection and only return the title that is equal to my a keyword search. Now if I want to clear the search, the all I have to do is set the ArrayCollection filterFunction to null, and there is all my records from previous.

    It seems to me you are doing alot of back and forth chattering, from ColdFusion to Flex and back to ColdFusion. Don’t get me wrong, sometimes it is much easier to do just a straight query, it all depends on the situation. I always try to keep all options available.

    I post this information for anyone that is learning or having the same troubles I have had. I also post tutorials on ‘how to’s’ becuase I forget stuff all the time. I really need to start publishing my code library for people.

    If you need any more help, don’ t hesitate to ask.

  7. splamco
    August 30th, 2009 at 17:37 | #7

    It’s interesting that a cfc that makes sense for regular html (ie: keep data on server for processing), doesn’t make as much sense for a Flex app where dumping bulk data on the client for processing makes more sense (especially when running LiveCycle Data Services/Data Management), kind of refuting the notion that you just want to create one service to meet the needs of all clients.

    Part of the reason why I continue to process on the server is that I like using Verity because of the better results I get from text searches. I don’t know if there is anything in Flex that could give me comparable results.

  8. August 31st, 2009 at 18:27 | #8

    I haven’t really played with LiveCycle Data Services as much as I wanted to, considering the one item I need cost about $20,000 per cpu. That would be the live data edit to server connections they show you, that is awe inspiring. yeah you can do alot of stuff with it, but I just haven’t had a chance. I agree that for web 1.0 stuff, you pretty much have to take the hit on the server, but on 2.0, it’s a whole new ballgame. I am not familiar with the Verity in ColdFusion, lol, I know, I just use MYSQL to do most of my work. I am curious to what type of backend you run, MySQL, MSSQL? What tiers are in your layout? I typically use: Flex or ColdFusion pages for my front end, ColdFusion is my middleware, and MySQL is the backend. I found this is a solid bread winner for everyone.

  1. No trackbacks yet.
You must be logged in to post a comment.