This morning I posted about using PDFs in Flash Forms. The short answer was that it was not possible. On the entry, Simeon mentioned he was working on a way to get Flash Paper into Flash Forms. That was enough to distract me and see if I could build it as well. What's nice is that you can use the same technique I talked about during my series on embedding charts in Flash Forms. Consider the following code sample:
<h1>Flash Paper Help</h1>
<p>
The following text would normally describe how a person would fill out the form.
It could discuss what the fields mean. Of course, most people don't need help
filling out forms, and if they do, they probably shouldn't be in front of a computer
anyway.
</p>
</cfdocument>
<cfset fileName = expandPath("./flashpaper.swf")>
<cffile action="write" file="#filename#" output="#fp#">
<cfform name="test" format="flash" width="650" height="600">
<cfformgroup type="tabnavigator">
<cfformgroup type="page" label="Registration Form">
<cfinput type="text" name="name" label="Name" required="true">
<cfinput type="text" name="email" label="Email" required="true">
<cfinput type="text" name="age" label="Age" required="true">
<cfinput type="text" name="something" label="Something" required="true">
</cfformgroup>
<cfformgroup type="page" label="Help">
<cfformitem type="html" height="500" width="600"><img src="flashpaper.swf" width="500" height="600"></cfformitem>
</cfformgroup>
</cfformgroup>
</cfform>
We start off by generating the FlashPaper SWF and storing it into a variable. This data then gets written to a file. Normally you would not want to do this for every request. Once we have the FlashPaper stored, we can then reference it simply by using an IMG tag. In my example, I put the Help documentation in a different tag. The main problem had with this example was spacing. The IMG tag's width and height attributes didn't seem to be respected by the SWF. I'm sure a reader out there will figure out why...
Archived Comments
awesome, I think this will work just fine. Thanks!
How about another question though. You know how when you browse a flash form and then go to another page, if you hit the back button the flash form is expired? Can you think of any way to be able to programatically know that the form has expired and reload the page automatically?
Sorry, no. You do know you can control the timeout behavior though, right?
I had it in my head that the timeout was just for caching, i didn't realize it would affect it when you went back to it. Thats great, thanks!
I am pretty sure I saw a comment in the live docs that had some js for fixing the back problem on flashforms.
However just in case you are doing somethign like I am, which is displaying different flashpaper docs, I will share some of the fun I have had. In addition do doing exactly what ray has done above, I added buttons to the top of the form to allow people to load different docs into the space. I also played with using tabs and displaying the content on the different tabs.
Back on rays post above. After several hours I have decided that although we can load .swf files using the img tag, we can not control their hieght and width. if you use some AS to load an image using the same html the jpg will respect the attributes but the flashpaper wont. I had decided that the fact that your other example worked so well was because the graphs were something we could control the output size of to begin with.
My next task is to try to hack a swf to actually load into one of the container types. Because if we can do this, then we can access the flashpaper api which will allow us to both set the size of the document, but also disable features like printing and coping. Making this ideal for documents with sensitive information. Which is what I have :)
Just for the heck of it, I tried throwing this concept into an alert box to create the flashpaper in a 'popup window' - does the same unfortunate thing that the charts do - the first time you test it works great, but if you close the popup and try again (without reloading) it cuts off 99% of the doc....If anyone has ideas, please share! :)
Here is the code:
<cfdocument format="flashpaper" name="fp">
<h1>Flash Paper Help</h1>
<p>
The following text would normally describe how a person would fill out the form.
It could discuss what the fields mean. Of course, most people don't need help
filling out forms, and if they do, they probably shouldn't be in front of a computer
anyway.
</p>
</cfdocument>
<cfset fileName = expandPath("./flashpaper.swf")>
<cffile action="write" file="#filename#" output="#fp#">
<cfsavecontent variable="testFlashPaper">
var msg = '<img src="flashpaper.swf" height="300" width="400">'+' '
var alertSettings:Object = {title:'Warning', message: msg, width:600, height:400, headerHeight:27}
errorpopup = mx.managers.PopUpManager.createPopUp(this, FormErrorException, true, alertSettings);
errorpopup.centerPopUp(this);
</cfsavecontent>
<cfform name="test" format="flash" width="700" height="600">
<cfinput type="button" name="Popup_chart" value="Popup FlashPaper" onclick="#testFlashPaper#">
</cfform>
Is there some kind of weirdness going on with the img tag. I am trying to create sort of like a random picture barner on top of my flash forms and everytime the image won't load or the image gest distorted. Please help.
Just in case this thread is not dead... On the same topic, but slightly different... How could I get CF to generate a pdf on the fly (<cfdocument format="pdf" ...) without opening/displaying it, but just having it sent as an attachment using CFMAIL. I have been pulling my hair on this one...
Help appreciated... Thanks,
Alain
Just use the name attribute. It saves the PDF info to a variable.