Using New Flex 3 Features With ColdFusion 8

Flex 3 introduces some important new controls to Flex. Some of these, like the Advanced Data Grid, will be of real interest to us ColdFusion developers. But, if you run the project wizard in Flex Builder 3 Beta 3, and select ColdFusion as the server technology and check the option to use Flash Remoting, you may find that Flex 3 controls are not available to you. Why? Because when the wizard sets up the project, it may point to an older version of the SDK, the one that ColdFusion is aware of.
The solution? Either of these two options should work:

  • Run the wizard, select ColdFusion as the server technology, but don’t check the option to use remote object access service. Then, open the project properties dialog, go to the Flex Compiler page, and add compiler flag: -services “C:ColdFusion8wwwrootWEB-INFflexservices-config.xml” (obviously changing the path as appropriate). This flag is what gets set by the wizard when you opt to use Flash Remoting.
  • Run the wizard as you usually do. Then, open the project properties dialog, go to the Flex Compiler page, and change the Flex SDK version to use the Flex 3 SDK. (Although, I think the prior option is the safer one).

17 responses to “Using New Flex 3 Features With ColdFusion 8”

  1. Faisal Abid Avatar
    Faisal Abid

    I have been using option 2 for quite some time now

  2. Andrew Avatar

    Is there a standard services-config.xml file that already has a ColdFusion destination set up that people can download? I’m having a lot of trouble getting Flex to talk to ColdFusion.

  3. Ben Forta Avatar
    Ben Forta

    Faisal, good to know, thanks.
    Andrew, yep, it is in the flex folder under ColdFusion’s WEB-INF folder.
    — Ben

  4. Andrew Avatar

    I emailed you earlier about the Flex servies-onfig.xml file and how to configure it to use with CF. Here’s my services-config.xml file:
    <?xml version="1.0" encoding="UTF-8"?>
    <service-include file-path="remoting-config.xml" />
    <service-include file-path="proxy-config.xml" />
    <service-include file-path="messaging-config.xml" />
    <service-include file-path="data-management-config.xml" />
    <login-command class="" server="JRun"/>
    <!– Uncomment the correct app server
    <login-command class="" server="Tomcat"/>
    <login-command class="" server="Weblogic"/>
    <login-command class="" server="WebSphere"/>
    <security-constraint id="basic-read-access">
    <destination id="ColdFusion">
    <channel ref="my-cfamf" />
    <!– CF Based Endpoints –>
    <channel-definition id="my-cfamf" class="mx.messaging.channels.AMFChannel">
    <endpoint uri="http://{}:{server.port}{context.root}/flex2gateway/" class="flex.messaging.endpoints.AMFEndpoint"/>
    <channel-definition id="cf-polling-amf" class="mx.messaging.channels.AMFChannel">
    <endpoint uri="http://{}:{server.port}{context.root}/flex2gateway/cfamfpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
    <channel-definition id="my-cfamf-secure" class="mx.messaging.channels.SecureAMFChannel">
    <endpoint uri="https://{}:{server.port}{context.root}/flex2gateway/cfamfsecure" class="flex.messaging.endpoints.SecureAMFEndpoint"/>
    <!– ColdFusion specific RTMP channel –>
    <channel-definition id="cf-rtmp" class="mx.messaging.channels.RTMPChannel">
    <endpoint uri="rtmp://{}:2048" class="flex.messaging.endpoints.RTMPEndpoint"/>
    <!– Java Based Endpoints –>
    <channel-definition id="java-amf" class="mx.messaging.channels.AMFChannel">
    <endpoint uri="http://{}:{server.port}{context.root}/flex2gateway/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
    <channel-definition id="java-secure-amf" class="mx.messaging.channels.SecureAMFChannel">
    <endpoint uri="https://{}:{server.port}{context.root}/flex2gateway/amfsecure" class="flex.messaging.endpoints.SecureAMFEndpoint"/>
    <channel-definition id="java-polling-amf" class="mx.messaging.channels.AMFChannel">
    <endpoint uri="http://{}:{server.port}{context.root}/flex2gateway/amfpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
    <channel-definition id="java-rtmp" class="mx.messaging.channels.RTMPChannel">
    <endpoint uri="rtmp://{}:2036" class="flex.messaging.endpoints.RTMPEndpoint"/>
    <channel-definition id="java-http" class="mx.messaging.channels.HTTPChannel">
    <endpoint uri="http://{}:{server.port}{context.root}/flex2gateway/http" class="flex.messaging.endpoints.HTTPEndpoint"/>
    <channel-definition id="java-secure-http" class="mx.messaging.channels.SecureHTTPChannel">
    <endpoint uri="https://{}:{server.port}{context.root}/flex2gateway/httpsecure" class="flex.messaging.endpoints.SecureHTTPEndpoint"/>
    <target class="flex.messaging.log.ConsoleTarget" level="Error">
    <prefix>[Flex] </prefix>
    When I try to use this, I get the following error in Flex Builder:
    Unexpected child element ‘destination’ found in ‘services-config’ from file: services-config.xml.
    Have you ever seen this before?

  5. Clint Avatar

    If you are having any problems, you can and may need to, depending on your configuration, change:
    to the exact path. Or try leaving off {context.root} if needed.

  6. Andrew Avatar

    Clint / Ben,
    Earlier this morning I changed the {}:{port}{contextroot} to the exact path for my CF server and now I can access my data.

  7. Ken Dunnington Avatar
    Ken Dunnington

    Is there documentation available for the services-config.xml? In Flex 2, I recall this file being simpler, and I use (based on a blog entry Ben posted, actually) local copies of this file to point specific projects at specific, remote ColdFusion servers. This is especially handy for debugging CF services that work locally, but not remotely. This is harder to set up in Flex 3, since you need (I assume) 4 other files. I’ve gotten this to work in Flex 3, but it would be nice to strip out all the stuff I don’t need and just drop in a customized file in the local libs/ folder.

  8. Meh Avatar

    Changing this stuff
    to the exact path isn’t really a good solution. What if you’re deploying to multiple servers? Does anyone know where these variables come from?

  9. Ken Dunnington Avatar
    Ken Dunnington

    That’s why I only change it in a project-local /libs folder 🙂 I don’t want to change the file in WEB-INF, I always compile against that file when I’m building for production, but if I’m compiling and running/debugging a Flex app locally, but want to connect a RemoteObject to a remote server, modifying the channel definition seems like the best way. If there’s a better solution, though, I’d love to hear about it.

  10. Aneesh Shrikhande Avatar
    Aneesh Shrikhande

    I am experiencing issues connecting to ColdFusion, too. The additional wrinkle is that I use Apache as the Web server. When I put a CFC in the ColdFusion root folder, the location does not validate.
    My Flex services-config.xml file looks like the one Andrew posted earlier in the post. Under the "Flex Server" preference, I have the following two entries (that validate properly):
    Root folder: C:Program FilesApache Software FoundationApache2.2htdocscfdocs
    Root URL: http://localhost/cfdocs
    The start of the <mx:RemoteObject> is:
    <mx:RemoteObject id="myRemoteObject" destination="ColdFusion" source="RealStore.src.remoteService" showBusyCursor="true">
    I have stored the remoteService.cfc file in the C:Program FilesApache Software FoundationApache2.2htdocscfdocsRealStoresrc folder.
    I get an error that says "Ensure that the name is correct and the component or interface exists."
    I tried changing the path of the endpoint URI in the services-config.xml file from http://{}:{server.port}{context.root}/flex2gateway/ to http://localhost/cfdocs. That did not help.
    The error message wording leads me to believe that the correct faulthandler method is being invoked.
    I am clearly missing something simple. Any thoughts/pointers?
    Thanks in advance,
    Aneesh Shrikhande
    (860) 713-1603

  11. Scott Avatar

    What if I’m running CF on a remote linux server? It doesn’t look like I can configure the new project to look at the remote CF server.

  12. Business Directory Avatar
    Business Directory

    Scott – You can configure it to automatically redirect to the ColdFusion being run on the remote Linux server. Just read over the configuration manual once again and you’ll get the hang of it.

  13. Business Directory Avatar
    Business Directory

    You could even try visiting my site and navigate to the "Guides" section to find the manual. I’ve highlighted the relevant section.

  14. Business Directory Avatar
    Business Directory

    Oops! Sorry for yet another comment but I mistyped my website. It’s actually BusinessMinded is a site I’m just about to develop.

  15. Learner Avatar

    Hi I m in the same problem , the url is showing error. I have found -as suggestion from Google. DO you meant that ? where is the guide

  16. chcampbe Avatar

    I need to set the FLEX3 compiler services arguement to the services-config file on a separate server (multiple instances of CF) on our network.
    Any suggestions on how to ‘map’ to that file’s path?

  17. Christopher Rivera Avatar
    Christopher Rivera

    I am trying to save a image to my coldfusion server of a chart that is displaying in my flex application.
    1. coldfusion is installed using JRUN
    2. IIS
    3. my component is installed wwwroot/com/
    4. services-config.xml are the same as the one displayed
    When i run the flex application and click on the export button i always get a error.
    headers = (Object)#2
    messageId = "A408C832-AB35-9F2F-8942-2135EB342B38"
    rootCause = (
    bubbles = false
    cancelable = false
    channel = (mx.messaging.channels::AMFChannel)#4
    authenticated = false
    channelSets = (Array)#5
    [0] (mx.messaging::ChannelSet)#6
    authenticated = false
    channelIds = (Array)#7
    [0] (null)
    channels = (Array)#8
    [0] (mx.messaging.channels::AMFChannel)#4
    clustered = false
    connected = false
    currentChannel = (mx.messaging.channels::AMFChannel)#4
    initialDestinationId = (null)
    messageAgents = (Array)#9
    [0] (mx.rpc::AsyncRequest)#10
    authenticated = false
    autoConnect = true
    channelSet = (mx.messaging::ChannelSet)#6
    clientId = (null)
    connected = false
    defaultHeaders = (null)
    destination = "ColdFusion"
    id = "670D230D-F8DC-D7FA-3B5E-21358B531BA7"
    reconnectAttempts = 0
    reconnectInterval = 0
    requestTimeout = -1
    subtopic = ""
    connected = false
    connectTimeout = -1
    enableSmallMessages = true
    endpoint = "http://localhost:8300/flex2gateway/&quot;
    failoverURIs = (Array)#11
    id = (null)
    mpiEnabled = false
    netConnection = (
    client = (mx.messaging.channels::AMFChannel)#4
    connected = false
    objectEncoding = 3
    proxyType = "none"
    uri = "http://localhost:8300/flex2gateway/&quot;
    piggybackingEnabled = false
    polling = false
    pollingEnabled = true
    pollingInterval = 3000
    protocol = "http"
    reconnecting = false
    recordMessageSizes = false
    recordMessageTimes = false
    requestTimeout = -1
    uri = "/flex2gateway/"
    url = "/flex2gateway/"
    useSmallMessages = false
    channelId = (null)
    connected = false
    currentTarget = (mx.messaging.channels::AMFChannel)#4
    eventPhase = 2
    faultCode = "Channel.Connect.Failed"
    faultDetail = "NetConnection.Call.Failed: HTTP: Failed: url: ‘http://localhost:8300/flex2gateway/’"
    faultString = "error"
    reconnecting = false
    rejected = false
    rootCause = (Object)#13
    code = "NetConnection.Call.Failed"
    This is the code i am using:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="; layout="absolute"
    creationComplete="prcXMLFeed.send()" backgroundGradientAlphas="[1.0, 1.0]"
    backgroundGradientColors="[#FFFFFF, #F6F7FF]" width="920" height="620">
    .topSeries {
    .middleSeries {
    import mx.controls.Alert;
    private var buttonsEnabled:Boolean = true;
    private const jpgEnc:JPEGEncoder = new JPEGEncoder(75);
    private function takeSnapshot(source:IBitmapDrawable):ByteArray {
    var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(source,150,jpgEnc);
    var imageByteArray:ByteArray = as ByteArray;
    return imageByteArray;
    private function exportImageToJPG():void{
    buttonsEnabled = false;
    var data:ByteArray = takeSnapshot(graphicChart);
    private function onResult(message:String):void
    buttonsEnabled = true;
    private function onFault(event:FaultEvent):void
    {"Server Fault: " + event.message);
    buttonsEnabled = true;
    <mx:RemoteObject id="ro" showBusyCursor="true" endpoint="/flex2gateway/"
    destination="ColdFusion" source="com.ScreenExports">
    <mx:method name="saveAsImage" result="onResult(‘Charts saved as JPG.’)" fault="onFault(event)" />
    <mx:HTTPService id="prcXMLFeed" method="POST" resultFormat="e4x" url="http://localhost/xml/prcXml01.cfm"&gt;
    <mx:request xmlns="">
    <mx:FormItem label="Date:">
    <mx:DateField id="todaysdate"/>
    <mx:FormItem label="View:">
    <mx:ComboBox id="wmy">
    <mx:Object label="Week" data="1" />
    <mx:Object label="Month" data="2" />
    <mx:Object label="Year" data="3" />
    <mx:Button label="Update" id="btnSubmit" click="prcXMLFeed.send()"/>
    <mx:Button label="Export Image" click="exportImageToJPG()" enabled="{buttonsEnabled}"/>
    <mx:SeriesSlide id="slideIn" duration="1000" direction="up"/>
    <mx:SeriesSlide id="slideOut" duration="1000" direction="down"/>
    <mx:Canvas x="0" y="62" width="920" height="558" id="graphicChart">
    <mx:ColumnChart dataProvider="{prcXMLFeed.lastResult.result}"
    x="10" y="46" id="tktWeekly"
    width="880" height="453" showDataTips="true" type="stacked">
    <mx:CategoryAxis categoryField="ddate"/>
    <mx:ColumnSeries styleName="middleSeries" showDataEffect="{slideIn}" hideDataEffect="{slideOut}" displayName="New Site Build Tickets Closed" yField="nsbc"/>
    <mx:ColumnSeries styleName="middleSeries" showDataEffect="{slideIn}" hideDataEffect="{slideOut}" displayName="Update Request Tickets Closed" yField="urtc"/>
    <mx:ColumnSeries styleName="middleSeries" showDataEffect="{slideIn}" hideDataEffect="{slideOut}" displayName="Need More Info Tickets" yField="nmit"/>
    <mx:ColumnSeries styleName="middleSeries" showDataEffect="{slideIn}" hideDataEffect="{slideOut}" displayName="Delayed Tickets" yField="dts"/>
    <mx:ColumnSeries styleName="middleSeries" showDataEffect="{slideIn}" hideDataEffect="{slideOut}" displayName="Pending Approval Tickets" yField="pat"/>
    <mx:Legend direction="horizontal" dataProvider="{tktWeekly}" x="5" y="510"/>
    <mx:Label x="10" y="10" text="Daily Numbers 3" fontSize="18"/>

Leave a Reply