Using Flash Forms Inside Of CF 8 Ajax Containers
Posted By : todd sharp Posted At : August 20, 2007 3:58 PM Posted In: Ajax, Flash Forms, ColdFusion
12
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.
Hey I would like to point something here.
Don't Go for Flash Forms create a PNG Form and then use cffile action"writetobrowser" to write the chart contents in the window.
use <cfsavecontent to save cfchart contents.
if u stuck anywhere, please drop here or email me
Cheers
I am currently using a work around similar to one you suggest. I use a png type cfchart in a cfc.
I would still prefer to be able to use a flash chart in order to take advantage of it's enhanced interactivity. This is possible in FF so there is most likely a hack to get it to work in IE.
I think you may be refering to cfimage with action="writeToBrowser" although I
'm not sure why that is necessary in this case.
Thanks for help Gavy