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

First, we have an input in the Edit panel for the contact's picture called "photo" that gets its value from the cfgrid photo column.

<cfinput type="text" name="photo" label="Photo:"
bind="{contactList.selectedItem.photo}" />

Then, we have a cfformitem that will get its value from the photo field above:

<cfformitem type="html" height="100" width="100"
bind="<p><img src='{photo.text}'/></p>">
</cfformitem>

What we're trying to achieve is for the value of the cfformitem to be <p><img src='picture.jpg'/></p>, a simple html paragraph with an image inside. But the name of the picture changes for each contact so we bind the path to the photo field in the Edit panel by writing the path of the picture between braces: {photo.text}.

If you look at the source code, you'll find a slightly more complex version of the picture's cfformitem bind:

bind="<p><img src='{(photo.text == '' ? 'man.jpg' : photo.text)}' /></p>"

We're using the if-else shorthand statement again to decide whether we want to show the picture of the contact or a default if the contact photo is empty.

Now that you're getting a feeling for how binding works, we'll add the complete contact information next to the picture. In this case, the binding is rather lengthy, so we'll make a variable containing the binding string and put the variable as the value of the attribute:


<cfsavecontent variable="previewBind">
...the contents of the bind...
</cfsavecontent>

<cfformitem type="html" bind="#previewBind#"></cfformitem>
The content of the previewBind variable is:

{(
((fistName.text != "") ? "<b>First Name:</b>\t" + fistName.text:"") +

...plus all the other fields...

((comments.text != "") ?"<br /><b>Comments:</b>\t"+ comments.text : "")
)}
As you can see, we're using the same trick we used for the photo: if the field isn't empty, we show the value; otherwise we don't show anything. We concatenate all the fields with a "+." We also format the field label with bold and add a tab (\t) between the label and the value to align it.

In case you're wondering how we got the picture next to the text, we used layout tags inside Preview panel (bindings explained above omitted for simplicity):


<cfformgroup type="panel" label="Preview">
<cfformgroup type="hbox">
<cfformgroup type="hbox" width="116">
<!--- the picture --->
<cfformitem type="html" height="100" width="100">
</cfformitem>
</cfformgroup>
<cfformgroup type="hbox">
<!--- the complete contact data --->
<cfformitem type="html"></cfformitem>
</cfformgroup>
</cfformgroup>
</cfformgroup>
Step 6 - Styling the Form
Now that all the elements are in place, we'll add some color and styling to the form. In flash forms, the look-and-feel of each element must be defined in the "style" attribute. Many styles defined in outer containers also apply to inner containers and controls.

As you can see in the picture of the application (see Figure 1), we applied colors to the panels. The contact list has an orange background color and the other two are blue. The complete style for the orange (Contacts) panel is:

style="themeColor:##FE7E00; headerColors:##F2CB2A, ##FFE57A;
backgroundColor:##FFE57A; panelBorderStyle:'roundCorners';"

In this style definition there are three properties applied:

themeColor: color;
Instead of using one of the halo themes (haloBlue, haloGreen, haloOrange, haloSilver) that can be applied with the skin attribute (skin="haloBlue"), we used our own custom color. The themeColor property applies the given color to all the form elements just like halo themes do. The advantage is that we can pick any color, not just one of the four standard themes.

headerColors: color1, color2;
The panel header is composed of a linear gradient of two colors that goes from top to bottom. We can change both of these colors with the headerColors property. The bigger the contrast between the two, the more pronounced the gradient will be.

backgroundColor: color;
The background color of the panel can be changed by using this property. Note however that the cfgrid isn't inheriting the background.

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.

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