Using binding expressions in ColdFusion 9

Published on: September 6, 2011
Categories: ColdFusion
Comments: No Comments

As a longtime Flex developer I’ve always been used to having binding expressions to do one or more of the following things:

  • Bind the value of one input field to a data model
  • Bind the value from a data model to an input field or label
  • Bind the value of one input field to a label or another input field

Now, this binding mechanism always worked by mean of events that triggered an update of the bound field. Usually this is the change event, but you can define your own events that will trigger an update of the binding expression. I’m sure most of you already know this. But did you also know hat you can use a similar binding mechanism in ColdFusion 9?

The binding expressions in ColdFusion enable you to create dependencies between form elements, client-side recordsets, ColdFusion AJAX container elements and information fetched from background data requests. You can use binding with all AJAX-aware tags, but the exact syntax varies a little bit for every tag and for every different source of the data. Let me give you a couple of examples to clarify this.

Using a CFC

When you want to bind data to a public property of a ColdFusion Component (CFC) or to the result of a function within that CFC, the syntax will have to indicate that it needs to work with such a component. Assume you have a CFC named Test. Within that CFC you have a public function called multiply that takes 2 parameters and outputs the result of the calculation. The code could look something like this then.

<cfset test = new Test()/>
<cfdiv bind="cfc:test.multiply(3, 4)"/>

Creating field concatenations

Sometimes you want a certain input field to get a default value based on other input fields. This way you can aid the user in suggesting a certain value based on what he has already filled out. One such example could be the automatic generation of an email address. Suppose you have a form which requests the user’s first and last name and you’ll probably want the email address to be firstname.lastname@company.com (unless this would create a duplicate email address or illegal characters in some cases). So why should you be bothered to fill out the email address in 99% of the times you fill out this form?

You could make use of field binding in ColdFusion and concatinate the first and last name with a fixed string for the last part of the email address. To get the binding working you will have to define when the email address is updated. In this particular case I’m just going to update it on every keystroke in either the first name or last name field. The code then looks like this.

<cfform>
    First Name:<br />
    <cfinput type="text" name="firstname"><br />
    Last Name:<br>
    <cfinput type="text" name="lastname"><br />
    E-Mail:<br />
    <cfinput type="text" name="email" 
             bind="{firstname@keyup}.{lastname@keyup}@company.com">
    <br />
    <cfinput name="btnSubmit" type="submit">
</cfform>

Using a JavaScript Function

Sometimes it’s not that simple to concatenate values and perhaps some additional checks have to be performed before you can output the value to another field. Or maybe you just want the first letter of the first name instead of the full first name in the email address. These would be a perfect situations where you would want to use a JavaScript function. So you define a function that does the concatenation for you and simply display the result of the function.

This is quite similar to using a CFC, so the syntax is quite similar as well. Just check the code below to see what I mean.

<html>
<head>
    <script language="javascript">
        emailAddress = function(firstname,lastname) {
            return (firstname.substring(0,1) + lastname + '@company.com');
        }
    </script>
</head>
<body>
    <cfform>
        First Name:<br />
        <cfinput type="text" name="firstname"><br />
        Last Name:<br />
        <cfinput type="text" name="lastname"><br />
        E-Mail:<br />
        <cfinput type="text" name="email"
                 bind="javascript:emailAddress({firstname@keyup},{lastname@keyup})">
        <br/>
        <cfinput name="btnSubmit" type="submit">
    </cfform>
</body>
</html>

These are a few examples and situations where you could make use of the binding expressions. Of course there are still other ways of using them, such as binding the result of an AJAX call to a <cfselect> tag. Or you could use binding with a <cfajaxproxy> tag as well as a few others. But this blog post acts as a teaser, so hopefully you’re curious now and start working with binding expressions in ColdFusion 9, because this is some good stuff…

No Comments - Leave a comment

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Welcome , today is Friday, August 18, 2017