You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Jeremy Geelan, Maureen O'Gara, Nancy Y. Nee, Tad Anderson

Related Topics: ColdFusion

ColdFusion: Article

Constructing an Application with Flash Forms from the Ground Up

You can do much more with them than with simple forms

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,

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.

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. .

More Stories By Nahuel Foronda

Nahuel Foronda is one of the founders of Blue Instant (http://www.blueinstant.com), a web development firm specializing in Rich Internet Applications where he has been creating award-winning applications and offering training for the last five years. He also maintains a blog, called AS Fusion (http://www.asfusion.com), where he writes about Flash, ColdFusion and other web technologies.

More Stories By Laura Arguello

Laura Arguello is one of the founders of Blue Instant (http://www.blueinstant.com), a web development firm specializing in Rich Internet Applications where she has been creating award-winning applications and offering training for the last five years. She also maintains a blog, called AS Fusion (http://www.asfusion.com), where she writes about Flash, ColdFusion and other web technologies.

Comments (11) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

Most Recent Comments
RockDad 11/06/08 01:39:48 PM EST

How would one modify this app to only allow employees to edit their own information assuming there is a cookie identifier already setup?

RockDad 11/03/08 02:08:32 PM EST

GREAT tutorial but how does one bind a cfselect object with the grid? Tried it and it doesn't work. Any ideas?

Mike 01/23/08 12:19:45 PM EST

where can I get the source code for this article - "Constructing an Application with Flash Forms from the Ground Up"

wholesale ipod 10/30/07 01:18:03 AM EDT

I think so!

Garfield 07/24/05 07:47:15 PM EDT

Great article by great developers. I have just starting using CF7 and thanks to many writers out there, I have developed some impressive forms. Please visit the www.asfusion.com site for more helpful info.

Michael, visit http://www.cfform.com/flashforms/invoke.cfm?objectid=0204C17F-4E22-1671-... for a tutorial on binding grids to selects. Be mindful that when binding to a grid, the bind is both case and type sensitive to the DB columns.

Michael White 07/17/05 07:39:37 PM EDT

Your article was a good introduction to flash forms with multiple panels. I have a question on the Edit panel... what if some of your fields are CFSELECT dropdowns or date fields... having trouble finding working syntax for binding them to the grid.

Andrew 07/06/05 11:40:46 PM EDT

Loved the article! It has taught me alot. Maybe I am at fault here but I am not able to get any of this to save or edit in a db anyone else having same problem

Laura Arguello 06/27/05 08:30:39 PM EDT

Thank you for the comments.
While the link gets fixed, you can download the source code from http://www.asfusion.com/blog/files/cfforms/cfdj_source.zip

Anthony 06/25/05 05:40:50 PM EDT

How do I download the source files for this article?

[email protected]

Stiles 06/25/05 11:53:31 AM EDT

I'm having a similar problem with getting the source code for this article. The printed version states that the source code can be downloaded at www.cfdj.com. This URL is invalid and not a site maintained by Sys-Con. Any chance the link can be updated so we can view the source code?

Much appreciative.

André 06/24/05 09:48:25 AM EDT


Thank you for the article, I found it very informative, well written and helpfull. I am having difficulties with the save content section. How could one download the source code ?Could it be possible to modify the link to open on the file rather to to another site that does not seem to be CF Dev. Journal ?

Again that you for sharing.

IoT & Smart Cities Stories
The standardization of container runtimes and images has sparked the creation of an almost overwhelming number of new open source projects that build on and otherwise work with these specifications. Of course, there's Kubernetes, which orchestrates and manages collections of containers. It was one of the first and best-known examples of projects that make containers truly useful for production use. However, more recently, the container ecosystem has truly exploded. A service mesh like Istio addr...
CloudEXPO New York 2018, colocated with DXWorldEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
@DevOpsSummit at Cloud Expo, taking place November 12-13 in New York City, NY, is co-located with 22nd international CloudEXPO | first international DXWorldEXPO and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time t...
DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City and will bring together Cloud Computing, FinTech and Blockchain, Digital Transformation, Big Data, Internet of Things, DevOps, AI, Machine Learning and WebRTC to one location.
SYS-CON Events announced today that DatacenterDynamics has been named “Media Sponsor” of SYS-CON's 18th International Cloud Expo, which will take place on June 7–9, 2016, at the Javits Center in New York City, NY. DatacenterDynamics is a brand of DCD Group, a global B2B media and publishing company that develops products to help senior professionals in the world's most ICT dependent organizations make risk-based infrastructure and capacity decisions.
Cloud-enabled transformation has evolved from cost saving measure to business innovation strategy -- one that combines the cloud with cognitive capabilities to drive market disruption. Learn how you can achieve the insight and agility you need to gain a competitive advantage. Industry-acclaimed CTO and cloud expert, Shankar Kalyana presents. Only the most exceptional IBMers are appointed with the rare distinction of IBM Fellow, the highest technical honor in the company. Shankar has also receive...
Headquartered in Plainsboro, NJ, Synametrics Technologies has provided IT professionals and computer systems developers since 1997. Based on the success of their initial product offerings (WinSQL and DeltaCopy), the company continues to create and hone innovative products that help its customers get more from their computer applications, databases and infrastructure. To date, over one million users around the world have chosen Synametrics solutions to help power their accelerated business or per...
A valuable conference experience generates new contacts, sales leads, potential strategic partners and potential investors; helps gather competitive intelligence and even provides inspiration for new products and services. Conference Guru works with conference organizers to pass great deals to great conferences, helping you discover new conferences and increase your return on investment.
Business professionals no longer wonder if they'll migrate to the cloud; it's now a matter of when. The cloud environment has proved to be a major force in transitioning to an agile business model that enables quick decisions and fast implementation that solidify customer relationships. And when the cloud is combined with the power of cognitive computing, it drives innovation and transformation that achieves astounding competitive advantage.
Digital Transformation: Preparing Cloud & IoT Security for the Age of Artificial Intelligence. As automation and artificial intelligence (AI) power solution development and delivery, many businesses need to build backend cloud capabilities. Well-poised organizations, marketing smart devices with AI and BlockChain capabilities prepare to refine compliance and regulatory capabilities in 2018. Volumes of health, financial, technical and privacy data, along with tightening compliance requirements by...