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>

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

	...plus all the other fields...

	((comments.text != "") ?"<br /><b>Comments:</b>\t"+ comments.text : "")
)}

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>

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.