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:
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 ControlsWithin 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.
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 ItemsWithin 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).
Form Layout OptionsThe 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.
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 AppearanceBy 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:
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:
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 BindingsIn 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).
Usage NotesBefore wrapping this review of Flash Forms, it is worthwhile to note some important points pertaining to their use:
NOTE If you are looking for additional examples of Flash Forms use, visit http://www.cfform.com/. |