Tom Mollerus' Weblog

All you have to do is to take your existing form inputs (excluding submit buttons, which you want to leave outside of the tabs so they're always showing) and wrap them in <cflayout> and <cflayoutarea> tags, like so:

<style type="text/css">
body {font: 11px verdana, arial, sans-serif; padding: 20px;}
input[type="submit"] {width: 80px;}
#preferences {width: 100%; height: 240px;}
.ytab {padding: 10px;}
</style>

<p><strong>Preferences</strong></p>

<div style="width: 300px; height: 280px;">
<form action="preferences.cfm" method="post">
	<cflayout type="tab" name="preferences" tabheight="180">
		<cflayoutarea title="General" name="general">
			<p>Field 1: <input type="text" name="" size="20" /></p>
			<p>Field 2: <input type="text" name="" size="20" /></p>
			<p>Field 3: <input type="text" name="" size="20" /></p>
		</cflayoutarea>
		<cflayoutarea title="Appearance" name="appearance">
			<p>Field 4: <input type="text" name="" size="20" /></p>
			<p>Field 5: <input type="text" name="" size="20" /></p>
			<p>Field 6: <input type="text" name="" size="20" /></p>
		</cflayoutarea>
		<cflayoutarea title="Security" name="security">
			<p>Field 7: <input type="text" name="" size="20" /></p>
			<p>Field 8: <input type="text" name="" size="20" /></p>
			<p>Field 9: <input type="text" name="" size="20" /></p>
		</cflayoutarea>
	</cflayout>
	
	<div style="text-align: right;">
		<input type="submit" name="save" value="OK" /> 
		<input type="submit" name="cancel" value="Cancel" /> 
		<input type="submit" name="apply" value="Apply" />
	</div>
</form>
</div>

Called in a popup window via JavaScript, the following code looks like this:

As for handling the form submission, it's pretty simple. Put this code at the top of your dialog page:

<cfif IsDefined("FORM.save") or IsDefined("FORM.apply")>
	<!--- Save the data to persistent storage --->
</cfif>

<cfif IsDefined("FORM.save") or IsDefined("FORM.cancel")>
	<!--- Close this popup window --->
	<script language="JavaScript">
	opener.focus();
	self.close();
	</script>
</cfif>

If the user clicks on the "Save" button or the "Apply" button, the form data is saved (to persistent storage, such as session variables or a database); also, if the "Cancel" button or the "Save" button is clicked, the popup window containing the dialog box will close and the user will be returned to the main browser window. If the user clicks on the "Apply" button, the dialog box stays around-- but, according to the needs of your application, you may want to either refresh the main browser or perhaps re-select the tab which was selected before the form was submitted so that you retain state for the user (otherwise, because we're refreshing the page in this example, the user will see the first tab become selected). You could also avoid the page refresh by submitting the form with AJAX. I'll leave tab reselection and/or AJAX as an exercise for the reader.

While CF's tab interface looks pretty nice, there are a few difficulties that I've found while trying to style it:

1. The name you specify for your <cflayout> and <cflayoutarea> tags becomes the value of their ID attribute.
2. You can specify the width and height of your tabbed layout in a <style> element by the ID, as I've done above.
3. If you want to specify styles for your tabs, you can apply them to all tabs by styling the ytab class, which is the class that CF assigns to the <div> tags that make up the tabs.
4. You can't change the background color of the tab area even if you specify it, which is an unfortunate but common aspect of many JavaScript UI's. My guess is that the tabs are created with a variant of the Sliding Doors technique, and that you'd have to modify the images used to make up the tabs to modify the background color (e.g., on my system the tab image is located at http://127.0.0.1/CFIDE/scripts/ajax/resources/ext/images/default/tabs/tab-sprite_flex.gif).

There are also several other dialog interfaces that ColdFusion 8 makes available to us which I'll cover in future posts.

So, do you find this useful? Not useful? I'm curious to hear other thoughts.