Accessibility

Table of Contents

Using ColdFusion with Flex – Part 2: Creating and running a CRM application

Installing and configuring the application

The CRM application has two parts: the Flex code (MXML and ActionScript files) and the ColdFusion component (CFC) files. Since the Flex code is already written, you should create a copy of this application and make one small modification so that it uses ColdFusion instead of Java for its data.

Here is what you need to do to get the Flex side working:

  1. Download and unzip the CRM sample files that accompany this article.
  2. Add the ColdFusion-specific channel definitions to the services-config.xml file (located in C:\fds2\jrun4\servers\default\samples\WEB-INF\flex if you used the default FDS install).

  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 services-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=&qcoldfusion.flex.CFDataServicesAdapter&q/>
  6. Add the cfemployee and cfcompany destinations to the data-management-config.xml file (default location: C:\fds2\jrun4\servers\default\samples\WEB-INF\flex). Copy the destination from the sample Flex configuration file found in resources/config (default location: C:\fds2\resources\config\):

        <destination id="cfemployee">
            <adapter ref="coldfusion-dao"/>
            <channels>
                <channel ref="cf-dataservice-rtmp"/>
                <channel ref="cf-polling-amf"/>
            </channels>
            <properties>
                <component>samples.crm.EmployeeAssembler</component>
                <scope>application</scope>
                <metadata>
                    <identity property="employeeId"/>
                </metadata>
            </properties>
        </destination>
    
        <destination id="cfcompany">
            <adapter ref="coldfusion-dao"/>
            <channels>
                <channel ref="cf-dataservice-rtmp"/>
                <channel ref="cf-polling-amf"/>
            </channels>
            <properties>
                <component>samples.crm.CompanyAssembler</component>
                <scope>application</scope>
                <metadata>
                    <identity property="companyId"/>
                    <one-to-many property="employees" destination="cfemployee"/>
                </metadata>
            </properties>
        </destination>
  7. Start Flex. (If the server was already running, you may have noticed that it automatically restarted when you changed its configuration files. That is to be expected.) Look for the following two lines in the console output:

    [Flex] [CFDataServicesAdapter] Configuring CFC adapter for destination cfemployee
    [Flex] [CFDataServicesAdapter] Configuring CFC adapter for destination cfcompany
  8. Make a copy of the Flex CRM application. Copy the directory C:\fds2\jrun4\servers\default\samples\dataservice\crm and call it cfcrm. Place it in the same dataservice directory.
  9. Open the file cfcrm/companyapp.mxml in an editor. You can use Flex Builder 2 or Notepad. Find the following two lines:

    dsCompany = new DataService("crm.company");
        dsEmployee = new DataService("crm.employee");

    Change them to use the new destination you just defined:

    dsCompany = new DataService("cfcompany");
        dsEmployee = new DataService("cfemployee");

ColdFusion configuration

To configure ColdFusion, follow these steps:

  1. Unzip the contents of crm_sample.zip that is part of the downloadable files that accompany this article to your ColdFusion server's web root. You'll notice two directories: /samples/crm and /samples/db.
  2. In the ColdFusion Administrator, define a data source named flex_crm that points to <webroot>/samples/db/crm.mdb.
  3. In the ColdFusion 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 the following components and files:

  • Company.cfc and Employee.cfc are the components that define the data in your database. They contain properties that exactly match the properties defined in the Company.as and Employee.as files that are part of the Flex application (see C:\fds2\jrun4\servers\default\samples\dataservice\cfcrm\
    samples\crm
    ). They define an alias attribute on the component that ColdFusion uses to map the CFCs to the ActionScript 3.0 classes.
  • CompanyDAO.cfc and Employee.cfc are the Data Access Objects that create, read, update, and delete Company and Employee CFC objects in the database.
  • CompanyAssembler.cfc and EmployeeAssembler.cfc are the Assembler components that are invoked by Flex Data Services when a Flex application needs to read data (the fill and get methods), notify you of changes (the sync method), or find out how much data will be returned by a specific fill operation (the count method).
  • test-employee.cfm and test-company.cfm are test CFML templates that verify that the Data Access Objects work correctly.

To test that the CFML code works, run the templates <wwwroot>/samples/crm/test-company.cfm and <wwwroot>/samples/crm/test-employee.cfm to verify that you have installed the components in the correct location and that the Company and Employee DAO CFCs are working and connected to the data source. As a simple test, click the Search button on each template to show all the entries in the tables.

Flex application

The Flex application directory
(C:\fds2\jrun4\servers\default\samples\dataservice\cfcrm) contains three files:

  • companyapp.mxml is the main application page for managing companies
  • Hourglass.mxml displays a "Please Wait" image while an operation is in progress
  • wait.png is the "Please Wait" image that the Hourglass.mxml file uses

You are now ready to run the copy of the CRM application. Point your browser to the Flex samples directory where you made a copy of the Flex sample application: http://localhost:8700/samples/dataservice/cfcrm/companyapp.mxml.

The page loads the sample. You can then create, update, and delete the data.