I am not a ColdFusion expert.

I actually haven’t been working with ColdFusion for very long – less than a year. And the majority of that time has been spent developing things like registration forms for systems that are developed separately. I guess some developers really hate writing forms.

I guess I get it. The input part is tedious, the validation exhausting. And in the end, all you’ve really done is make it so that the end user can put their information into the database without screwing it up.

One of the things I like about Adobe ColdFusion 8 is the flash forms, which is actually a bit of a misnomer due to it actually being Flex 1.5 behind the scenes. I’ve read complaints from developers that the “skins” are very limited and boring, but personally I think they’re perfect. Granted I’m more of a back-end developer than a designer. I just enjoy things that are simple and clean.

Being a student of CF8, I find the documentation sometimes lacking a certain visual element. It’s fine to tell me about functions and tags but when you’re dealing with something on the presentation side of things, it helps to have some pretty pictures. So I’m hoping to help you out today by giving code examples and showing the results.

First off, to create a flash form, you start with a simple tag

<cfform format="flash">

This tells the ColdFusion engine to generate a swf instead of HTML to create the form.

The skins available include haloblue halogreen, haloorange, and halosilver, which you add via an optional skin=”haloblue” attribute. Haloblue seems to be the default, and it mimics the effect that Safari does when highlighting text input boxes. This code:

<cfform method="post" name="loginForm" format="flash" skin="Haloblue" height="200" width="400" preloader="true">
<cfformgroup type="page">
<cfformitem type="html" height="20"><b>Please Login</b></cfformitem>
</cfformgroup><cfformgroup type="hdividedbox" >
<!--- Group the box contents, aligned vertically. --->
</cfformgroup><cfformgroup type="vertical">
<cfinput type="text" name="uName" required="yes" label="username" width="100" tooltip="Username must be unique and only contain alphanumeric characters">
</cfinput><cfinput type="text" name="pWord" required="yes" label="password" width="100" tooltip="Password minimum 8 characters"></cfinput>
</cfformgroup>
<cfformgroup type="horizontal">
<cfinput type="checkbox" name="rememberMe" label="remember me" checked="true">
</cfinput><cfinput type="button" name="Login" value="Login"></cfinput>
</cfformgroup>
</cfform>

Produces this form:

I’ve simplified the form a bit to remove the calls to application.cfc to create the user session once logged in.

The hardest part, I find, is keeping straight the properties. Depending on how you organize the flash structure, you can generate some very interesting looking forms.

For example the tabNavigator style is visually appealing and functional, allowing the user to either click on the next tab to move on to the next part of the form. In the example below, some instructions provided by dcolumbus allowed me to control the tabs with the “next” button until the last tab, which alters the value to “finish”.

<cfform format="flash" width="600">
<cfformgroup type="tabnavigator"  height="120" style="marginTop: 0" id="tnav" onChange="if(tnav.selectedIndex>=2){nextTab.label='Finish';}else{nextTab.label='Next';}">
</cfformgroup><cfformgroup type="page" label="Contact Information *">
</cfformgroup><cfformgroup type="horizontal">
</cfformgroup><cfformgroup type="hbox" width="200">
<cfinput type="text" name="fName" label="First Name" value="" width="100">
</cfinput><cfinput type="text" name="lName" label="Last Name" value="" width="100">
</cfinput></cfformgroup>
<cfformgroup type="hbox" width="200">
<cfinput type="text"  name="uName" label="User Name" value="" width="100">
</cfinput><cfinput type="password" name="pWord" label="Password" value="" width="100"></cfinput>
</cfformgroup>
<cfformgroup type="page" label="Profile Information"></cfformgroup>
<cfformgroup type="page" label="Payment"></cfformgroup>
<cfformgroup type="horizontal">
<cfformitem type="text" width="400">*  All Fields Required</cfformitem>
<cfinput name="nextTab" onClick="if(tnav.selectedIndex>=2){tnav.selectedIndex=0;}else{tnav.selectedIndex++;}" type="button" width="100"  value="Next"></cfinput>
</cfformgroup>
</cfform>

Which creates this beautiful form:

Notice how “First Name” and “Last Name” are contained within the same , as well as “Last Name” and “Password”.

Notice what happens if i change the right “hbox” to simply “horizontal”:

You see it goes out of alignment because that’s what the hbox and vboxes are for. And of course you’ll notice that line 4 of the code is a , which tells the form to display each nested horizontally instead of stacking the two vertically.

The cfdocs available online all explain this very logically but sometimes it helps to see it in action and understand how it behaves visually.