Sam Farmer

Growing up I never imagined I would play bass guitar for the Dave Matthews Band. And indeed it never happened.

But I have become passionate about making software.

Thoughts on building with a ColdFusion Builder extension with Flex

June 21, 2010

I thought Builder extensions operated in a funny web browser that meant you could use html, including forms, but returned data in some funny XML format.  Oh how wrong I was.  You can use html but only for outputting information.  The most common way to write extensions is by using the built in Eclipse input types which pass data to ColdFusion via that funny XML format I spoke about earlier.  They are great if you are looking to tie into Eclipse but I wanted some UI tools to list data, a textarea to edit and a nice chart.

[UPDATE 6/30/10: There is an easier way.  Read this blog entry]

So, it was on to using Flex to build a front end that had the UI controls I needed and started by reading this great blog post by Terry Ryan.

This method works by writing a CFC webservice exposed via WSDL to pass data back and forth.  Terry used XML as a data transformation protocol.  Now, for me, XML is like warm beer.  Its there to be drunk, but first, lets see if there's a cold one around.  I decided to go with using cf queries to pass data around.  Combined with the Data Services panel in Flex Builder 4 this made the data transmission easy.

One drawback to this approach is that Data Services assumes the URL for the webservice will not change.  To get around this I we need to pass that path to Flex via URL variables when we call the swf from within our extension.  Don't worry its actually simpler than that sounds.

Starting on the Flex side, I opened up the generated services file and removed any mention of the wsdl path.  This gets replaced with what is passed in during the declaration of the service, which I bind to a variable that is set based on a function called during preinitialize.  Here's the code:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  xmlns:service="services.service.*"
                  preinitialize="init()">
                 
<fx:Script>
<![CDATA[
     [Bindable]
     public var wsdlPath:String = "";
    
     protected function init():void
     {
          wsdlPath = this.parameters.wsdlPath;
     }
]]>
</fx:Script>
<fx:Declarations>
     <service:Service id="service" wsdl="{wsdlPath}" useProxy="false" />
</fx:Declarations>

Thats a slightly simplified version.  All the code is available in the subversion repository.  (If you are a Flex developer and you know a better way please let me know.  I'm a newbie when it comes to Flex.)

On the ColdFusion side we need to pass in the server path to the swf.  Here's code for that, loosely based on Terry's code.

 

<cfscript>
if ( ! len( cgi.HTTPS ) ) {
     serverRoot = "http://" & cgi.HTTP_HOST & ":" & cgi.SERVER_PORT;
} else {
     serverRoot = "https://" & cgi.HTTP_HOST & ":" & cgi.SERVER_PORT_SECURE;
}
serverRoot &= getDirectoryFromPath( cgi.script_name );
wsdlPath = serverRoot & "Service.cfc?wsdl";
flashPath = serverRoot & "flash/VFSe.swf?wsdlPath=#urlEncodedFormat( wsdlPath )#";
</cfscript>    
 
<cfcontent reset="true">
<cfheader name="Content-Type" value="text/xml">
<cfoutput>
<response showresponse="true">
     <ide url="#flashPath#" >
          <dialog title="All these files are virtual..." width="1000" height="1000" />
     </ide>
</response>
</cfoutput>

 

Overall I found building an extension with Flex pretty straightforward and just by using the default Spark look the UI is pretty attractive.


No Comments

Some comments have been lost over the years due to moving hosts.

More


More blog entries that I have written.

Code coloring by PRISM.