Adobe ColdFusion 8

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>