• Home
• Tutorials
• Forums
• Reference
• Developers
• Advertise
• About Us

Actionscript Basics in CFFORM

Actionscript Basics For Your Cfform

This tutorial is to help all those that have been posting help request to the forums here with a collection of simple to use and understand methods of achieving different effects with your coldfusion flash forms. Although this list is by no means complete, it will give you a start in providing advance actions for your forms. I will continue to supply more tutorials on the subject as the need arises.

Working with design:
One of the great features of flash forms in coldfusion is the ability to change its colors in a dynamic way or “on the fly”. This can be achieved globally or for a single item. First lets look at the global effect.

<cfsavecontent variable="changeTheme">
    _root.setStyle("themeColor",_root.ThemeColor.selectedItem.data);
</cfsavecontent>
<cfform format="flash" skin="haloblue">
<cfselect name="ThemeColor" width="100" onChange="#changeTheme#">
    <option value="haloblue">Blue</option>
    <option value="halogreen">Green</option>
    <option value="haloorange">Orange</option>
    <option value="halosilver">Silver</option>
</cfselect>
</cfform>

Here we have told the actionscript that is inbetween the cfsavecontent tags that we want to set the style of the form to the selected theme color. We use the onChange behavior to get instant feedback from the form instead of using a button. Take note that the option values are lowercase and there are only a few possible options. This is currently the only default skins available. You can however create your own in multitude of colors, but that is outside the scope of this tutorial.

Ok let’s work on changing the only one style for a form field instead of the whole form.

<cfsavecontent variable="changeTheme">
    _root.ThemeColor.setStyle("themeColor",_root.ThemeColor.selectedItem.data);
</cfsavecontent>
<cfform format="flash" skin="haloblue">
    <cfselect name="ThemeColor" width="100" onChange="#changeTheme#">
        <option value="haloblue">Blue</option>
        <option value="halogreen">Green</option>
        <option value="haloorange">Orange</option>
        <option value="halosilver">Silver</option>
    </cfselect>
    <cfinput type="button" name="mybtn" value="I'm haloblue">
</cfform>

This time instead of making it a global we told the actionscript that we only wanted the select box to change color. Go ahead place your mouse over the button after selecting the theme you want. If you select anything but the haloblue you will see that it stays haloblue while the select box become the color you choose.

Working with dynamic images:
Dynamic images can be called using cfform. There are some stipulations though. JPG and Swf files are the only ones you can actually use to dynamically load after the form has appeared on your screen. Prior to that you have the two file types above plus Gif and Png. So if you want to create an image gallery or the likes in your form you will need to use only jpg or swf files.

Images don’t require actionscript in a cfsavecontent tag if you are calling them through a grid or select box. All you need is this:

<cfformitem type="html" height="150" width="150" bind="<p><img src='images/{myGrid.selectedItem.photo}'></p>"></cfformitem>

The <p> tags are important because they actually help space the picture correctly. Experiment with removing them and you will see what I mean.

Selecting an item from the start:
One nice thing about cfforms is the ability to pre select an item in a grid or select box even apply it to an accordion or tab navigator form group. Ok first thing is first lets select something from a grid for our website visitor. Lets just say that we had collected information to accurately suggest a value without them telling us in a cfgrid and a cfselect box. So here is how it is done.

<cfsavecontent variable="selectedIndex">
    _root.myGrid.selectedIndex = 0;
    _root.mySelectBox.selectedIndex = 3;
</cfsavecontent>
<cfscript>
    myDB = QueryNew("someValue,photo");
    temp = QueryAddRow(myDB,3);
    QuerySetCell(myDB,"someValue","one",1);
    QuerySetCell(myDB,"photo","one.jpg",1);
    QuerySetCell(myDB,"someValue","two",2);
    QuerySetCell(myDB,"someValue","three",3);
</cfscript>
<cfquery dbtype="query" name="test">
    Select someValue, photo From myDB
</cfquery>
<cfform format="flash" skin="haloblue" width="500" height="500" onload="#selectedIndex#">
    <cfgrid name="myGrid" query="test" format="flash" width="400" height="300">
        <cfgridcolumn name="someValue" >
        <cfgridcolumn name="photo" display="no">
    </cfgrid>
    <cfselect name="mySelectBox" width="100">
        <option value="">0</option>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
    </cfselect>
</cfform>

Before everyone starts panicking that the photo column isn’t showing up we have hidden it on purpose. The code above sets the display attribute so that we will not see the value of this column. Allowing us to hide values that we don’t want our users to see. Also the photo column is important in our previous example for displaying images dynamically and will be made apparent later. Ok now how do we get an accordion or tab navigator to get placed on the right tab. Well
lets say our user has previously bought our product and we have them sign in so we already know some stuff about him/her and we just need them to enter credit card info again. Instead of sending all her information to the form and having him/her go through the tabs till they find the information area they need to input we can send them their directly. Here is how.

<cfsavecontent variable="preSelect">
    _root.myAcc.selectedIndex=1;
</cfsavecontent>
<cfform format="flash" skin="haloblue" onload="#preSelect#">
    <cfformgroup type="accordion" id="myAcc">
        <cfformgroup type="page" label="page 0">
        </cfformgroup>
        <cfformgroup type="page" label="page 1">
        </cfformgroup>
        <cfformgroup type="page" label="page 2">
        </cfformgroup>
    </cfformgroup>
</cfform>

Notice the cfformgroup for the accordion. It doesn’t have a name attribute to it. Instead we set it’s id attribute to the name we wish to give it in order to get a selected index. You do the same thing for a tab navigator group. It’s important to note that flash counts indexes from zero not one. So your starting point
will always be zero. Unlike databases or arrays, which start with 1. So remember to count zero then one, two, three… and so on.

Disabling form fields:
Disabling form fields is pretty easy and straightforward. It’s useful to know in cases where certain form fields may cause errors if two values are selected that don’t go together. Here is an example of how to achieve this:

<cfsavecontent variable="disableEnable">
    if (_root.myLB.selectedItem.data == "on") {
        _root.onOffBox.enabled = true;
    } else {
        _root.onOffBox.enabled = false;
    }
</cfsavecontent>
<cfform format="flash" skin="haloblue" width="500" height="500">
    <cfselect name="myLB" width="100" onChange="#disableEnable#">
        <option value="on">on</option>
        <option value="off">off</option>
    </cfselect>
    <cfinput type="text" size="15" value="hello" name="onOffBox">
</cfform>

Pretty simple huh?
Well that is it for now. I have included some other examples in this zip file that will also help you on your way to writing actionscript for your forms. I hope this helps all of you get a better grasp of the power at hand and look forward to see your applications built from it.