Welcome!

You will be redirected in 30 seconds or close now.

ColdFusion Authors: Yakov Fain, Jeremy Geelan, Maureen O'Gara, Nancy Y. Nee, Tad Anderson

Related Topics: ColdFusion

ColdFusion: Article

Data Entry ReFORMed

Data Entry ReFORMed

HTML-based data entry is a pain, both for developers and for end users. There's no way to sugarcoat it, HTML forms as used today are pathetic. Sure, there are new form specifications on the way, but they are not yet in use, browsers don't support them, and they are still unproven entities. Luckily, there's an option available right now; it's called Macromedia Flash MX.

The Forms Quagmire
Are HTML forms really that bad? Consider the following, first, from a developer's perspective:

  • HTML form controls are limited; you can't extend HTML with your own controls (simple things like date choosers or calendars).
  • HTML form controls provide almost no automatic validation (sure, you can validate text post-input, but you can't prevent the user from typing invalid characters in the first place).
  • There is no simple event model in form controls; basic form control that should be simple (things like graying out controls or making them available based on other selections) is anything but.
  • And one of the most annoying of all, because browsers cannot make round-trips to servers within a page, it is impossible to do things like creating side-by-side list boxes whereby options in one change based on selections in another. (We've all tried this one at some point.)

    To make up for these limitations, developers create multipart forms. These are not a feature of HTML, they are a hack born of necessity. Consider the following, this time from an end user's perspective:

  • Server-side form field validation is time-consuming and extremely annoying. Forcing a user to hit "Back" to make corrections is not user friendly.
  • Some browsers may even lose all entered data, requiring the user to reenter it all.
  • Users will often submit forms multiple times, or hit Back and Refresh repeatedly, creating multiple records or executing multiple requests (which they'll then e-mail you about later).

    And this is just the start of it. As a developer you've probably wasted countless hours having to accommodate for glaring inadequacies in HTML as it exists today.

    Which brings us to Flash MX.

    Why Flash-Based Forms?
    I am not going to sell you on the virtues of Flash - that's another column, and one probably better suited to be written by the Flash experts among us. For now, suffice it to say that Flash is readily available, can be very lightweight, is extremely portable, and (this is the most important part) can be used for more than animation, movies, and annoying popup ads.

    Not that I'm saying Flash should not be used for those things, it should be (well, maybe not for those popup ads that invade your screen, but for everything else). But Flash can also be used for building entire application clients or parts thereof, parts like forms.

    So why don't you see more Flash-based forms out there? There are a couple of reasons for this. First, until recently, Flash was rather inaccessible to developers (those of us who actually create forms); the tool was geared far more toward designers. And second, creating forms meant starting from scratch - actually creating form controls.

    Flash MX addresses both of these problems. It is far more developer friendly than any previous version of Flash, and it also comes with all sorts of form controls that you can literally just drag and drop into place.

    That alone makes Flash MX an ideal solution for building forms, but it gets better. Flash MX and ColdFusion MX can talk to each other with minimal work on your part, which makes creating forms that interact with back-end processing very easy.

    Still not convinced? I'll show you. Let's walk through an example together, in which we'll build a Flash-based form used to select an employee. For this example, we'll create the much-needed side-by-side list boxes. The left list box will display departments, and when a department is selected, the right list box will automatically update with the employees in that department allowing easy selection.

    The Back End
    ColdFusion MX and Flash MX interact in several ways, but one of the simplest is via ColdFusion Components (explained in detail in CFDJ Volume 4, issues 6, 7, and 10). So we'll start with a simple CFC which contains two methods: GetDepartment returns a list of all departments, and GetEmployees returns all employees (either in a specific department or in all departments. Here is employees.cfc:

    <!--- employees.cfc --->
    <CFCOMPONENT>
    <!---
    GetDepartments method
    Get all departments.
    --->
    <CFFUNCTION NAME="GetDepartments"
    ACCESS="remote"
    RETURNTYPE="query"
    OUTPUT="false">

    <!--- Get departments --->
    <CFQUERY NAME="Departments"
    DATASOURCE="exampleapps">
    SELECT *
    FROM tblDepartments
    ORDER BY DepartmentName
    </CFQUERY>

    <!--- Return query --->
    <CFRETURN Departments>

    </CFFUNCTION>

    <!---
    GetEmployees method
    Get all employees if no department
    specified, otherwise gets employees
    in specified department.
    --->
    <CFFUNCTION NAME="GetEmployees"
    ACCESS="remote"
    RETURNTYPE="query"
    OUTPUT="false">
    <!--- Optional department ID --->
    <CFARGUMENT NAME="DeptID"
    TYPE="uuid"
    REQUIRED="no">
    <!--- Get employees --->
    <CFQUERY NAME="Employees"
    DATASOURCE="exampleapps">
    SELECT *
    FROM tblEmployees
    <CFIF IsDefined("DeptID")>
    WHERE DeptIDFK = '#DeptID#'
    </CFIF>
    ORDER BY LastName, FirstName
    </CFQUERY>

    <!--- Return query --->
    <CFRETURN Employees>

    </CFFUNCTION>

    </CFCOMPONENT>
    Create a simple ColdFusion script to test the component. The following code invokes GetDepartments and lists the returned department names:

    <CFINVOKE COMPONENT="employees"
    METHOD="GetDepartments"
    RETURNVARIABLE="depts">

    <UL>
    <CFOUTPUT QUERY="depts">
    <LI>#DepartmentName#</LI>
    </CFOUTPUT>
    </UL>
    The following snippet tests the GetEmployees method, again displaying returned data in a list:

    <CFINVOKE COMPONENT="employees"
    METHOD="GetEmployees"
    RETURNVARIABLE="emps">
    <UL>
    <CFOUTPUT QUERY="emps">
    <LI>#Lastname#, #FirstName#</LI>
    </CFOUTPUT>
    </UL>
    Assuming that the code worked correctly, you now have a CFC capable of accessing and returning data - a component that may be used by ColdFusion (as in this test code) and also by client-side Flash.

    Creating the Flash Movie
    Now fire up Flash MX. We're going to keep the Flash really simple - we'll ignore frames, layers, animation, tweening, etc., so feel free to close the TimeLine window (as I routinely do). The only windows you'll need open are the Actions window, the Properties window, and the Components window (as seen in Figure 1).

    Next, save the new (empty) Flash movie somewhere beneath your Web root (so that you can get to it).

    The form we'll create has two drop-down list boxes (actually called ComboBoxes), so drag two ComboBoxes from the Components window (make sure the drop-down list at the top of the window reads "Flash UI Components") onto the stage. We'll also need a Submit button so drag a PushButton component onto the stage as well. You now have three ready-to-use components on your stage (as seen in Figure 2).

    The next step is to name the instances of the components we just placed on the stage (so as to be able to programmatically script them). Make sure the Properties window is open, then click on each of the three components to access its properties:

  • Click on the left ComboBox and specify dept_cb as the instance name (as seen in Figure 3).
  • Click on the right ComboBox and specify dept_emp as the instance name.
  • Click on the button and specify submit_btn as the instance name and Submit as the label.

    Save the movie and then execute it. Either select Test Movie from the Control menu to run it right within Flash, or select Publish from the File menu to publish the movie so that it may be loaded in a Web browser. You now have a working (albeit rather useless) Flash-based form (as shown in Figure 4).

    ColdFusion-Powered Flash
    Now we need to get Flash to interact with the CFC. Open the Actions window (if it is not already open) and make sure the Actions for Frame 1 of Layer Name Layer 1 option is selected from the drop-down list above it, and enter the following ActionScript code (as seen in Figure 5):

    #include "NetServices.as"
    #include "DataGlue.as"

    // Init stuff
    if (inited == undefined) {
    inited = true;
    // Configure connection to ColdFusion
    var gwURL = "http://localhost:8500/flashservices/gateway";
    NetServices.setDefaultGatewayURL(gwURL);
    gw = NetServices.createGatewayConnection();
    employeeService = gw.getService("cfflash.employees", this);
    // Invoke the GetDepartments method
    employeeService.GetDepartments();
    }

    The first two lines of code are include statements (kind of like <CFINCLUDE> in CFML). The first includes support for Flash Remoting (the ability to interact with back-end systems like ColdFusion) and the second includes DataGlue, a series of functions that dramatically simplifies binding returned data to UI controls (as you will soon see).

    The next block of code is initialization code that needs to be run only once, as it checks to see if it, itself, has been run already (checking for a variable that is defined within the if statement).

    A variable is then declared to store the URL to the Flash Gateway on the ColdFusion MX server. The snippet shown here accesses a local ColdFusion MX using the integrated HTTP server, so the URL is localhost:8500. You'll need to change this to point to your own ColdFusion server as needed.

    The next few lines of code create a gateway connection, and then a local reference to a remote CFC. The path here is specified as cfflash.employees which points to the employees.cfc file in the cfflash directory. You'll need to change that path as needed so that it points to your own employees.cfc file.

    The last line of code actually calls the GetDepartments method. Flash knows that employeeService has been bound to a CFC on the other end of a connection, and so a call to employeeService.GetDepartments() is actually a call to the GetDepartments method in the service bound to employeeService. As soon as this last line of code is executed, Flash will have a query containing the list of departments.

    If you were to run the Flash movie now, it would look no different than it did before. Data is being retrieved but nothing is being done with it (think of it as a <CFQUERY> without a <CFOUTPUT>). The next step is to tell Flash how to populate the appropriate ComboBox with the retrieved data.

    When GetDepartments() is executed, results are returned. Flash automatically looks for a function named GetDepartments_Result(), and will execute it if present. So we'll need to create that function which will loop through the returned data, processing one row at a time and inserting them into the ComboBox. Fortunately you don't have to do that manually; that's where DataGlue comes into play. Here is the GetDepartments_Result() function:

    // Process retrieved departments
    function GetDepartments_Result(result) {
    // Populate dept_cb with results
    DataGlue.bindFormatStrings(dept_cb,result,
    "#DepartmentName#",
    "#DepartmentID#");
    }
    As you can see, GetDepartments_Result() is really simple. It calls DataGlue.bindFormatStrings() to bind the data in result to ComboBox dept_cb using #DepartmentName# as the label (display text) and #DepartmentID# as the value.

    While we're at it, add a similar function to process results returned by GetEmployees(), as we'll be needing that next:

    // Process retrieved employees
    function GetEmployees_Result(result) {
    // Populate emp_cb with results
    DataGlue.bindFormatStrings(emp_cb,
    result,
    "#lastname#, #firstname#",
    "#employeeid#");
    }
    If you save and execute the Flash movie, you'll now see that the left ComboBox is being populated by data returned by ColdFusion. So far, so good. Now for the left ComboBox. What we need is a way to force the left ComboBox to refresh each time a selection is made in the right ComboBox. First create a new function named employeesRefresh(). Each time this function is called, it invokes the GetEmployees method in the employees.cfc (which in turn triggers the GetEmployees_Result() function just created). In order to get employees for the currently selected department, the getSelectedItem() ComboBox method is used to get the current department ID, which is passed as a parameter to GetEmployees(). Here is the employeesRefresh() function:

    // dept_cb change handler
    function employeesRefresh() {
    // Invoke GetEmployees method
    employeeService.GetEmployees(dept_cb.getSelectedItem().data);
    }

    To actually get this employeesRefresh() function to be executed when a department selection is made, all we need to do is add the following code into the initialization code (you can put it right after the inited=true;):

    // Set change handler for first combobox
    dept_cb.setChangeHandler("employeesRefresh");
    This code sets employeesRefresh as the change handler for dept_cb (the left ComboBox), so that any time a change is made in dept_cb, employeesRefresh() will be executed and the employee list will be refreshed which in turn will force emp_cb to be updated.

    Try out your new form. You should see both ComboBoxes populated (as seen in Figure 6) and whenever a department is selected, the employees in that department will be listed automatically. This process makes round-trips to ColdFusion as needed, but it happens so quickly and efficiently (and without needing a page refresh) that you'd never even know.

    There is one last step needed. To actually submit the form, you need form processing code, something that will be executed when the submit button is clicked. Here is the code:

    // Process submit button pressed
    submit_btn.onrelease = function () {
    EmployeeID = emp_cb.getSelectedItem().data;
    getURL("action.cfm", "", "POST");
    }
    To post a form variable, you first need to create it, so the first line of code creates a variable named EmployeeID, and populates it with whatever the id of the selected employee is (again using the getSelectedItem() method). Then getURL is used to actually submit the form fields; here the action page is named action.cfm but you can name yours whatever you'd like. For a simple test you can create an action.cfm that contains the following:

    <CFOUTPUT>
    EmployeeID: #EmployeeID#
    </CFOUTPUT>
    And there you have it. That's all the code you need to create side-by-side ComboBoxes that do exactly what is needed without requiring a single screen refresh. Just to be on the safe side, Listing 1 shows the complete ActionScript code listing.

    Summary
    Creating Flash-based forms is not complicated once you understand the basic steps. Using the form components that are provided removes the need for UI work (where most of us CFers would have gotten stuck) and requires minimal ActionScript. The best part of it is that the form we just created is highly usable and is only 11K in size (yes, believe it or not, Flash need not be big and bloated).

    Give it a try (and be sure to go to the Developers Exchange at www.macromedia.com to download additional form controls, including a complete calendar, a tree control, and even a data grid). You'll find that Web-page form nightmares are a thing of the past.

  • More Stories By Ben Forta

    Ben Forta is Adobe's Senior Technical Evangelist. In that capacity he spends a considerable amount of time talking and writing about Adobe products (with an emphasis on ColdFusion and Flex), and providing feedback to help shape the future direction of the products. By the way, if you are not yet a ColdFusion user, you should be. It is an incredible product, and is truly deserving of all the praise it has been receiving. In a prior life he was a ColdFusion customer (he wrote one of the first large high visibility web sites using the product) and was so impressed he ended up working for the company that created it (Allaire). Ben is also the author of books on ColdFusion, SQL, Windows 2000, JSP, WAP, Regular Expressions, and more. Before joining Adobe (well, Allaire actually, and then Macromedia and Allaire merged, and then Adobe bought Macromedia) he helped found a company called Car.com which provides automotive services (buy a car, sell a car, etc) over the Web. Car.com (including Stoneage) is one of the largest automotive web sites out there, was written entirely in ColdFusion, and is now owned by Auto-By-Tel.

    Comments (4) View Comments

    Share your thoughts on this story.

    Add your comment
    You must be signed in to add a comment. Sign-in | Register

    In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


    Most Recent Comments
    Joe Kelly 04/17/03 04:04:00 PM EDT

    I noticed a small error in the instructions on naming the check boxes. It may throw you, especially if you are new to ActionScript. The article says to name the employee check box

    Daniel Walker 11/14/02 07:09:00 AM EST

    This book compares and contrasts the various technologies available for getting data off your web visitors and into your web-based application, including Flash-based forms:
    http://www.glasshaus.com/bookInfo.asp?bookId=60

    ... while, FWIW, _this_ book has an entire chapter on Flash-Accessability:
    http://www.glasshaus.com/bookInfo.asp?bookId=44

    Yes, I'll admit that I work for the company that publishes them, but I stil think they're good books. I hope I haven't infringed the rules of this forum.

    Excellent article, BTW, Mr Forta!

    Will Belden 11/13/02 08:53:00 PM EST

    If you scroll down past the original info on the link that Ian provided, you'll see an updated section from the author about improvements in Flash MX.

    Ian Westbrook 11/13/02 07:21:00 PM EST

    whilst what Ben says may be true, the fact is that html forms, if designed right (and that's often a big _IF_), are accessible for visually-impaired users, whilst Flash-based forms are not, generally. And if the RNIB (Royal National Institute for the Blind) is right in saying that up to 10% of the (UK) population has some form of visual impairment (which seems a high figure, until you think about older people whose sight is failing), that's a _lot_ of users with a _lot_ of spending power.

    I know it's two years old now, but I'm sure you've all seen this:

    http://www.useit.com/alertbox/20001029.html

    and anyway, we've all been hitting our head against this particular brick wall for so long that there's a huge resource of hacks and workarounds. I wonder if Ben would be so keen on Flash if Allaire hadn't been bought by Macromedia? (OK, a cheap shot, but not entirely without merit, I feel, and no offence meant. I've got a lot of respect for BF)...

    Ian W

    @ThingsExpo Stories
    Nordstrom is transforming the way that they do business and the cloud is the key to enabling speed and hyper personalized customer experiences. In his session at 21st Cloud Expo, Ken Schow, VP of Engineering at Nordstrom, discussed some of the key learnings and common pitfalls of large enterprises moving to the cloud. This includes strategies around choosing a cloud provider(s), architecture, and lessons learned. In addition, he covered some of the best practices for structured team migration an...
    Recently, REAN Cloud built a digital concierge for a North Carolina hospital that had observed that most patient call button questions were repetitive. In addition, the paper-based process used to measure patient health metrics was laborious, not in real-time and sometimes error-prone. In their session at 21st Cloud Expo, Sean Finnerty, Executive Director, Practice Lead, Health Care & Life Science at REAN Cloud, and Dr. S.P.T. Krishnan, Principal Architect at REAN Cloud, discussed how they built...
    In his session at 21st Cloud Expo, Raju Shreewastava, founder of Big Data Trunk, provided a fun and simple way to introduce Machine Leaning to anyone and everyone. He solved a machine learning problem and demonstrated an easy way to be able to do machine learning without even coding. Raju Shreewastava is the founder of Big Data Trunk (www.BigDataTrunk.com), a Big Data Training and consulting firm with offices in the United States. He previously led the data warehouse/business intelligence and B...
    In his Opening Keynote at 21st Cloud Expo, John Considine, General Manager of IBM Cloud Infrastructure, led attendees through the exciting evolution of the cloud. He looked at this major disruption from the perspective of technology, business models, and what this means for enterprises of all sizes. John Considine is General Manager of Cloud Infrastructure Services at IBM. In that role he is responsible for leading IBM’s public cloud infrastructure including strategy, development, and offering m...
    With tough new regulations coming to Europe on data privacy in May 2018, Calligo will explain why in reality the effect is global and transforms how you consider critical data. EU GDPR fundamentally rewrites the rules for cloud, Big Data and IoT. In his session at 21st Cloud Expo, Adam Ryan, Vice President and General Manager EMEA at Calligo, examined the regulations and provided insight on how it affects technology, challenges the established rules and will usher in new levels of diligence arou...
    The 22nd International Cloud Expo | 1st DXWorld Expo has announced that its Call for Papers is open. Cloud Expo | DXWorld Expo, to be held June 5-7, 2018, at the Javits Center in New York, NY, brings together Cloud Computing, Digital Transformation, Big Data, Internet of Things, DevOps, Machine Learning and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding busin...
    Smart cities have the potential to change our lives at so many levels for citizens: less pollution, reduced parking obstacles, better health, education and more energy savings. Real-time data streaming and the Internet of Things (IoT) possess the power to turn this vision into a reality. However, most organizations today are building their data infrastructure to focus solely on addressing immediate business needs vs. a platform capable of quickly adapting emerging technologies to address future ...
    No hype cycles or predictions of a gazillion things here. IoT is here. You get it. You know your business and have great ideas for a business transformation strategy. What comes next? Time to make it happen. In his session at @ThingsExpo, Jay Mason, an Associate Partner of Analytics, IoT & Cybersecurity at M&S Consulting, presented a step-by-step plan to develop your technology implementation strategy. He also discussed the evaluation of communication standards and IoT messaging protocols, data...
    22nd International Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, and co-located with the 1st DXWorld Expo will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud ...
    22nd International Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, and co-located with the 1st DXWorld Expo will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud ...
    DevOps at Cloud Expo – being held June 5-7, 2018, at the Javits Center in New York, NY – announces that its Call for Papers is open. Born out of proven success in agile development, cloud computing, and process automation, DevOps is a macro trend you cannot afford to miss. From showcase success stories from early adopters and web-scale businesses, DevOps is expanding to organizations of all sizes, including the world's largest enterprises – and delivering real results. Among the proven benefits,...
    @DevOpsSummit at Cloud Expo, taking place June 5-7, 2018, at the Javits Center in New York City, NY, is co-located with 22nd Cloud Expo | 1st DXWorld Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The widespread success of cloud computing is driving the DevOps revolution in enterprise IT. Now as never before, development teams must communicate and collaborate in a dynamic, 24/7/365 environment. There is no time to wait...
    Cloud Expo | DXWorld Expo have announced the conference tracks for Cloud Expo 2018. Cloud Expo will be held June 5-7, 2018, at the Javits Center in New York City, and November 6-8, 2018, at the Santa Clara Convention Center, Santa Clara, CA. Digital Transformation (DX) is a major focus with the introduction of DX Expo within the program. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive ov...
    SYS-CON Events announced today that T-Mobile exhibited at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. As America's Un-carrier, T-Mobile US, Inc., is redefining the way consumers and businesses buy wireless services through leading product and service innovation. The Company's advanced nationwide 4G LTE network delivers outstanding wireless experiences to 67.4 million customers who are unwilling to compromise on qua...
    SYS-CON Events announced today that Cedexis will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Cedexis is the leader in data-driven enterprise global traffic management. Whether optimizing traffic through datacenters, clouds, CDNs, or any combination, Cedexis solutions drive quality and cost-effectiveness. For more information, please visit https://www.cedexis.com.
    SYS-CON Events announced today that Google Cloud has been named “Keynote Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Companies come to Google Cloud to transform their businesses. Google Cloud’s comprehensive portfolio – from infrastructure to apps to devices – helps enterprises innovate faster, scale smarter, stay secure, and do more with data than ever before.
    SYS-CON Events announced today that Vivint to exhibit at SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California. As a leading smart home technology provider, Vivint offers home security, energy management, home automation, local cloud storage, and high-speed Internet solutions to more than one million customers throughout the United States and Canada. The end result is a smart home solution that sav...
    SYS-CON Events announced today that Opsani will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Opsani is the leading provider of deployment automation systems for running and scaling traditional enterprise applications on container infrastructure.
    SYS-CON Events announced today that Nirmata will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Nirmata provides a comprehensive platform, for deploying, operating, and optimizing containerized applications across clouds, powered by Kubernetes. Nirmata empowers enterprise DevOps teams by fully automating the complex operations and management of application containers and its underlying ...
    SYS-CON Events announced today that Opsani to exhibit at SYS-CON's 21st Cloud Expo, which will take place on October 31 through November 2nd 2017 at the Santa Clara Convention Center in Santa Clara, California. Opsani is creating the next generation of automated continuous deployment tools designed specifically for containers. How is continuous deployment different from continuous integration and continuous delivery? CI/CD tools provide build and test. Continuous Deployment is the means by which...