Discovering CFMX 7: Flash Forms - Part 1

By: Adrian Senior

In this tutorial we will be investigating the use of the new interactive forms that can be found in the recent release of ColdFusion MX 7. In particular we will be looking at the flash forms. I'm sure you will find this new offering in ColdFusion MX 7 a great time saver. Let's see what we can do with the new tags and attributes.

To begin, we need to realize that what we are working with is the cfform, not an html form. This means we obviously need to be using the ColdFusion versions of the html tags; we will see a few more ColdFusion tags that aren't available in html. It is these ColdFusion tags that add the functionality into our flash forms, as we shall see.

On with the show, let's build the CMX dating agency application form!

So, how do we lay out a ColdFusion form? We begin with the ColdFusion form tag, <cfform>.

Code block 1: The cfform tags

Not so very different from your standard html form tags, we just have the addition of the cf prefix. Let's build on that. Take at look at Code block 2, there you will see that we have been able to define a width for the form and we have defined the format type of flash. This allows us to have some control over the area the form will occupy and by adding the format type of Flash, ColdFusion MX 7 will automatically render this as a Flash form. Instant Flash at your finger tips! No other Flash knowledge is required, you simply need to know how to spell Flash; even my Flash knowledge stretches that far!

Code block 2: Defining the format and the width

Note that if you use a unit for the width such as width="500px" instead of width="500" then the form fails to generate. So no units of measurement in the width value or you won't see anything where your form should be.

Getting Some <cfinputs> in There

Now that we have the cfform in place we need to give our users something to fill in, often helps when structuring a form. :) Once again, we will be using the ColdFusion version of the html input tag, this takes the form of cfinput. I'm sure you're beginning to notice a trend in the naming of the ColdFusion elements. Let's assume we need to gather the following data from our form:

First Name
Last Name
Gender
Age (4 radio buttons)
Email Address
Telephone Number
Fax Number

Using the<cfinput tag we can build our cfinputs as shown in Code block 3. Note the syntax for our ColdFusion radio button — the type has changed from text to radio.

Code block 3: Coding a cfinput

As you can see from the code above, we have used the cfinput tag, we have given the cfinput a name with the name attribute, we have defined its type and given it a label with the label attribute.

We will build on that to create the cfinputs that I have given in the list above. Once you have built all your cfinputs your cfform should look like the code shown in Code block 4 below.

Code block 4: Our completed cfform code

Previewing your page in the browser of your choice will give you a form that looks like the one below:

Image 1: Our first CFMX 7 flash form!

At the moment we are not exerting any control over the forms appearance. If your monitor is wide enough for this form to display in one long line horizontally then that's what it will do, with this in mind your view may differ from mine. We will look at controlling the forms layout on the next page of this tutorial.

Controlling the form's appearance

We'll begin this section of the tutorial by introducing the cfformgroup tag. This, as the name implies, allows you to group certain form elements together. A logical choice at this point would be to group the First Name, Last Name and Gender cfinputs, so that is what we'll do first.

Code block 5: Introducing the cfformgroup tag

You will notice the type attribute of the cfformgroup tag is set to horizontal, this could also be vertical. In this instance horizontal suits our needs better. The cfformgroup tag affects all the form cfinputs between its opening and closing tags, so you need to take care as to where you are placing your cfinputs in relation to your cfformgroup tags. Let's move on and perform the same task by grouping our radio buttons. You can see the code in Code block 6, below.

Code block 6: Grouping our radio buttons

Preview your work to date in your browser of choice. Your form should now look like Image 2. Our form is beginning to shape up a little bit now.

Image 2: Looking much nicer

But wait, we aren't done yet. We will take a look at splitting this form up into manageable sections. While it may not be absolutely necessary in this instance, it is often a help if we can break a form down into sections, especially long forms. The new cfformgroup tag has other attributes that can help us to set our form up into groups very, very easily.

Code block 7: The tabnavigator and the page values

The tabnavigator wraps our cfform and allows us to break it down into manageable sections. The page value allows us to define the sections we want to appear as tab. Let's look at some working code:

Code block 8: Using the tabnavigator and page values

