Posted in ColdFusion | Posted on 08-11-2005 | 4,367 views
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...
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?
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 :)
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>
Help appreciated... Thanks,
Alain
[Add Comment] [Subscribe to Comments]