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
The Internet of Things (IoT) promises to evolve the way the world does business; however, understanding how to apply it to your company can be a mystery. Most people struggle with understanding the potential business uses or tend to get caught up in the technology, resulting in solutions that fail to meet even minimum business goals. In his session at @ThingsExpo, Jesse Shiah, CEO / President / Co-Founder of AgilePoint Inc., showed what is needed to leverage the IoT to transform your business. He discussed opportunities and challenges ahead for the IoT from a market and technical point of vie...
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 Internet of Things (IoT) is rapidly in the process of breaking from its heretofore relatively obscure enterprise applications (such as plant floor control and supply chain management) and going mainstream into the consumer space. More and more creative folks are interconnecting everyday products such as household items, mobile devices, appliances and cars, and unleashing new and imaginative scenarios. We are seeing a lot of excitement around applications in home automation, personal fitness, and in-car entertainment and this excitement will bleed into other areas. On the commercial side, m...
Dale Kim is the Director of Industry Solutions at MapR. His background includes a variety of technical and management roles at information technology companies. While his experience includes work with relational databases, much of his career pertains to non-relational data in the areas of search, content management, and NoSQL, and includes senior roles in technical marketing, sales engineering, and support engineering. Dale holds an MBA from Santa Clara University, and a BA in Computer Science from the University of California, Berkeley.
"People are a lot more knowledgeable about APIs now. There are two types of people who work with APIs - IT people who want to use APIs for something internal and the product managers who want to do something outside APIs for people to connect to them," explained Roberto Medrano, Executive Vice President at SOA Software, in this SYS-CON.tv interview at Cloud Expo, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
Performance is the intersection of power, agility, control, and choice. If you value performance, and more specifically consistent performance, you need to look beyond simple virtualized compute. Many factors need to be considered to create a truly performant environment. In his General Session at 15th Cloud Expo, Harold Hannon, Sr. Software Architect at SoftLayer, discussed how to take advantage of a multitude of compute options and platform features to make cloud the cornerstone of your online presence.
An entirely new security model is needed for the Internet of Things, or is it? Can we save some old and tested controls for this new and different environment? In his session at @ThingsExpo, New York's at the Javits Center, Davi Ottenheimer, EMC Senior Director of Trust, reviewed hands-on lessons with IoT devices and reveal a new risk balance you might not expect. Davi Ottenheimer, EMC Senior Director of Trust, has more than nineteen years' experience managing global security operations and assessments, including a decade of leading incident response and digital forensics. He is co-author of t...
SYS-CON Media announced that Splunk, a provider of the leading software platform for real-time Operational Intelligence, has launched an ad campaign on Big Data Journal. Splunk software and cloud services enable organizations to search, monitor, analyze and visualize machine-generated big data coming from websites, applications, servers, networks, sensors and mobile devices. The ads focus on delivering ROI - how improved uptime delivered $6M in annual ROI, improving customer operations by mining large volumes of unstructured data, and how data tracking delivers uptime when it matters most.
DevOps Summit 2015 New York, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that it is now accepting Keynote Proposals. 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 to wait for long development cycles that produce software that is obsolete at launch. DevOps may be disruptive, but it is essential.
Almost everyone sees the potential of Internet of Things but how can businesses truly unlock that potential. The key will be in the ability to discover business insight in the midst of an ocean of Big Data generated from billions of embedded devices via Systems of Discover. Businesses will also need to ensure that they can sustain that insight by leveraging the cloud for global reach, scale and elasticity.
The Internet of Things will greatly expand the opportunities for data collection and new business models driven off of that data. In her session at @ThingsExpo, Esmeralda Swartz, CMO of MetraTech, discussed how for this to be effective you not only need to have infrastructure and operational models capable of utilizing this new phenomenon, but increasingly service providers will need to convince a skeptical public to participate. Get ready to show them the money!
How do APIs and IoT relate? The answer is not as simple as merely adding an API on top of a dumb device, but rather about understanding the architectural patterns for implementing an IoT fabric. There are typically two or three trends: Exposing the device to a management framework Exposing that management framework to a business centric logic Exposing that business layer and data to end users. This last trend is the IoT stack, which involves a new shift in the separation of what stuff happens, where data lives and where the interface lies. For instance, it's a mix of architectural styles ...
The 3rd International Internet of @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that its Call for Papers is now open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
The 3rd International Internet of @ThingsExpo, co-located with the 16th International Cloud Expo - to be held June 9-11, 2015, at the Javits Center in New York City, NY - announces that its Call for Papers is now open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than 20 years ago.
"There is a natural synchronization between the business models, the IoT is there to support ,” explained Brendan O'Brien, Co-founder and Chief Architect of Aria Systems, in this SYS-CON.tv interview at the 15th International Cloud Expo®, held Nov 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA.
The Internet of Things will put IT to its ultimate test by creating infinite new opportunities to digitize products and services, generate and analyze new data to improve customer satisfaction, and discover new ways to gain a competitive advantage across nearly every industry. In order to help corporate business units to capitalize on the rapidly evolving IoT opportunities, IT must stand up to a new set of challenges. In his session at @ThingsExpo, Jeff Kaplan, Managing Director of THINKstrategies, will examine why IT must finally fulfill its role in support of its SBUs or face a new round of...
The BPM world is going through some evolution or changes where traditional business process management solutions really have nowhere to go in terms of development of the road map. In this demo at 15th Cloud Expo, Kyle Hansen, Director of Professional Services at AgilePoint, shows AgilePoint’s unique approach to dealing with this market circumstance by developing a rapid application composition or development framework.

ARMONK, N.Y., Nov. 20, 2014 /PRNewswire/ --  IBM (NYSE: IBM) today announced that it is bringing a greater level of control, security and flexibility to cloud-based application development and delivery with a single-tenant version of Bluemix, IBM's platform-as-a-service. The new platform enables developers to build ap...

Advanced Persistent Threats (APTs) are increasing at an unprecedented rate. The threat landscape of today is drastically different than just a few years ago. Attacks are much more organized and sophisticated. They are harder to detect and even harder to anticipate. In the foreseeable future it's going to get a whole lot harder. Everything you know today will change. Keeping up with this changing landscape is already a daunting task. Your organization needs to use the latest tools, methods and expertise to guard against those threats. But will that be enough? In the foreseeable future attacks w...
As enterprises move to all-IP networks and cloud-based applications, communications service providers (CSPs) – facing increased competition from over-the-top providers delivering content via the Internet and independently of CSPs – must be able to offer seamless cloud-based communication and collaboration solutions that can scale for small, midsize, and large enterprises, as well as public sector organizations, in order to keep and grow market share. The latest version of Oracle Communications Unified Communications Suite gives CSPs the capability to do just that. In addition, its integration ...