Using ActionScript in Flash forms

ActionScript 2.0 is a powerful scripting language that is used in Flash and other related products and is like JavaScript. You can use a subset of ActionScript 2.0 code in your Flash forms.
Information on how to include ActionScript in your Flash forms, and restrictions and additions to ActionScript that apply to ColdFusion Flash forms are described here. However, information on writing ActionScript is not provided. For details on ActionScript and how you can use it, see the Flash ActionScript 2.0 documentation, including the documents available in the Flash and Flex sections of LiveDocs at www.adobe.com/go/learn_cfu_docs_en.

Using ActionScript code in CFML

You can use ActionScript in the following attribute of tags in CFML Flash format forms:

  • Form and control events, such as the onSubmit attribute of the cfform tag, or the onChange and onClick attributes of the cfinput tag. The attribute description on the tag reference pages in the CFML Reference list the event attributes.
  • Bind expressions, which you can use to set field values. For more information on binding data, see Binding data in Flash forms.Your ActionScript code can be inline in the form attribute specification, you can make a call to a custom function that you define, or you can use the ActionScript includecommand in the attribute specification to get the ActionScript from a .as file. The following example shows a simple Fahrenheit to Celsius converter that does the conversion directly on the client, without requiring the user to submit a form to the ColdFusion server.

    <cfform format="flash" width="200" height="150">
    <cfinput type="text" name="fahrenheit" label="Fahrenheit" width="100"
    value="68">
    <cfinput type="text" name="celsius" label="Celsius" width="100">
    <cfinput type="button" name="convert" value="Convert" width="100"
    onClick="celsius.text = Math.round((farenheit.text-32)/1.8*10)/10">
    </cfform>

     

Note: You do not use the text property (for example, fieldname.text) to access hidden fields. To access a hidden field, use the format formname.fieldname = 'value'.

Custom ActionScript functions

Custom ActionScript functions are the equivalent of CFML UDFs. You can define your own functions in ColdFusion by using the cfformitem tag with a type attribute value of script, or you can define the functions in an ActionScript (.as) file. Also, ColdFusion includes a small number of predefined custom ActionScript functions that you can use in your Flash form controls.
You can use the following custom functions in the ActionScript for all form controls to reset or submit the form:

  • resetForm()
  • submitForm()
    You can use the following custom functions in cfgrid tags only to insert and delete rows in the grid:
  • GridData.insertRow(gridName)
  • GridData.deleteRow(gridName)
    The following example shows how you can use the two GridData functions to add custom buttons that add and delete rows from a Flash form. These buttons are equivalent to the buttons that ColdFusion creates if you specify insert="yes" and delete="yes" in the cfgrid tag, but they allow you to specify you own button text and placement. This example puts the buttons on the side of the grid, instead of below it and uses longer than standard button labels.

<cfform format="flash" height="265" width="400">
<cfformitem type="html">
You can edit this grid as follows:
<ul>
<li>To change an item, click the field and type.</li>
<li>To add a row, click the Insert Row button and type in the fields
in the highlighted row.</li>
<li>To delete a row, click anywhere in the row and click the
Delete Row button</li>
</ul>
<p><b>When you are done, click the submit button.</b></p>
</cfformitem>
<!--- The hbox aligns the grid and the button vbox horizontally --->
<cfformgroup type="hbox" style="verticalAlign:bottom;
horizontalAlign:center">
<!--- To make all elements align properly, all of the hbox children must
be containers, so we must put the cfgrid tag in a vbox tag. --->
<cfformgroup type="vbox">
<!-- An editable grid with hard coded data (for simplicity).
By default, this grid does not have insert or delete buttons. --->
<cfgrid name="mygrid" height="120" width="250" selectmode="edit">
<cfgridcolumn name="city">
<cfgridcolumn name="state">
<cfgridrow data="Rockville,MD">
<cfgridrow data="Washington,DC">
<cfgridrow data="Arlington,VA">
</cfgrid>
</cfformgroup>
<!--- Group the Insert and Delete buttons vertically;
use a vbox to ensure correct alignment. --->
<cfformgroup type="vbox" name="buttons"style="verticalAlign:bottom;
horizontalAlign:center">
<!--- Use a spacer to position the buttons. --->
<cfformitem type="spacer" height="18" />
<!--- Use the insertRow method in the onClick event to add a row. --->
<cfinput type="button" name="ins" value="Insert a new row" width="125"
onClick="GridData.insertRow(mygrid);">
<!--- Use the deleteRow method in the onClick event to delete
the selected row --->
<cfinput type="button" name="del" value="Delete selected row"
width="125" onClick="GridData.deleteRow(mygrid)">
<cfinput type="submit" name="f1" value="Submit" width="125">
</cfformgroup>
</cfformgroup>
</cfform>

<!--- Dump the form if it has been submitted. --->
<cfif IsDefined("form.fieldnames")>
<cfdump var="#form#"><br>
</cfif>

 

Get help faster and easier

New user?