|By Nahuel Foronda, Laura Arguello||
|June 16, 2005 02:00 PM EDT||
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."
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.
Step 2 - Adding Controls
<cfformgroup type="panel" label="Contacts" width="350">
<cfformgroup type="panel" label="Preview"></cfformgroup>
<cfformgroup type="panel" label="Edit"></cfformgroup>
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.
We want to be able to add new contacts, so let's add a button at the bottom of the grid:
<cfgrid name="contactList" query="contactsQuery" rowheaders="false">
<cfgridcolumn name="firstName" header="First Name" />
<cfgridcolumn name="lastName" header="Last Name" />
<cfgridcolumn name="email" header="Email" />
<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.
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.
<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>
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.
<cfinput type="submit" name="deleteContact" value="Delete" />
<cfinput type="submit" name="addContact" value="Add Contact" />
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:"
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."
|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.
|Anthony 06/25/05 05:40:50 PM EDT|
How do I download the source files for this article?
|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?
|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.
The IoT is changing the way enterprises conduct business. In his session at @ThingsExpo, Eric Hoffman, Vice President at EastBanc Technologies, discussed how businesses can gain an edge over competitors by empowering consumers to take control through IoT. He cited examples such as a Washington, D.C.-based sports club that leveraged IoT and the cloud to develop a comprehensive booking system. He also highlighted how IoT can revitalize and restore outdated business models, making them profitable ...
Jul. 29, 2016 10:15 PM EDT Reads: 2,060
Internet of @ThingsExpo, taking place November 1-3, 2016, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with the 19th International Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world and ThingsExpo Silicon Valley Call for Papers is now open.
Jul. 29, 2016 08:00 PM EDT Reads: 2,744
We all know the latest numbers: Gartner, Inc. forecasts that 6.4 billion connected things will be in use worldwide in 2016, up 30 percent from last year, and will reach 20.8 billion by 2020. We're rapidly approaching a data production of 40 zettabytes a day – more than we can every physically store, and exabytes and yottabytes are just around the corner. For many that’s a good sign, as data has been proven to equal money – IF it’s ingested, integrated, and analyzed fast enough. Without real-ti...
Jul. 29, 2016 07:45 PM EDT Reads: 1,174
SYS-CON Events announced today that 910Telecom will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Housed in the classic Denver Gas & Electric Building, 910 15th St., 910Telecom is a carrier-neutral telecom hotel located in the heart of Denver. Adjacent to CenturyLink, AT&T, and Denver Main, 910Telecom offers connectivity to all major carriers, Internet service providers, Internet backbones and ...
Jul. 29, 2016 06:00 PM EDT Reads: 928
Big Data, cloud, analytics, contextual information, wearable tech, sensors, mobility, and WebRTC: together, these advances have created a perfect storm of technologies that are disrupting and transforming classic communications models and ecosystems. In his session at @ThingsExpo, Erik Perotti, Senior Manager of New Ventures on Plantronics’ Innovation team, provided an overview of this technological shift, including associated business and consumer communications impacts, and opportunities it ...
Jul. 29, 2016 05:15 PM EDT Reads: 389
You think you know what’s in your data. But do you? Most organizations are now aware of the business intelligence represented by their data. Data science stands to take this to a level you never thought of – literally. The techniques of data science, when used with the capabilities of Big Data technologies, can make connections you had not yet imagined, helping you discover new insights and ask new questions of your data. In his session at @ThingsExpo, Sarbjit Sarkaria, data science team lead ...
Jul. 29, 2016 04:45 PM EDT Reads: 1,248
WebRTC is bringing significant change to the communications landscape that will bridge the worlds of web and telephony, making the Internet the new standard for communications. Cloud9 took the road less traveled and used WebRTC to create a downloadable enterprise-grade communications platform that is changing the communication dynamic in the financial sector. In his session at @ThingsExpo, Leo Papadopoulos, CTO of Cloud9, discussed the importance of WebRTC and how it enables companies to focus...
Jul. 29, 2016 04:15 PM EDT Reads: 1,083
ReadyTalk has expanded the capabilities of the FoxDen collaboration platform announced late last year to include FoxDen Connect, an in-room video collaboration experience that launches with a single touch. With FoxDen Connect, users can now not only engage in HD video conferencing between iOS and Android mobile devices or Chrome browsers, but also set up in-person meeting rooms for video interactions. A host’s mobile device automatically recognizes the presence of a meeting room via beacon tech...
Jul. 29, 2016 04:15 PM EDT Reads: 416
Manufacturers are embracing the Industrial Internet the same way consumers are leveraging Fitbits – to improve overall health and wellness. Both can provide consistent measurement, visibility, and suggest performance improvements customized to help reach goals. Fitbit users can view real-time data and make adjustments to increase their activity. In his session at @ThingsExpo, Mark Bernardo Professional Services Leader, Americas, at GE Digital, discussed how leveraging the Industrial Internet a...
Jul. 29, 2016 03:15 PM EDT Reads: 672
On Dice.com, the number of job postings asking for skill in Amazon Web Services increased 76 percent between June 2015 and June 2016. Salesforce.com saw its own skill mentions increase 37 percent, while DevOps and Cloud rose 35 percent and 28 percent, respectively. Even as they expand their presence in the cloud, companies are also looking for tech professionals who can manage projects, crunch data, and figure out how to make systems run more autonomously. Mentions of ‘data science’ as a skill ...
Jul. 29, 2016 03:00 PM EDT Reads: 482
IoT generates lots of temporal data. But how do you unlock its value? You need to discover patterns that are repeatable in vast quantities of data, understand their meaning, and implement scalable monitoring across multiple data streams in order to monetize the discoveries and insights. Motif discovery and deep learning platforms are emerging to visualize sensor data, to search for patterns and to build application that can monitor real time streams efficiently. In his session at @ThingsExpo, ...
Jul. 29, 2016 02:00 PM EDT Reads: 1,208
"delaPlex is a software development company. We do team-based outsourcing development," explained Mark Rivers, COO and Co-founder of delaPlex Software, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.
Jul. 29, 2016 01:00 PM EDT Reads: 2,128
SYS-CON Events announced today that LeaseWeb USA, a cloud Infrastructure-as-a-Service (IaaS) provider, will exhibit at the 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. LeaseWeb is one of the world's largest hosting brands. The company helps customers define, develop and deploy IT infrastructure tailored to their exact business needs, by combining various kinds cloud solutions.
Jul. 29, 2016 11:15 AM EDT Reads: 1,349
Amazon has gradually rolled out parts of its IoT offerings in the last year, but these are just the tip of the iceberg. In addition to optimizing their back-end AWS offerings, Amazon is laying the ground work to be a major force in IoT – especially in the connected home and office. Amazon is extending its reach by building on its dominant Cloud IoT platform, its Dash Button strategy, recently announced Replenishment Services, the Echo/Alexa voice recognition control platform, the 6-7 strategic...
Jul. 29, 2016 11:15 AM EDT Reads: 692
The cloud market growth today is largely in public clouds. While there is a lot of spend in IT departments in virtualization, these aren’t yet translating into a true “cloud” experience within the enterprise. What is stopping the growth of the “private cloud” market? In his general session at 18th Cloud Expo, Nara Rajagopalan, CEO of Accelerite, explored the challenges in deploying, managing, and getting adoption for a private cloud within an enterprise. What are the key differences between wh...
Jul. 29, 2016 09:45 AM EDT Reads: 2,158
For basic one-to-one voice or video calling solutions, WebRTC has proven to be a very powerful technology. Although WebRTC’s core functionality is to provide secure, real-time p2p media streaming, leveraging native platform features and server-side components brings up new communication capabilities for web and native mobile applications, allowing for advanced multi-user use cases such as video broadcasting, conferencing, and media recording.
Jul. 29, 2016 09:45 AM EDT Reads: 1,039
SYS-CON Events announced today that Venafi, the Immune System for the Internet™ and the leading provider of Next Generation Trust Protection, will exhibit at @DevOpsSummit at 19th International Cloud Expo, which will take place on November 1–3, 2016, at the Santa Clara Convention Center in Santa Clara, CA. Venafi is the Immune System for the Internet™ that protects the foundation of all cybersecurity – cryptographic keys and digital certificates – so they can’t be misused by bad guys in attacks...
Jul. 29, 2016 09:45 AM EDT Reads: 1,487
There will be new vendors providing applications, middleware, and connected devices to support the thriving IoT ecosystem. This essentially means that electronic device manufacturers will also be in the software business. Many will be new to building embedded software or robust software. This creates an increased importance on software quality, particularly within the Industrial Internet of Things where business-critical applications are becoming dependent on products controlled by software. Qua...
Jul. 29, 2016 07:15 AM EDT Reads: 1,655
In addition to all the benefits, IoT is also bringing new kind of customer experience challenges - cars that unlock themselves, thermostats turning houses into saunas and baby video monitors broadcasting over the internet. This list can only increase because while IoT services should be intuitive and simple to use, the delivery ecosystem is a myriad of potential problems as IoT explodes complexity. So finding a performance issue is like finding the proverbial needle in the haystack.
Jul. 29, 2016 06:45 AM EDT Reads: 2,384
Machine Learning helps make complex systems more efficient. By applying advanced Machine Learning techniques such as Cognitive Fingerprinting, wind project operators can utilize these tools to learn from collected data, detect regular patterns, and optimize their own operations. In his session at 18th Cloud Expo, Stuart Gillen, Director of Business Development at SparkCognition, discussed how research has demonstrated the value of Machine Learning in delivering next generation analytics to imp...
Jul. 29, 2016 04:45 AM EDT Reads: 2,583