panelBorderStyle: 'roundCorners';
The upper corners of a panel are always round by default. The bottom corners aren't, so we use this property to make them round like the top corners.

You may be wondering why we need to use double # when specifying the colors. That's necessary because otherwise ColdFusion will interpret them as variables and throw a compile error. It's similar to the character escaping required when outputting html with inline font colors inside <cfoutput> tags

The other two panels have similar properties with different color values. In addition, the small panel at the bottom has no header, given by the style "headerHeight:0."

Step 7 - More User Interactivity
So far we have some functionality like populating the Preview and Edit panels on user selection of a contact in the contact list. We'll add some more interactivity by showing or hiding panels and changing the label of the buttons depending on the current activity.

When we first load the application, we see the list of contacts on the left, the Preview panel on the right, and a small panel with a checkbox at the bottom. We don't see the Edit panel. Why? Because it's hidden, we are in "view" mode. (See Figure 5.) Also note that the checkbox at the bottom "Show Edit Window" is unchecked.

<cfinput type="checkbox" name="editShow" checked="false" label="Show Edit Window" />

If we want to edit the selected contact, we can click the checkbox and the bottom panel will appear and the top panel will shrink (). We achieve that effect by binding two attributes of the panel, the visibility and height, to the state of the checkbox:

<cfformgroup type="panel" label="Edit"
visible="{editShow.selected}" height="{editShow.selected ? 332 : 0 }">

We can access the checked state of checkboxes by reading the "selected" property. In this case, if the checkbox is selected, it will set the visible property of the panel as true and the height of the panel will be set as 332 pixels, effectively making it bigger and shrinking the upper panel. On the other hand, if the checkbox isn't checked, the height of the panel will be 0 pixels and its visible property will be false.

But that's not the only way we can show the bottom panel. If we want to add a new contact, we need the Edit panel to be visible and all its fields empty ready for new data (see Figure 6). If you remember, there was a button at the bottom of the contact list labeled "Add contact." If the button is clicked, we want to show a clean Edit panel:

<cfinput type="button" name="addContact" value="Add Contact"
onClick="contactList.selectedIndex = undefined; resetForm();
editShow.selected = true;" />

As you can see, the ActionScript code of the onClick attribute has three statements:

contactList.selectedIndex = undefined
which removes any current selection in the contact list,

resetForm()
a built-in function that cleans all the data in the form fields, and

editShow.selected = true
which simply checks the editShow checkbox but, as we know, that triggers a couple of events because the Edit panel properties are bound to the checkbox state.

That's not all though. In "new" mode, there's only one submit button in the bottom panel "Add New," whereas in Edit mode, there are two, "Delete" and "Apply Changes." How do we make that button appear and disappear? By now we're sure you may be guessing that we can use binding in the visible attribute of the delete button.

<cfinput type="submit" name="deleteContact"
visible="{contactList.selectedItem != undefined}" value="Delete" />

The two submit buttons "Delete" and "Add New/Apply changes" simply submit the form. What we get on the server are the values of the fields just like an html form. We're sure you're familiar with html forms so we won't go over the server-side functionality. The beauty is that if you already have a regular html form, you can easily convert it into a flash form because once the form is submitted, everything looks the same, be it a flash form or an html form.

Conclusion
We've gone a long way towards making our application interface more user-friendly. And we've done that only with flash forms! We hope you'll start exploring this new feature; you'll find there's a lot more you can do with it. .

• Figure 3