Today is a good day to code

Flash Forms in ColdFusion MX 7

Posted: December 31st, 1969 | Author: | Filed under: ColdFusion, JavaScript, Programming, Uncategorized | Tags: , , , | No Comments »

Flash Forms in ColdFusion MX 7

Picture of Irv Owens Web DeveloperOne of the coolest things in the not-so-new-anymore ColdFusion MX 7 release is the ability to use Flex and ColdFusion tags to generate Flash components without having to design them. One of the perennial headaches for a web developer has been the difficulty in creating self-validating forms, and grid components that could take the stress of sorting off of the web or database servers.

I am not really too into screenshots so I will just show you a sample of the new flash forms. I am not sure if they validate or not, but they are definately cool. The built in forms validation is excellent also, it is handled completely on the client. If you press the submit button without entering any text in the you must enter some text field, it will show you the error. The binding is sweet too, you can bind one item to another in a form. If you notice, when entering text in the top box, you will see the bottom box mirroring it.
Flash Form Example

That is sweet for many different reasons, here is the code behind it:

<cfform name="code" action="http://www.owensperformance.com/test/formExample.cfm" method="post" format="flash" height="600" width="639" preloader="true" timeout="100" preservedata="yes">

<cfformgroup type="tabnavigator">

<cfformgroup type="page" label="Text Entry">

<cfformitem type="text">Enter Some Text

<cfinput name="aninput" type="text" required="yes" message="You must enter some text" />

<cfformitem type="text">Bound to the Above Text Box

<cfinput name="bound_input" type="text" bind="{aninput.text}" />

<cfformitem type="text">A Text Area

<cftextarea name="moreText" value="Some More Text" />

</cfformgroup>

<cfformgroup type="page" label="Grid Component">

<cfgrid name="myGrid" width="624" height="350" query="theQuery" format="flash" align="absmiddle">

<cfgridcolumn name="title" header="Title" />

<cfgridcolumn name="dateEntered" header="Title" />

</cfgrid>

</cfformgroup>

</cfformgroup>

<cfinput name="Submit" value="Submit" type="submit" />

</cfform>

Another really cool item is the cfgrid component. It is a fully featured flash grid that can show any number of objects. I am toying with the idea of implenting it on my search page, using javascript to show and hide the results, but that seems like overkill. I would show one to you in action, but you’ll just have to settle for the code.

This will create a nice grid component that handles sorting for you. It will draw its data from the query myQuery. Each column will pull from the field in the database according to its name. For example the date column will get its data from #myQuery.date#. The others will get their data similarly. I don’t know why I didn’t use flash forms before. They are certainly cool. You can bind to the data in the columns so you could have a field that would allow you to edit the currently selected field in the database. This is extremely handy in creating sensible and usable forms. I hope this helps, some java application servers don’t support flash forms, in fact I am not certain that this one will. However I’ll try, if it doesn’t work, at least the code may be helpful.