Using Flash Forms

Flash applications can be embedded in any Web pages, including pages generated by ColdFusion. If you were to create a Flash animation using Macromedia Flash, for example, you could embed it in the generated page so that it would be displayed within the browser. Similarly, applications created using Macromedia Flex could integrate with ColdFusion applications.

But it is also possible to leverage Flash (without owning Macromedia Flash or Macromedia Flex) without writing anything more than CFML code. ColdFusion has the ability to write Flash for you, allowing you to use CFML tags to create complete Flash applications. These are not general purpose applications, only a very specific type of Flash application can be created this way, namely forms. Using the same <cfform> and <cfinput> used previously, ColdFusion can do the following:

• Generate ActionScript code to create your form.

• Compile that ActionScript code into a SWF.

• Embed the generated SWF in your ColdFusion generated page.

In other words, using ColdFusion you can build forms that leverage the power and usability of Flash while retaining the development experience that is uniquely ColdFusion.

To create Flash Forms, the <cfform> tag is used, specifying format="flash". This instructs ColdFusion to generate a Flash Form instead of an HTML form.

NOTE

It is also possible to embed Flash Form controls within an HTML form. To do this, simply specify format="flash" in the control tag instead of in the <cfform>.

Flash Form Controls

Within a Flash Form all of the standard HTML form controls can be used, along with additional controls. Table 16.1 lists the controls that may be used within Flash Forms.

Table 16.1. Flash Forms Controls

CONTROL	SYNTAX	NOTES
Button	<cfinput type="submit">	Functions just like HTML <input type="submit">.
Calendar	<cfinput type="datefield">	Not supported in HTML. Functionally similar to <cfinput type="datefield"> but calendar is open and no text field is displayed.
Check Box	<cfinput type="checkbox">	Functions just like HTML <input type="checkbox">, but name must be unique in each.
Combo Box	<cfselect editable="true">	Not supported in HTML.
Data Grid	<cfgrid>	Not supported in HTML.
Date Field	<cfinput type="datefield">	Not supported in HTML.
Password	<cfinput type="password">	Functions just like HTML <input type="password">.
Select	<cfselect>	Functions just like HTML <select>.
Text	<cfinput type="text">	Functions just like HTML <input type="text">.
Textarea	<cftextarea>	Functions just like HTML <textarea>.
Tree	<cftree>	Not supported in HTML.

NOTE

The controls listed in Table 16.1 are the ones supported by Flash Forms, and it is not possible to create your own controls for using with this feature. If you need to create customer controls you will need to use Macromedia Flash or Macromedia Flex instead of ColdFusion generated Flash Forms

The following simple form uses a popup date control to prompt for a date of birth:

 <cfform format="flash"         action="process.cfm"         width="200"> <cfinput name="dob"          label="Date Of Birth:"          type="datefield"> <cfinput name="btnSubmit"          type="submit"          value="Submit"> </cfform> 

One important point to note is that every Flash Form control needs a name, even buttons. This name must be unique within the form (with the exception of type="radio" where all the related radio buttons must have the same name to function correctly).

TIP

By default, Flash Forms will use all available browser width (possibly resulting in elongated controls). Specifying a width in <cfform> solves this problem.

The following example uses <cfgrid> to create a Flash grid:

 <!--- Get data ---> <cfquery datasource="myDsn" name="users"> SELECT nameFirst, nameLast, eMail, phone FROM users ORDER BY nameLast, nameFirst </cfquery> <!--- Display data grid ---> <cfform format="flash"> <!--- Data grid ---> <cfgrid name="gridUsers"         query="users" /> </cfform> 

The grid created by this code snippet would be scrollable, sortable, and columns would also be resizable. Additional attributes (and child tags) provide even greater control. This next snippet created an editable grid:

 <!--- Get data ---> <cfquery datasource="myDsn" name="users"> SELECT nameFirst, nameLast, eMail, phone FROM users ORDER BY nameLast, nameFirst </cfquery> <!--- Display data grid ---> <cfform format="flash" action="process.cfm"> <!--- Data grid ---> <cfgrid name="gridUsers"         selectmode="edit"         query="users"         insert="yes"         delete="yes" /> </cfform> 

To make a <cfgrid> editable, selectmode must be "edit" (instead of the default "browse"). In addition, to allow insertions insert="yes" is specified, and to allow deletions delete="yes" is specified.

NOTE

<cfgrid> supports a whole range of attributes for greater control over grid contents. Two child tags may also be used, <cfgridcolumn> lets you control the look and behavior of each column, and <cfgridrow> can be used to explicitly provide row values (instead of passing a query).

In addition, another tag named <cfgridupdate> can be used to simplify processing grid updates in a form action page.

Including Other Form Items

Within a <cfform format="flash"> any HTML tags or plain text is ignored. This means that you cannot use <br> for line breaks, <a> for links, and the like. To embed line breaks, literal text, spaces, lines, and more, use <cfformitem> (the supported types of which are listed in Table 16.2).

Table 16.2. <cfformitem> Types

TYPE	DESCRIPTION
hrule	Horizontal line.
html	Embed HTML text in form, text is specified between <cfformitem type="html"> and </cfformitem> tags, supports only the following HTML tags: <a>, <b>, <br>, <font>, <i>, <img>, <li>, <p>, <textformat>, <u>.
spacer	Space between controls.
text	Displays text in form, text is specified between <cfformitem type="text"> and </cfformitem> tags.
vrule	Vertical line.

Form Layout Options

The default layout generates by Flash Forms is a long list of controls, one beneath the other, with labels and controls left-aligned. As HTML layout tags cannot be used within Flash Forms, the <cfformgroup> tag provides support for control grouping, alignment, and layout. Table 16.3 lists the supported grouping types.

