Accessibility

Table of Contents

Employee Updater: Building a Client-Server Application with Macromedia Flash Data Connection Wizard and ColdFusion

Processing Logins

You now have a login form, which does nothing other than move and close. Next, you'll process the log-on. Validating the log-on requires a new method in the ColdFusion component. Copy the code for the Authenticate method to employees.cfc.

<CFFUNCTION NAME="Authenticate"
            HINT="Employee authentication"
            ACCESS="remote"
            RETURNTYPE="boolean">
   <CFARGUMENT NAME="LoginName"
               TYPE="string"
               REQUIRED="true">
   <CFARGUMENT NAME="LoginPassword"
               TYPE="string"
               REQUIRED="true">

   <CFSET var result=FALSE>

   <CFIF ARGUMENTS.LoginPassword IS "password">
      <CFSET result=TRUE>
   </CFIF>
	
   <CFRETURN result>
</CFFUNCTION>

The Authenticate method takes a login name and password, and returns true if the log-on authenticates and false if not. Although this particular method is stubbed for simplicity's sake, instead of doing a real lookup, it looks at the password and returns true if the password is password. In your own apps, you would obviously replace the processing in this method with your own database or LDAP lookups, or some other processing.

You need to make Flash aware of this new method, so use the following steps:

  1. Select Window > Development Panels > Web Services to display the Web Services panel.
  2. Click the Refresh button (the blue circular arrow icon). Flash will update the web services list and display the new Authenticate() method.

With that done, you can now wire up the login screen:

  1. Select the login screen.
  2. Drag a WebServiceConnector component from the Components panel to the login form. You might want to place it in the middle so it doesn't interfere with pop-up window placement.
  3. Select the new WebServiceConnector, open the Property inspector, and name the instance authService.
  4. Unlike the previous two web service calls, which the wizards populated, you'll need to configure this one manually. Open the Component Inspector panel, making sure that you select authService on the Stage.
  5. Select the Parameters tab. In the WSDLURL field, select the URL to the employees.cfc web service. If you're using the defaults, this will be http://localhost:8500/cfflash/employees.cfc?wsdl. In the operation field select Authenticate (Figure 20).

    Web Service properties may be manually defined in the Components Panel

    Figure 20. Define web service properties manually in the Components Inspector panel.

  6. The Authenticate web service requires that you pass two parameters to it: the login name and password. Therefore, you must bind the two form fields in the login form to this web service. Select the Bindings tab, click the Plus (+) button to display the Add Binding dialog box, select LoginName, and click OK to add it as an available binding.
  7. Click the Plus (+) button again, and add LoginPassword as an available binding.
  8. Select the LoginName binding, click the bound to field, and then click the magnifying glass to display the Bound To dialog.
  9. Locate the login form, select the loginName TextInput, click the text field on the right (Figure 22), and click OK to bind the loginName field to the LoginName web service argument.

    When using the Bound To dialog, be sure to select the correct controls

    Figure 21. When using the Bound To dialog, be sure to select the correct components.

  10. Repeat the last two steps to bind the loginPassword TextInput field to the LoginPassword web service argument.

Now, when the authService web service executes, it will pass values from the two form fields to ColdFusion for processing. The only problem is that, as is, the web service will never execute on its own. You need to add code to the form's Login button so that it will execute the web service call when a user presses it. You can do it manually or use a simple wizard:

  1. Select the login form.
  2. Select the Login button.
  3. Open the Behaviors panel.
  4. Press the Plus (+) button. Select Data > Trigger Data Source to display the Trigger Data Source dialog box.
  5. Expand the tree to locate root > application > login > authService (see Figure 22).

    The Trigger Data Source behavior allows for the interactive selection of Web Services

    Figure 22. The Trigger Data Source behavior allows for the interactive selection of web services.

  6. Select authService and press OK. Flash will generate a few lines of code that will execute the authService web service call when a user clicks the Login button.

When a user runs the application now, clicking the Login button causes the login form to pop up, which asks the user for a name and password and authenticates him. But you've yet to tell Flash what to do when the Authenticate method returns true or false. Use the following steps to add this code:

  1. Select the login form.
  2. Select the authService WebServiceConnector component.
  3. Open the Actions panel and paste the following code:

    // Process authentication results
    on (result) {
      if (results) {
        // If returned true
        // Make employee data editable
        _root.application.data.empDataGrid.editable=true;
        // Close login popup
        _root.application.login.loginInstance.deletePopUp();
      }
      else {
        // Returned false, show error message
        mx.controls.Alert.show("Login Failed!", "Login");
      }
    }
    
  4. Save the application and test it. You should now be able to login using any login name and a password of password. Upon successful log-on, you can edit the employee DataGrid (Figure 23).

    The Flash DataGrid supports inline editing

    Figure 23. The Flash DataGrid supports inline editing.