In last night's FrozenFlex post, we looked at how to create a detail form. In the next post, we'll look at the mechanics of delivering a CFQuery to a Flex datagrid, but for now, here's a preview:
http://clearsoftware.net/flex/cfquery.html
Note that you'll need the Flex 8.5 player installed - it's available at http://labs.macromedia.com as part of the Flex Builder 2 public alpha.
For those of you who want a headstart, here's the code that I'll be explaining when I take a break from work tomorrow:
<!--- QueryDemo.cfc --->
<cfcomponent>
<!--- Build a big dummy query --->
<cfset contacts = queryNew("Firstname,Lastname") />
<cfset queryAddRow(contacts, 5) />
<cfset querySetCell(contacts, "Firstname", "Joe", 1) >
<cfset querySetCell(contacts, "Lastname", "Rinehart", 1) >
<cfset querySetCell(contacts, "Firstname", "Doug", 2) >
<cfset querySetCell(contacts, "Lastname", "Hughes", 2) >
<cfset querySetCell(contacts, "Firstname", "Sean", 3) >
<cfset querySetCell(contacts, "Lastname", "Corfield", 3) >
<cfset querySetCell(contacts, "Firstname", "Jared", 4) >
<cfset querySetCell(contacts, "Lastname", "Rypka-Hauer", 4) >
<cfset querySetCell(contacts, "Firstname", "Dave", 5) >
<cfset querySetCell(contacts, "Lastname", "Carabetta", 5) >
<!--- Provide a web service on the dummy query --->
<cffunction name="search" returntype="query" access="remote" output="false">
<cfargument name="searchCriteria" type="string" required="true" />
<cfset var result = "" />
<cfif len(arguments.searchCriteria)>
<cfquery dbtype="query" name="result">
SELECT
*
FROM
contacts
WHERE
UPPER(firstname) LIKE '%#ucase(arguments.searchCriteria)#%'
OR UPPER(lastname) LIKE '%#ucase(arguments.searchCriteria)#%'
</cfquery>
<cfelse>
<cfset result = contacts />
</cfif>
<cfreturn result />
</cffunction>
</cfcomponent>
And CFQuery.mxml:
<?xml version=
"1.0" encoding=
"utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*" backgroundColor="#FFFFFF" creationComplete="search()">
<!-- Service -->
<mx:WebService
id="ContactService"
wsdl="http://clearsoftware.net/net/clearsoftware/QueryDemo.cfc?WSDL"
useProxy="false" showBusyCursor="true">
<mx:operation name="search">
<mx:request>
<searchCriteria>{searchCriteria.filter}
</searchCriteria>
</mx:request>
</mx:operation>
</mx:WebService>
<mx:Model id="searchCriteria">
<filter></filter>
</mx:Model>
<mx:Script>
<![CDATA[
function search() {
searchCriteria.filter = searchString.text;
ContactService.search.send();
}
]]>
</mx:Script>
<mx:ArrayCollection id="ac"
source="{mx.utils.ArrayUtil.toArray(ContactService.search.result)}"/>
<mx:Panel height="100%" width="100%" backgroundColor="#CCCCCC" cornerRadius="5" title="Model-Glue Code Contributors">
<mx:Canvas height="100%" width="100%">
<mx:TextInput id="searchString" y="9">
<mx:layoutConstraints>
<mx:EdgeAnchor right="58" left="75"/>
</mx:layoutConstraints>
</mx:TextInput>
<mx:Label x="5" y="12" text="Filter:"/>
<mx:Button label="Ok" id="searchButton" click="search()" y="9">
<mx:layoutConstraints>
<mx:EdgeAnchor right="5"/>
</mx:layoutConstraints>
</mx:Button>
<mx:DataGrid dataProvider="{ac}">
<mx:layoutConstraints>
<mx:EdgeAnchor right="5" left="5" bottom="5" top="37"/>
</mx:layoutConstraints>
<mx:columns>
<mx:DataGridColumn columnName="Firstname" headerText="First Name"/>
<mx:DataGridColumn columnName="Lastname" headerText="Last Name"/>
</mx:columns>
</mx:DataGrid>
</mx:Canvas>
</mx:Panel>
</mx:Application>15 comments - Posted by Joe Rinehart at 8:41 PM - Categories: Flex and ColdFusion