Using ColdFusion with Flex – Part 3: Creating and running a phone selector
Installing and configuring the application
The phone selector application has two parts: the ColdFusion code (ColdFusion components and a test ColdFusion page) and the Flex code (MXML and AS files). Make sure the ColdFusion code works properly before testing any integration.
To install the application, follow these steps:
- Download the Phone Selector sample files that accompany this article.
Create a folder named Phones in the CFIDE/samples folder (under the web root). If a folder named samples does not exist under your CFIDE folder, create it.
Note: You must place the application (both the ColdFusion and Flex bits) under the Web root. Furthermore, for automatic conversion between CFCs and ActionScript objects to occur, you must explicitly specify the path to these components and the path must be consistent in both ColdFusion and ActionScript code.
- Create two folders in the Phones folder, one named CF (for the ColdFusion code) and the other named Flex (for the Flex Project).
- Create a new project in Flex Builder 2. Select ColdFusion Flash Remoting Service as the server technology. Use the default location of the Flex Data Services server. Specify Phone selector as the application name. Specify the samples/Phones/Flex folder as the project location. Specify Main.mxml as the main page.
To use Flash Remoting, specify the following Flex compiler flag in the project properties:
--services=C:\CFusionMX7\wwwroot\WEB-INF\flex\ services-config.xml
(You must change the path, if your ColdFusion is installed in a different location).
- Right-click the project and select Close Project.
- Extract the ColdFusion files (catalog.xml, Phone.cfc, Catalog.cfc, and test.cfm) to the samples/Phones/CF folder.
- Extract the Flex files (Main.mxml, Thumbnail.mxml, ProductDetails.mxml, FeatureFormatter.as, and Phone.as) to the samples/Phones/Flex folder. When asked whether to overwrite Main.xml, click Yes to overwrite the auto-generated Main.mxml with the complete one.
- Copy the assets folder (with all of its contents) to the Flex folder.
- To ensure that the CFML code works (which you must do before attempting to connect to it using a Flex client), run test.cfm, which is in the samples/Phones/CF folder. To run test.cfm, browse to it using http://localhost:8500/CFIDE/samples/Phones/CF/test.cfm. (If you are not using the built-in server, change the URL accordingly.) Test.cfm simply instantiates the catalog, gets the phones array, and dumps the output. If test.cfm runs correctly, you are ready to try the Flex client.
- Open the project in Flex Builder and run it to display the phone list that ColdFusion returns. You can also select Show Details and Hide Details as needed.
The ColdFusion back end
The ColdFusion back end consists of three files:
- catalog.xml: This file contains the raw phone data.
- Phone.cfc: Phone.cfc is a single phone object. It contains variables to store phone properties (name, price, description, and so on),
Get and Set functions for use with those properties, and a function used to populate these properties. It also contains a series of CFML <cfproperty> tags, which define the object properties. Although <cfproperty> tags are not generally used within ColdFusion applications, they are very important when creating objects that are consumed by Flash Remoting (or web services, for that matter).
- Catalog.cfc: Catalog.cfc reads the XML file to obtain phone data, and then creates an array of Phone components populated with the data (in function
loadData() which is called by the constructor). The getPhones() function returns that array.
The Flex client
The Flex Client consists of five files:
- Main.mxml: This file is the main application page.
- ThumbNail.mxml: This file is the thumbnail renderer, used by the TileList in Main.mxml.
- ProductDetails,mxml: ProductDetails,mxml is the detail view component, used in Main.mxml.
- FeatureFormatter.as: This file is an ActionScript custom formatter, used in ProductDetails.mxml.
- Phone.as: This is an ActionScript class; it's the ActionScript equivalent of the ColdFusion component, Phone.cfc.
