Using ColdFusion with Flex – Part 3: Creating and running a phone selector

Understanding the application

The Phone Selector application demonstrates some important concepts and techniques, which are outlined in the following sections.

The ColdFusion code

The ColdFusion code consists of the following components and function:

• Phone.cfc: Phone.cfc uses the <cfproperty> tag to list each property in this CFC. The properties, their names and types, and their exact order are extremely important. If these do not match the properties in the equivalent ActionScript file, mapping does not occur (and when the array phones arrives in Flex it is an array of generic objects instead of an array of Phone objects).
• Catalog.cfc: To create the array of objects, Catalog.cfc uses the <cfinvoke> tag to create and populate a Phone.cfc (which is returned and appended to the array). The <cfinvoke> tag uses a fully qualified path to Phone.cfc, even though it is in the same folder. (In fact, component="Phone" would work). This, too, is to facilitate CFC to ActionScript class mapping. The fully qualified path is embedded in the array that is sent to the Flex application; it must match the path specified in the equivalent ActionScript class.
• getPhones(): The getPhones() function is the only function invoked from Flex. As a result, it must specify access="remote". Only CFC methods with this access level can be invoked through Flash Remoting.

The Flex code

The Flex code includes the following files:

• Main.mxml:

  • A <mx:RemoteObject> tag specifies to Flex how to get to the ColdFusion Catalog.cfc file. The source is fully qualified, and the destination is ColdFusion. This generic destination makes it unnecessary to map specific endpoints in Flex XML configuration files.
  • The main display uses states to switch between two views (with or without details), and the application exists within a <mx:Panel> tag with a <mx:ControlBar> tag at the bottom.
  • The <mx:Application> tag contains creationComplete="svc.getPhones()", which specifies that the application automatically invokes the ColdFusion getPhones() function as soon as the application is loaded and ready to use.
  • A variable named phones is defined and made bindable. The phones variable is where the phone data returned from ColdFusion is stored.
  • When ColdFusion returns data, a message handler is automatically invoked, as specified in the <mx:RemoteObject> tag. It creates an array that contains the data and uses that array to populate the phones variable.

• Phone.as:

  • Phone.as defines a new class of type Phone. This is the class that maps to Phone.cfc on the server.
  • The actual mapping is performed with the following code: [RemoteClass(alias="CFIDE.samples.Phones.CF.Phone")]
  • This code matches the <cfinvoke> syntax in Catalog.cfc, which is how the object types are automatically matched to each other.
  • The properties are exactly the same as those in Phone.cfc; they match the names, types, and order, which is required for mapping to work.
  • The Phone class has an empty constructor and a toString() method. (It is a good idea for every class you create to have a toString() method). In this simple example there are no other methods; however, there could be, just as the equivalent Phone.cfc has extra functions.

• FeatureFormatter.as:

  • Phones have two highlight points, and may have up to three other features (camera, video, tri-band) to highlight. ColdFusion developers frequently use inline <cfif> tags to determine whether to display values, and how to display them. This is a little more complicated in a Flex application; it is a custom formatter.
  • The formatter code is rather simple. It extends a base Formatter class (and calls that base class's constructor). The format() method builds the string, starting with the two highlight points and conditionally appending additional text.

• ProductDetails.mxml:

  • This is the details display component (used when Show Details is clicked).
  • A local bindable property named phone of type Phone is defined. This is passed in Main.mxml.
  • The code uses two formatters, a built-in one for currency formatter, and the FeatureFormatter custom formatter, which is then used to display phone features.

Where to go from here

Flash Remoting is the most efficient way to pass data between ColdFusion and client-side Flex applications. An important part of the new Flash Remoting adapter is support for automatic CFC to ActionScript object mapping. This requires careful calling conventions, explicit property definitions, and a RemoteClass definition within the ActionScript class. Once these are in place, passing complex data back and forth becomes very easy, and object types are retained (making any CFC functions or ActionScript class methods usable).

For more information, visit the Flex and ColdFusion topic page in the Flex Developer Center.

Using ColdFusion with Flex – Part 4: Creating and running a session tracker

Page 3 of 3

Previous Page