Table 16.3. <cfformgroup> Types

TYPE	DESCRIPTION
accordion	Places child pages within a vertical accordion control, use <cfformgroup type="page"> to define the child pages.
hbox	Align horizontally, use only with nested groups and not for form controls.
hdividedbox	Align horizontally and allow box resizing, use only with nested groups and not for form controls.
horizontal	Align horizontally.
panel	Creates a box containing other controls, with a label on a title bar.
page	Creates child pages within accordion and tab controls.
repeater	Crates child containers dynamically for each item within a query.
tabnavigator	Places child pages within a tabbed control, use <cfformgroup type="page"> to define the child pages.
tile	Places child controls in a grid.
vbox	Align vertically, use only with nested groups and not for form controls.
vdividedbox	Align vertically and allow box resizing, use only with nested groups and not for form controls.
vertical	Align vertically.

The following code snippet modifies the date of birth example seen earlier in this chapter, and includes a <cfformgroup> tag set so as to display the date control and button aligned horizontally (side-by-side).

 <cfform format="flash"         action="process.cfm"         width="200">   <cfformgroup type="horizontal">     <cfinput name="dob"              label="Date Of Birth:"              type="datefield">     <cfinput name="btnSubmit"              type="submit"              value="Submit">   </cfformgroup> </cfform> 

NOTE

<cfformgroup> tags may be nested as needed. The only type that must always be nested is type="page" which is used to create pages within a <cfformgroup> of type="accordion" or type="tabnavigator">

Controlling Form Appearance

By default, all Flash Forms have a similar color and look. This is the Macromedia "Halo" look, and it is the default used by ColdFusion generated Flash Forms. It is implemented as a skin and the following skins are supported:

• haloBlue

• haloGreen (the default)

• haloOrange

• haloSilver

To specify an alternate skin use the <cfform> skin attribute, as follows:

 <cfform format="flash"         action="process.cfm"         skin="haloOrange"> 

NOTE

It is not possible to define your own skins, although this functionality may be added in the future. However, form appearance can still be controlled using style attributes as explained below.

For more granular control, style values may be used. style values may be specified at various levels:

• In the <cfform> tag, in which case the style will apply to all form groups and controls unless overridden at the group or control level.

• In <cfformgroup> tag, in which case the style will apply to all controls unless within the group overridden at the control level.

• In specific controls.

style names and values are modeled on HTML CSS styles, and Flash controls supports lots (although not all) of the styles supported by CSS. Styles are specified as name:value pairs divided by semicolons, as seen in this snippet:

 <cfinput type="text"          name="nameFirst"          label="First Name:"          style="fontSize:12; backgroundColor:##FF9900"> 

TIP

When specifying RGB values, or any text containing # chars, be sure to escape # characters as ##.

NOTE

A full list of all supported styles is beyond the scope of this book. Refer to the online Flash and Flex documentation at http://livedocs.macromedia.com, or consult any book on Flash or Flex controls.

NOTE

Unlike CSS styles which may be defined externally and linked to, Flash styles must be specified inline.

Using Data Bindings

In addition to the controls, layout, and consistency advantages to Flash Forms, there is one other very important feature that must be mentioned. Binding allows controls to be connected to each other, so that they are aware of values or changes in other controls and can react or change accordingly.

Using bindings requires referring to other controls and properties within them. These are specified using ActionScript syntax (as the bindings you create are executed in the Flash Player). ActionScript uses { and } to delimit expressions (in much the same way as ColdFusion uses #).

Here is a simple binding example:

 <cfform format="flash" action="formdump.cfm">  <cfcalendar name="dob">  <cfinput name="displaydob"           type="text"           label="You selected:"           bind="{dob.selectedDate}"> </cfform> 

The code defines two controls, a calendar and a text field. The text field contains the following binding:

 bind="{dob.selectedDate}" 

This tells Flash to bind the text field to the calendar, populating the text field with whatever the currently selected date is in the calendar. dob.selectedDate means the selectedDate in the control named dob.

Bindings like this can be made between all sorts of controls, even controls on different pages within an accordion or tab navigator. To refer to values in other controls you need to use the syntax listed in Table 16.4 (replacing control with the name of the actual control).

Table 16.4. Control Bind Sources

CONTROL	SOURCE
<cfcalendar> and <cfinput type="datefield "> selected date	{control.selecteddate}
<cfgrid> selected item	{control.selectedItem.COLUMN}
<cfinput>	{control.text}
<cfinput> selected radio button	{control.selectedData}
<cfselect> selected item	{control.selectedItem.data}
<cftextarea>	{control.text}
<cftree> selected item	{control.selectedNode.getProperty('data').value}

Usage Notes

Before wrapping this review of Flash Forms, it is worthwhile to note some important points pertaining to their use:

• Although Flash Form controls may be embedded in HTML forms, the preferred use case is to create an entire Flash Form. The size of a single Flash Form control won't be much less than a full form, and using Flash for specific controls precludes the use of bindings and other functionality.

• All Flash Form controls must be named.

• It is a good idea to always specify the width of the <cfform>.

• Like HTML forms, Flash Forms do not need an action, and can therefore be used for display (this is particularly useful when using <cfgrid> and <cftree>).

• When using multi-page forms, form submission does not occur when pages are changed, and only upon final form submission.

• Flash Forms does not support server-side events via AMF (Flash Remoting) or SOAP (Web Services), to do this Flash or Flex are needed.

• Flash Forms support embedded ActionScript expressions, but do not support the creation of new objects or functions or the like.

• The one big limitation of Flash Forms (over HTML forms) is that as the Flash Player has not access to the file system, <input type="file"> cannot (at this time) be supported by Flash Forms.

NOTE

If you are looking for additional examples of Flash Forms use, visit http://www.cfform.com/.