Using ColdFusion with Flex – Part 1: Creating and running a contact manager application

Installing and configuring the application

The Contact Manager application has two parts: the Flex code (MXML and AS files) and the ColdFusion component (CFC) files. Here is what you need to do to get the Flex side working:

1. Download the Contact Manager sample files that accompany this article.
2. Unzip the Flex application files (contactmgr.mxml, Hourglass.mxml, mini.mxml, wait.png, and Contact.as) to the Flex samples directory, preserving the file path information. The samples directory is C:\fds2\jrun4\servers\default\samples if you installed Flex Data Services using the default settings.
3. Copy both of the ColdFusion-specific channel definitions (cf-dataservice-rtmp and
   cf-polling-amf) from the example services-config.xml file (default location: C:\fds2\resources\config\) to the <channels> section of the services-config.xml file (default location: C:\fds2\jrun4\servers\default\samples\WEB-INF\flex).

   	
   <!--  ColdFusion specific RTMP channel -->
   <channel-definition id="cf-dataservice-rtmp" class="mx.messaging.channels.RTMPChannel">
     <endpoint uri="rtmp://{server.name}:2048" class="flex.messaging.endpoints.RTMPEndpoint"/>
     <properties>
         <idle-timeout-minutes>20</idle-timeout-minutes>
         <serialization>
           <!-- This must be turned off for any CF channel -->
           <instantiate-types>false</instantiate-types>
         </serialization>
     </properties>
   </channel-definition>
   
   <!-- ColdFusion specific HTTP channel -->
   <channel-definition id="cf-polling-amf" class="mx.messaging.channels.AMFChannel">
     <endpoint uri="http://{server.name}:{server.port}/{context.root}/messagebroker/cfamfpolling" class="flex.messaging.endpoints.AMFEndpoint"/>
     <properties>
       <serialization>
         <!-- This must be turned off for any CF channel -->
         <instantiate-types>false</instantiate-types>
       </serialization>
       <polling-enabled>true</polling-enabled>
       <polling-interval-seconds>8</polling-interval-seconds>
     </properties>
   </channel-definition>
               

4. (Optional) Turn on the ColdFusion-specific debugging output. The service-config.xml file contains a <logging> section, which contains a <filters> tag with a list of patterns for debug output. To enable some helpful debugging output to the Flex 2 console, add a new <pattern> tag:

   <pattern>DataService.coldfusion</pattern>

5. Add the coldfusion-dao adapter to the data-management-config.xml file (default location:
   C:\fds2\jrun4\servers\default\samples\WEB-INF\flex). In the <adapters>
   section at the top of the file add the following line:
   

   <adapter-definition id="coldfusion-dao" class="coldfusion.flex.CFDataServicesAdapter"/>

6. Copy the cfcontact destination from the example data-management-config.xml file (default location: C:\fds2\resources\config\) to the data-management-config.xml file (default location: C:\fds2\jrun4\servers\default\samples\WEB-INF\flex):
   

   		 
   <destination id="cfcontact">
          <adapter ref="coldfusion-dao"/>
          <channels>
              <channel ref="cf-dataservice-rtmp"/>
              <channel ref="cf-polling-amf"/>
          </channels>
          <properties>
              <component>samples.contact.ContactAssembler</component>
              <scope>request</scope>
              <metadata>
                  <identity property="contactId"/>
              </metadata>
          </properties>
   </destination>

7. To try the CRM example, you should also copy the cfcompany and cfemployee destinations. Copy the destination from the example data-management-config.xml file found in resources/config (default location: C:\fds2\resources\config\).

8. Find the "ColdFusion Sample" comment and copy everything from the <destination id="cfcontact"> tag to the </destination> end tag. To try the CRM example, you may copy the cfcompany and cfemployee destinations as well. Here is the cfcontact destination:

      <destination id="cfcontact">
          <adapter ref="coldfusion-dao"/>
          <channels>
              <channel ref="cf-dataservice-rtmp"/>
              <channel ref="cf-polling-amf"/>
          </channels>
          <properties>
              <component>samples.contact.ContactAssembler</component>
              <scope>request</scope>
              <metadata>
                  <identity property="contactId"/>
              </metadata>
          </properties>
      </destination>
      

9. Start Flex. (If the server was already running, you may have seen it automatically restart when you changed its configuration files.) Look for the following line in the console output:

   [Flex] [CFDataServicesAdapter] Configuring CFC adapter for destination cfcontact

ColdFusion Configuration

To configure ColdFusion, follow these steps:

1. Unzip the ColdFusion application files (Contact.cfc, ContactDAO.cfc, ContactAssembler.cfc, and tesContactAssembler.cfm) and the database file (contact.mdb) to your ColdFusion wwwroot directory, preserving the file path information.
2. In the ColdFusion MX Administrator, define a Microsoft Access Unicode data source named FlexDataServices that points to <webroot>/samples/db/contact.mdb.
3. In the ColdFusion MX Administrator, define a ColdFusion Mapping for /samples that points to the <wwwroot>/samples directory that you created in your web root. This step is required because Flex does not invoke the CFC using HTTP; as a result, the normal web server mappings are not available to resolve the component path.

ColdFusion back end

The ColdFusion back end is made up of three components:

• Contact.cfc is the component that defines the data in your database. It contains properties that match the properties defined in the Contact.as file that is part of the Flex application (see C:\fds2\jrun4\servers\default\samples\
  dataservice\cfcontact\samples\contact\Contact.as). It defines an alias attribute on the component that ColdFusion uses to map the CFC to the ActionScript 3.0 class.
• ContactDAO.cfc is the Data Access Object that creates, reads, updates, and deletes Contact CFC objects in the database.
• ContactAssembler.cfc is the component that Flex Data Services invokes when a Flex application reads data (the fill and get methods), notifies you of changes (the sync method), or finds out how much data a specific fill operation will return (the count method).

To test that the CFML code is working, run <wwwroot>/samples/contact/testContactAssembler.cfm to verify that you have installed the components in the correct location and that the DAO CFC is working and connected to the data source. You should see a list of names that are in the contact database.

Flex application

The Flex application is made up of four files:

• contactmgr.mxml is the main application page.
• hourglass.mxml displays a "Please Wait" image while an operation is in progress.
• wait.png is the "Please Wait" image that hourglass.mxml uses.
• mini.mxml is a simpler version of the application that uses an editable data grid. You will need to change the destination attribute of the <mx:DataService> tag to be cfcontact to use this with the CFC assembler.

You are now ready to run the copy of the Contact Manager application. Point your browser to the Flex samples directory in which you created a copy of the Flex sample application: http://localhost:8700/samples/dataservice/cfcontact/contactmgr.mxml. The page loads the sample; you can then create, update, and delete the data.

Page 2 of 4

Previous Page

Next Page