Click here to close now.

Welcome!

You will be redirected in 30 seconds or close now.

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

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

As you may know by now, ColdFusion 7 includes a new feature that lets us create forms in flash format. They work as a replacement for html forms, but give us some additional controls like the tree, grid, and calendar. Even if making a "form" doesn't sound very appealing to you, once you start using this feature you will find that you can do much more than simple forms.

But the best is that they can enhance the usability of your regular forms, even if they are simple, with built-in features such as validation, tooltips, and tabs. It doesn't take much to make a flash form; basically, we only have to specify that the form's format is flash in the cfform tag and proceed with the cfform elements.

In this article, we'll walk you through the process of creating a small application interface using only flash forms. There's a lot to discover about flash forms, although you don't need know every detail to start using them. Since going over every feature would be impossible, we'll cover some of the most commonly used features that will likely be present in your next application.

To take a look at the interface we'll construct, see Figure 1.

Step 1 - Setting the Layout
Every flash form starts with a cfform tag that encloses the whole form definition and has the format attribute defined as "flash."

<cfform format="flash">

But before we start coding our application, we must first define the layout. In our address book, we have a panel on the left for a list of contacts and three panels on the right, one for previewing the contact info, the second to edit it, and a very small panel to contain a checkbox.

Before the advent of flash forms, we would write html (tables, paragraphs, etc.) to position the form elements. We can't transfer that to flash forms; they require special layout containers. We must use the new tag cfformgroup to position and lay out all elements and controls in a flash form.

To layout our four panels, we use an enclosing <cfformgroup type="hbox"> container that lets us position its contents horizontally. In the hbox, we have a panel labeled "Contacts" and another container, a cfformgroup type="vbox." The vbox contains the other two panels "Preview" and "Edit" that are positioned one below the other. See Figure 2.


<cfformgroup type="hbox">
<cfformgroup type="panel" label="Contacts" width="350">
</cfformgroup>
<cfformgroup type="hbox">
<cfformgroup type="panel" label="Preview"></cfformgroup>
<cfformgroup type="panel" label="Edit"></cfformgroup>
</cfformgroup>
</cfformgroup>
Step 2 - Adding Controls
Now that we have our panels positioned, we can start adding controls.

We show the list of contacts in the left panel in a grid with three columns: first name, last name, and e-mail. The grid's data comes from a query, specified in the "query" attribute of the <cfgrid> tag. firstName, lastName, and e-mail are columns of the query. Later we will need additional columns for the other fields, but we'll just assume our query has all the necessary columns. Note that we also specify rowheaders="false" because we don't want an extra column with row numbers.


<cfgrid name="contactList" query="contactsQuery" rowheaders="false">
<cfgridcolumn name="firstName" header="First Name" />
<cfgridcolumn name="lastName" header="Last Name" />
<cfgridcolumn name="email" header="Email" />
</cfgrid>
We want to be able to add new contacts, so let's add a button at the bottom of the grid:

<cfinput type="button" name="addContact" value="Add Contact" />

The Edit panel is a little more involved because it includes 16 inputs: 14 text inputs, one text area, and one hidden input to contain the id of the contact.


<cfinput type="text" name="firstName" label="First Name:" />
...the rest of the inputs...
<cfinput type="hidden" name="contactId" />
<cftextarea name="comments" height="45" label="Comments:"></cftextarea>
Let's also add two buttons labeled "Delete" and "Add New." These buttons are contained in a <cfformgroup type="horizontal"> tag that lays them next to the one another.

<cfformgroup type="horizontal">
<cfinput type="submit" name="deleteContact" value="Delete" />
<cfinput type="submit" name="addContact" value="Add Contact" />
</cfformgroup>
You may have noticed that "hbox" and "vbox" types are used when we want to position containers horizontally or vertically respectively, and "horizontal" and "vertical" types when we want to position controls.

Step 3 - Binding Controls
In the Edit panel, we have what looks like a typical form: several text inputs, a textarea, and submit buttons. We added them in the last step. However, while you weren't looking, we made a little change to them. Now, every text input looks like this:

<cfinput type="text" name="firstName" label="First Name:"
bind="{contactList.selectedItem.firstName}" />

Everything looks pretty normal, except for one part - bind, a strange-looking attribute with braces around its value. The bind attribute is used to set the value of the control at the evaluation of the expression between the braces. That means that we can put any ActionScript expression that can be evaluated inside the braces and the result will become the value of the control. In our form, we're populating the text inputs with data from the contactList grid, which contains all the columns and rows of the source query. To get the data corresponding to the selected row in the contact list, we access the cfgrid by its name, "contactList" and the special property "selectedItem," which points to the row that's been selected by the user. Then, by using dot notation, we get to the specific column we need, which is different for every input. The complete path would be "contactList.selectedItem.columnName."

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

