ColdFusion Article

Creating Better Forms Faster with ColdFusion MX 7

New Layout Managers

When building web applications, I noticed that I spent the majority of my time building forms—creating layout and user interfaces. I don't know about you, but I prefer to code the back-end logic and functionality, not the look and feel. To make matters worse, all my forms began the same way: a two-column table with the label in the left column, setting the width to 150 pixels, and a form field in the right column. It's a nice and simple form (you've built this form haven't you?). It always seemed futile to me to keep rewriting this same table again and again. The problem was, I only cared about a dozen or so form elements, not the 200–300 lines of HTML code that wrapped them.

So we started thinking, wouldn't it be cool if developers could use layout managers like they do in other languages, such as in Java Swing applications? The problem is that the web and HTML do not have layout managers; they use tables, div tags, and span tags with absolute and relative positioning—in essence, they have no automatic layout logic.

Luckily for us, many pieces came together at the same time. First, the Macromedia Flex team was working on layout managers for Flash forms based in Flex. Second, Flex is based on XML. For years we wanted to give you the ability to generate Flash from ColdFusion and give you the power of rich forms available with Flash components. With Flex, we noticed that our prototype for XML forms—based on the XForms schema—would map very easily to the MXML (the Flex markup language) we needed for Flex. This relationship allowed us to expose the same CFML syntax for the layout managers in both XML and Flash forms.

What do these layout managers mean for you? It means you now can develop forms with layout managers, giving you more time to spend on your application's functionality instead of its layout.

Even though ColdFusion MX 7 passes the job of managing the layout to the layout managers, you still cannot create forms 100% automatically. There are just too many different ways to lay out a form. As you know, when you leave it to an engine to guess what you want, things never work the way you might like and you may never use it.

The key was to find a middle ground that everyone could work with. This middle ground had to remove the bulk of code you would write to lay out a form, yet still provide a way for you to define some layout. To do this, we added a new ColdFusion tag called cfformgroup. You use this new tag to give formatting "hints" to the layout managers.

The layout managers use a number of rules to define the layout—such as defined widths, minimum widths of components, overall form size, available room left in the form, size of labels, and so forth. Because of these rules, the groups only provide hints, not hard-and-fast rules. The layout managers try to do what the group specifies, but if the fields don't fit, the managers lay out the fields in an alternative format, different from what you defined.

For instance, if you create a group using the type="horizontal" attribute, but you have 10 form elements in the group, odds are that 10 form fields side by side will appear wider then the form's space limit. In this case, the layout manager does what it can. Most likely, it will lay out three or four fields side by side, then output another three or four fields on the next line, and then output a new line with the last three fields.

This is different than when you lay out your form with the old HTML table methods, where each field lies in its own table cell. In this old scenario, the form renders off the side of the page to fit. When you find the layout managers rendering an unexpected output in ColdFusion MX 7, adjust the width of the form elements; usually reducing the width of the form fields a little can make the difference. If that doesn't work, increase the overall form width or remove the individual form element labels and use group labels instead. The following example demonstrates how you can use the cfformgroup tag to place the FirstName and LastName fields next to each other, with one shared label:

<cfformgroup type="horizontal" label="Enter Name:">
     <cfinput type="text" name="FirstName" value="">
<cfinput type="text" name="LastName" value="">
	</cfformgroup>

Page 3 of 5

Previous Page

Next Page