remote
     synthesis

Objects and Composition- Connecting to Flex

Posted on Jul 20, 2007

So, let's review for a second. In this series, we have gone from doing basic objects with composition and no framework and on to using ColdSpring and finally using both ColdSpring and Transfer, all the while utilizing code generated by my Illudium PU-36 Code Generator. In this example we are going to take a step back, of sorts, to our ColdSpring example. We will examine how, using the same back-end code we created in step 2, we can connect our application to a Flex user-interface with only a simple change to our ColdSpring configuration. As you will see this is much easier than it may sound.

Configuring ColdSpring for Auto-remoting
Assuming you have all the example files already set up from part 2, open up the /config/services.xml file. In my example we are simply going to remote a single method from our ConsoleService.cfc for getting back the games we inserted when we ran the ColdSpring example files and we will display them in a Flex DataGrid. Taking a look at the ColdSpring remoting documentation we will essentially copy the XML snippet from there, simply changing the values as needed. Beneath the console service bean definition in the ColdSpring configuration file, add the following:

<bean id="consoleService_remote" class="coldspring.aop.framework.RemoteFactoryBean">
<property name="target">
<ref bean="consoleService" />
</property>
<property name="serviceName">
<value>
consoleServiceRemote</value>
</property>
<property name="beanFactoryName">
<value>
factory</value>
</property>
<property name="relativePath">
<value>
/com/xbox/</value>
</property>
<property name="remoteMethodNames">
<value>
getGames</value>
</property>
</bean>

In this XML snippet, we have defined a new ColdSpring object named "consoleService_remote" that uses a special class type for remote facades in ColdSpring. The target is the bean definition I am targeting, our previously defined "consoleService." The service name is the name it will give the generated file that will serve as the facade. The next line isn't actually in the documentation, but it is very important. If you refer to the prior example, you will note that I put the ColdSpring factory in an application variable named "factory." This line tells ColdSpring to look for it there, and without this you will run into the same issues I did (thanks to Brian Kotek for the tip). The relative path is where the generated file will be created on the file system. Lastly, the remote method names is a pattern that defines what methods we want to remote (in this case just one, but if we wanted all we might say * or for all getters we might say get*).

The ColdFusion Code
So, if the configuration was easy, the ColdFusion code is even easier. All we need to do is load ColdSpring the same as we did before and simply tell it to create the facade. Here is the code (note: the first two lines are the same as from the prior ColdSpring example, only the third line is new and it simply tells ColdSpring to generate the remote facade file):

<cfset application.factory= createObject("component","coldspring.beans.DefaultXmlBeanFactory").init(defaultProperties=props)/>
<cfset application.factory.loadBeansFromXmlFile(expandPath("/config/services.xml"),true)/>
<cfset application.factory.getBean("consoleService_remote") />

That's it from a ColdFusion code standpoint!

The Flex Code
Ok, so the point of this is just to show that you can connect and get this running easily, not to create a nice Flex UI. So, along those lines, I have only created a simple single page template. The template has a remote object to call my ColdSpring generated facade as well as a single dataGrid with a data-binding to the data returned by our getGames() remote method call. When you run compiled swf embedded inside your index.cfm page, you should see something like what is in the image to the right. Here's the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
<mx:RemoteObject id="xboxServices" destination="ColdFusion" source="csFlex.com.xbox.consoleServiceRemote" result="setConsoles(event)" fault="Alert.show(String(event.fault)), 'Error'">
<mx:method name="getGames" />
</mx:RemoteObject>
<mx:Script>
<![CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; [Bindable] public var games:ArrayCollection = new ArrayCollection; private function initApp():void { xboxServices.getGames(); } private function setConsoles(event:ResultEvent):void { games.source = event.result as Array; } ]]>
</mx:Script>
<mx:Canvas width="500" height="400">
<mx:DataGrid id="showConsoles" dataProvider="{games}">
</mx:DataGrid>
</mx:Canvas>
</mx:Application>

Conclusion
As you can see, we just pulled data in from the same back end code that we wrote earlier for our ColdFusion object-oriented application and connected it to Flex without a single modification. We were also able to easily make that data available via a remote method with a simple change to our configuration file and a single line of ColdFusion code. So, with a little help from ColdSpring and the Illudium PU-36 Code Generator, ColdFusion does indeed live up to its promise of being the easiest way to connect to Flex.

Comments

Brian, really enjoying this series of posts.

Just wanted to note:

I'm running CF (8,0,0,171647) on Vista.
And I had to change the returntype to "array" in the ColdSpring generated remote proxy to get the example to work.

Posted By Chris Phillips / Posted on 08/21/2007 at 5:40 PM