Hi,

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.

@ThingsExpo Stories
SYS-CON Events announced today that Ciqada will exhibit at SYS-CON's @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Ciqada™ makes it easy to connect your products to the Internet. By integrating key components - hardware, servers, dashboards, and mobile apps - into an easy-to-use, configurable system, your products can quickly and securely join the internet of things. With remote monitoring, control, and alert messaging capability, you will meet your customers' needs of tomorrow - today! Ciqada. Let your products take flight. For more inform...
SYS-CON Events announced today that GENBAND, a leading developer of real time communications software solutions, has been named “Silver Sponsor” of SYS-CON's WebRTC Summit, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. The GENBAND team will be on hand to demonstrate their newest product, Kandy. Kandy is a communications Platform-as-a-Service (PaaS) that enables companies to seamlessly integrate more human communications into their Web and mobile applications - creating more engaging experiences for their customers and boosting collaboration and productiv...
SYS-CON Events announced today that BroadSoft, the leading global provider of Unified Communications and Collaboration (UCC) services to operators worldwide, has been named “Gold Sponsor” of SYS-CON's WebRTC Summit, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. BroadSoft is the leading provider of software and services that enable mobile, fixed-line and cable service providers to offer Unified Communications over their Internet Protocol networks. The Company’s core communications platform enables the delivery of a range of enterprise and consumer calling...
VoxImplant has announced full WebRTC support in the newest versions of its Android SDK and iOS SDK. The updated SDKs, which enable audio and video calls on mobile devices, are now compatible with the WebRTC standard to allow any mobile app to communicate with WebRTC-enabled browsers, including Google Chrome, Mozilla Firefox, Opera, and, when available, Microsoft Spartan. The WebRTC-updated SDKs represent VoxImplant's continued leadership in simplifying the development of real-time communications (RTC) services for app developers. VoxImplant (built by Zingaya, the real-time communication servi...
The IoT Bootcamp is coming to Cloud Expo | @ThingsExpo on June 9-10 at the Javits Center in New York. Instructor. Registration is now available at http://iotbootcamp.sys-con.com/ Instructor Janakiram MSV previously taught the famously successful Multi-Cloud Bootcamp at Cloud Expo | @ThingsExpo in November in Santa Clara. Now he is expanding the focus to Janakiram is the founder and CTO of Get Cloud Ready Consulting, a niche Cloud Migration and Cloud Operations firm that recently got acquired by Aditi Technologies. He is a Microsoft Regional Director for Hyderabad, India, and one of the f...
SYS-CON Events announced today that Optimal Design, an Internet of Things solution provider, will exhibit at SYS-CON's Internet of @ThingsExpo, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Optimal Design is an award winning product development firm offering industrial design and engineering services to the consumer, medical, and defense markets.
SYS-CON Events announced today that Vicom Computer Services, Inc., a provider of technology and service solutions, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. They are located at booth #427. Vicom Computer Services, Inc. is a progressive leader in the technology industry for over 30 years. Headquartered in the NY Metropolitan area. Vicom provides products and services based on today’s requirements around Unified Networks, Cloud Computing strategies, Virtualization around Software defined Data Ce...
The 17th International Cloud Expo has announced that its Call for Papers is open. 17th International Cloud Expo, to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, brings together Cloud Computing, APM, APIs, Microservices, Security, Big Data, Internet of Things, DevOps and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding business opportunity. Submit your speaking proposal today!
What exactly is a cognitive application? In her session at 16th Cloud Expo, Ashley Hathaway, Product Manager at IBM Watson, will look at the services being offered by the IBM Watson Developer Cloud and what that means for developers and Big Data. She'll explore how IBM Watson and its partnerships will continue to grow and help define what it means to be a cognitive service, as well as take a look at the offerings on Bluemix. She will also check out how Watson and the Alchemy API team up to offer disruptive APIs to developers.
With IoT exploding, massive data will transform businesses with opportunities to monetize almost anything that can be measured. In this C-Level Roundtable Discussion at @ThingsExpo, Brendan O’Brien, Aria Systems Co-founder and Chief Evangelist, will lead an expert panel of consultants, thought leaders and practitioners who will look at these new monetization trends, discuss the implications, and detail lessons learned from their collective experience. Finally, the panel will point the way forward for enterprises who wish to leverage the resulting complex recurring revenue models, adding valu...
How is unified communications transforming the way businesses operate? In his session at WebRTC Summit, Arvind Rangarajan, Director of Product Marketing at BroadSoft, will discuss how to extend unified communications experience outside the enterprise through WebRTC. He will also review use cases across different industry verticals. Arvind Rangarajan is Director, Product Marketing at BroadSoft. He has over 19 years of experience in the telecommunications industry in various roles such as Software Development, Product Management and Product Marketing, applied across Wireless, Unified Communic...
Buzzword alert: Microservices and IoT at a DevOps conference? What could possibly go wrong? Join this panel of experts as they peel away the buzz and discuss the important architectural principles behind implementing IoT solutions for the enterprise. As remote IoT devices and sensors become increasingly intelligent, they become part of our distributed cloud environment, and we must architect and code accordingly. At the very least, you’ll have no problem filling in your buzzword bingo cards.
Internet of Things (IoT) will be a hybrid ecosystem of diverse devices and sensors collaborating with operational and enterprise systems to create the next big application. In their session at @ThingsExpo, Bramh Gupta, founder and CEO of robomq.io, and Fred Yatzeck, principal architect leading product development at robomq.io, will discuss how choosing the right middleware and integration strategy from the get-go will enable IoT solution developers to adapt and grow with the industry, while at the same time reduce Time to Market (TTM) by using plug and play capabilities offered by a robust I...
@ThingsExpo has been named the Top 5 Most Influential Internet of Things Brand by Onalytica in the ‘The Internet of Things Landscape 2015: Top 100 Individuals and Brands.' Onalytica analyzed Twitter conversations around the #IoT debate to uncover the most influential brands and individuals driving the conversation. Onalytica captured data from 56,224 users. The PageRank based methodology they use to extract influencers on a particular topic (tweets mentioning #InternetofThings or #IoT in this case) takes into account the number and quality of contextual references that a user receives.
SYS-CON Events announced today that Dyn, the worldwide leader in Internet Performance, will exhibit at SYS-CON's 16th International Cloud Expo®, which will take place on June 9-11, 2015, at the Javits Center in New York City, NY. Dyn is a cloud-based Internet Performance company. Dyn helps companies monitor, control, and optimize online infrastructure for an exceptional end-user experience. Through a world-class network and unrivaled, objective intelligence into Internet conditions, Dyn ensures traffic gets delivered faster, safer, and more reliably than ever.
IoT is still a vague buzzword for many people. In his session at @ThingsExpo, Mike Kavis, Vice President & Principal Cloud Architect at Cloud Technology Partners, discussed the business value of IoT that goes far beyond the general public's perception that IoT is all about wearables and home consumer services. He also discussed how IoT is perceived by investors and how venture capitalist access this space. Other topics discussed were barriers to success, what is new, what is old, and what the future may hold. Mike Kavis is Vice President & Principal Cloud Architect at Cloud Technology Pa...
The only place to be June 9-11 is Cloud Expo & @ThingsExpo 2015 East at the Javits Center in New York City. Join us there as delegates from all over the world come to listen to and engage with speakers & sponsors from the leading Cloud Computing, IoT & Big Data companies. Cloud Expo & @ThingsExpo are the leading events covering the booming market of Cloud Computing, IoT & Big Data for the enterprise. Speakers from all over the world will be hand-picked for their ability to explore the economic strategies that utility/cloud computing provides. Whether public, private, or in a hybrid form, clo...
The WebRTC Summit 2015 New York, to be held June 9-11, 2015, at the Javits Center in New York, NY, announces that its Call for Papers is open. Topics include all aspects of improving IT delivery by eliminating waste through automated business models leveraging cloud technologies. WebRTC Summit is co-located with 16th International Cloud Expo, @ThingsExpo, Big Data Expo, and DevOps Summit.
As Marc Andreessen says software is eating the world. Everything is rapidly moving toward being software-defined – from our phones and cars through our washing machines to the datacenter. However, there are larger challenges when implementing software defined on a larger scale - when building software defined infrastructure. In his session at 16th Cloud Expo, Boyan Ivanov, CEO of StorPool, will provide some practical insights on what, how and why when implementing "software-defined" in the datacenter.
While not quite mainstream yet, WebRTC is starting to gain ground with Carriers, Enterprises and Independent Software Vendors (ISV’s) alike. WebRTC makes it easy for developers to add audio and video communications into their applications by using Web browsers as their platform. But like any market, every customer engagement has unique requirements, as well as constraints. And of course, one size does not fit all. In her session at WebRTC Summit, Dr. Natasha Tamaskar, Vice President, Head of Cloud and Mobile Strategy at GENBAND, will explore what is needed to take a real time communications ...