Welcome!

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,

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

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)

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.


IoT & Smart Cities Stories
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
With 10 simultaneous tracks, keynotes, general sessions and targeted breakout classes, @CloudEXPO and DXWorldEXPO are two of the most important technology events of the year. Since its launch over eight years ago, @CloudEXPO and DXWorldEXPO have presented a rock star faculty as well as showcased hundreds of sponsors and exhibitors! In this blog post, we provide 7 tips on how, as part of our world-class faculty, you can deliver one of the most popular sessions at our events. But before reading...
DSR is a supplier of project management, consultancy services and IT solutions that increase effectiveness of a company's operations in the production sector. The company combines in-depth knowledge of international companies with expert knowledge utilising IT tools that support manufacturing and distribution processes. DSR ensures optimization and integration of internal processes which is necessary for companies to grow rapidly. The rapid growth is possible thanks, to specialized services an...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...