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)

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