Remember, the tabnavigator tells CFMX 7 that this is a tabbable form and the page sections define the individual tabs. The label in the cfformgroup tag that holds the page value provides the title for the tab.

Let's look at the completed code:

Code block 9: The section that creates the first tab is high-lighted

Our form is broken down into three tabs, as shown in Code block 9. The final </cfformgroup> tag that I have high-lighted is the closing tag for our tabnavigator.

Preview your form in your browser of choice.

Your final form should look like that shown in Image 3 below. Our users can click through the tabs as they work through the form. The submit button only appears on the last tab.

Image 3: Tab 1

Image 4: Tab 2

Image 5: Tab 3

Skinning your flash forms

Finally, we have an option to change the appearance of our flash forms. To change the forms appearance we can use the skin attribute of the cfform tag. We have four options to choose from, they are:

haloblue
halogreen
haloorange
halosilver

Code block 10 below shows you the use of the skin attribute. Throughout this tutorial we have used the default halogreen skin, to change this you need to declare a specific skin from the choices above. In Code block 10 we are switching the skin to haloblue.

Code block 10: Calling the haloblue skin

All the skins are already present on the CFMX 7 server, you have no need to upload them. Simply referencing it is all you have to do to apply it to your form.

Binding your form data

Finally we will look at binding our form data. Binding allows us to present the form data our users have entered for a final check. We can present this data in groups, both horizontally and vertically using the cfformgroup tag and attributes; exactly as we have seen earlier in this tutorial. First we will want to create a fourth tab, this tab we will give a label of Done and it will show our users all the data they have entered into the form. Create your fourth tab now, just as we have done earlier in this tutorial; then you can begin binding the data.

Let's take a look at the syntax for binding:

Code block 11: Binding the form data for display in our final tab

The first thing you will notice is the new tag, cfformitem. This tag wraps each of the form items we want to bind and each of the formitems must reference the cfinput by name for the information they are going to display. The syntax for the bind will differ depending on the form control, for a simple cfinput the syntax is:

bind="{cfinputname.datatype}"

A radio button obviously isn't a textfield, so its value would not be text, as shown in Code block 11.

Code block 12: Binding a radio button

For a radio button we would use the selectedData type for the value. You can find more on binding in the live docs at Macromedia.

Once you have grouped your data and bound it you can display it to the user ready for submitting.

Image 6: Your completed form ready for submitting

Our last job is to add the submit button so the user can send the information to us.

Code block 13: Adding the submit button

The syntax for the submit button is much the same as that for a standard html submit button. The main change is of course the use of the cfinput rather than the html input. We place the code for the submit button immediately before the closing cfformgroup tag of the final form group. This ensures the button is correctly placed at the bottom of the final tab.

Conclusion

In this tutorial, we have looked at some of the new features available for building Flash forms in CFMX 7. We have discovered tabbed forms and how we can set up and lay out our cfinputs. We have seen the page value and put it to good use. CFMX 7 makes it very easy for us to create rich media forms, what could be easier than format="flash"?

Next, we covered the skinning of the forms. We saw that by not declaring a skin then the default halogreen skin is applied. We have also seen how we can change the skin with the use of the skin attribute and the options that are available to us natively on the CFMX 7 server.

Finally, we covered data binding to show our users the data they provided before they submit the form. This is a helpful feature when using a tabbed interface.

Way to go Macromedia!

Keywords
ColdFusion, MX, 7, CFMX, flash, forms, paging, page, tabnavigator, tabnavigation, cfform, cfinput, skins, skin, haloblue, halogreen, halosilver, haloorange.

Latest New Content

Search CMX

Latest Free Content

View All
Free Content

Accessibility

CMX Learning Guides

Discovering CFMX 7: Flash Forms - Part 1

By: Adrian Senior

Getting Some <cfinputs> in There

Controlling the form's appearance

Skinning your flash forms

Binding your form data

Conclusion

Latest New Content

Search CMX

Latest Free Content

View All Free Content

Accessibility

CMX Learning Guides

Discovering CFMX 7: Flash Forms - Part 1

By: Adrian Senior

Getting Some <cfinputs> in There

Controlling the form's appearance

Skinning your flash forms

Binding your form data

Conclusion

View All
Free Content