Using Flash Forms Inside Of CF 8 Ajax Containers
A comment on Ray's post about cfgrid renderers today asked why a Flash form grid would not load inside of a cfwindow. I mentioned the reason why Flash Forms/Flex SWF's won't load without modifications previous post, but wanted to throw out a reminder in case folks may have missed it.
When working with Ajax UI elements in CF 8, if your container has any references to external JavaScript libraries they will likely not work. What some folks may not remember offhand is that Flash Forms are dependant on a few external scripts to work their magic, so including those in your main template (the one that calls the cfwindow) will get things to work properly.
Here's a quick conversion of Ray's code to a Flash format grid inside of a cfwindow. Please note that the rendering functionality that Ray blogged about will not work with the Flash grid - it is specific to the Ext grid - but this conversion just shows how it is possible to load a Flash Form in a cfwindow...
index.cfm:
<script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
<script type="text/javascript" charset='utf-8' src='/CFIDE/scripts/cfformhistory.js'></script>
<script type="text/javascript" charset='utf-8' src='/CFIDE/scripts/CF_RunActiveContent.js'></script>
<cfwindow name="gridWin" title="grid" initShow="true" closable="true" source="win.cfm" />
win.cfm
<cfloop from=1 to=10 index="x">
<cfset total = randRange(20,100) & "." & randRange(1,99)>
<cfset product = "Product #X#">
<cfset queryAddRow(data)>
<cfset querySetCell(data, "price", total+0, x)>
<cfset querySetCell(data, "product", product, x)>
</cfloop>
<cfform name="test" format="flash">
<cfgrid name="data" query="data" width="600">
<cfgridcolumn name="price" header="Price">
<cfgridcolumn name="product" header="Product">
</cfgrid>
</cfform>
Update: As usual - there are issues with IE 7 with this demo. I will revisit...



Great example. I never bothered to try and get the flash grid to work within an ajax container I figured the ajax grid was lighter in weight and faster to render than a flash grid.
Gary: I certainly agree with you - this was really more of a proof of concept.
Instead of loading the content into the cflayoutarea it loads a new page with just the .swf.
I have tried adding the javascript files (that I know of) to the main page but still have no luck.
Do you know which files I should include to get this content to load?
Thanks for your help!
Cathy
Any update on the IE7 issues?
I cannot get this to work properly in IE7.
Thanks for the update,
Wim.
Did I miss something?
here is code:
index.cfm:
<cfajaximport tags="cfwindow">
<a href="##" onClick="ColdFusion.Window.create('theWindow', 'hasChart','chart.cfm')">Click here</a>
chart.cfm:
<cfchart>
<cfchartseries type="pie">
<cfchartdata value="25" item="things">
<cfchartdata value="25" item="stuff">
<cfchartdata value="50" item="shenanigans">
</cfchartseries>
</cfchart>
any suggestions would be much appreciated.