Trio Motor Sample Article

Building the Trio Service Manager: The Work Order Status Widget in Flash MX 2004

Creating the ColdFusion Components

This section illustrates the advantages of having a componentized system. Note that these ColdFusion components (CFCs) have not changed since the previous version of the Trio Motor Application, which demonstrates the beauty of CFCs. Note: If you previously created the Trio Motor Application for Flash MX, then you can skip these steps.

1. Open <your_web_root>/mx2004tutorial/Application.cfm in Dreamweaver MX (or higher) and switch to code view.

2. Create an application name and define the session management settings by adding the cfapplication tag, as follows:

   <cfapplication NAME="mx" SESSIONMANAGEMENT="Yes" SESSIONTIMEOUT="20">
   

3. Set a global application variable for the DSN to the database using the cfset tag:

   <cfset APPLICATION.dsn = "mx">
   

   Ensure that the value of the APPLICATION.dsn variable matches the name of the DSN that you set up in the ColdFusion administrator.

4. Save the Application.cfm file.

You'll use the APPLICATION.dsn variable to refer to the database in all of your queries. You could refer directly to the DSN, however, this method makes the application portable. If you move the application another server or change the DSN, you only have to change the DSN once in the Application.cfm file, instead of changing it in the all the places that refer to the DSN within the code.

Now create the ColdFusion components that serve as the web service that the Flash movie can use. First, define a ColdFusion site for the components. Then, you can use Dreamweaver to create the skeleton for the component you want.

To define the ColdFusion site for the components:

1. Open Dreamweaver MX 2004.
2. Select Site > Manage Sites. The Site Definition dialog box appears. Select New > Site button. Select the Advanced tab.

3. In the Local Info category, enter the settings as shown below (note that your web root may be different based on your ColdFusion server configuration):

   
   

   Figure 5. Local Info site information in the Site Definition settings in Dreamweaver

   (+) View larger

4. Select the Remote Info category and enter the setting shown below (note that your web root may be different based on your ColdFusion server configuration):

   

   Figure 6. Remote Info site information in the Site Definition settings in Dreamweaver

   (+) View larger

5. Select the Testing Server category and enter the following settings as shown below.

   Note: You can also use <your_web_root>\mx2004tutorial for the Testing Server Folder, which means the URL prefix is: http://localhost/mx2004tutorial.

   

   Figure 7. Testing server information

   (+) View larger

6. Click OK to create your site. It may take a moment to index the contents of the mxtutorial folder.

Now you can create new components for the Trio Motor Company site, and you will them saved to the correct folder in the web root. In the following steps, you create two components for the status widget: one to retrieve the work order information, and one to retrieve the status codes.

Creating the workOrder component:

1. Open Dreamweaver MX 2004 and in the mx2004tutorial Site. Select File > New. The New Document dialog box appears.

2. Under Categories, select Dynamic Page, and in the Dynamic Page list, select ColdFusion component as shown below.

   

   Figure 8. The New Document dialog box

   (+) View larger

3. Click Create. Dreamweaver creates an empty ColdFusion component file.

4. Open the Application panel and select the Components tab. Complete the steps in the "To inspect and use the CFCs" section and click the plus button. This opens the Create Component dialog box. Enter workOrder for the Name and select the mx2004tutorial\services folder for the Component Directory as shown below.

   

   Figure 9. The Create Component dialog box

   (+) View larger

5. In the Functions section of the Create Component dialog box, create the getWorkOrders function by entering the settings shown below.

   

   Figure 10. Functions settings in the Create Component dialog box

   (+) View larger

   The Name setting is the name of the method for the web service. Setting Access setting to remote lets a Macromedia Flash SWF running in the browser access the web service. Return Type query returns the data to the Macromedia Flash movie in a data structure that can be manipulated much like an array.

6. Click OK to create the component. If a dialog box appears asking to overwrite an existing component, click OK to overwrite it. The Code view will update with the basic elements for your ColdFusion component.

7. Open workOrder.cfc in Code View.Add the query to CFC's function; this query will retrieve data from the database using the cfquery tag. The data source is the variable that you defined in the Application.cfm for your DSN. Place the following code between the cffunction tags in the code view for the workOrder component you just created:

   <cfquery name="rsGetWorkOrders" datasource="#APPLICATION.dsn#">
     SELECT WORK_ORDER_ID, LICENSE, STATUS_NAME, 
     WORK_ORDERS.STATUS_ID
     FROM WORK_ORDERS, CUSTOMERS, STATUS_CODES, MODELS
     WHERE WORK_ORDERS.CUSTOMER_ID = CUSTOMERS.CUSTOMER_ID
     AND CUSTOMERS.MODEL_ID = MODELS.MODEL_ID
     AND WORK_ORDERS.STATUS_ID = STATUS_CODES.STATUS_ID
     AND WORK_ORDERS.STATUS_ID <> 6
     ORDER BY WORK_ORDER_ID
   </cfquery>
   

   A discussion of SQL is outside the scope of this tutorial, however, for more information, see Ben Forta ’s book, Teach Yourself SQL in 10 Minutes, or this excerpt about Databases and SQL from the ColdFusion Web Application Construction Kit, also by Ben Forta.

8. Return the query to the application that requested the web service by adding the cfreturn tag:

   <cfreturn rsGetWorkOrders>
   

   In the cfreturn tag, you can simply specify the query name to be returned, because the returnType specified by the function is query. Note that when you created the component shell, there was already a cfreturn tag. Overwrite that cfreturn tag with the cfreturn tag in this step.

9. Save the workOrder.cfc file.

The other ColdFusion component you create returns the different status codes for the work order. Creating this new component is nearly identical to creating the workOrder component.

To create the statusCode component:

1. Follow Steps 1-6 for creating the workOrder component above, except name the component statusCode and name the function getStatusCodes. All other instructions are the same.

2. Add the query to CFC's function; this query will retrieve data from the database using the cfquery tag.The data source is the variable that you defined in the Application.cfm for your DSN. Place the following code between the cffunction tags in the code view for the statusCode component you just created:

   <cfquery name="rsGetStatusCodes" datasource="#APPLICATION.dsn#">
     SELECT *
     FROM STATUS_CODES
     WHERE STATUS_ID <> 6
   </cfquery>
   

3. Return the query to the application that requested the web service by adding the cfreturn tag:

   <cfreturn rsGetStatusCodes>
   

   In the cfreturn tag, you can simply specify the query name to be returned because the returnType specified by the function is query. Note that when you created the component shell, there was already a cfreturn tag. Overwrite that cfreturn tag with the cfreturn tag in this step.

4. Save the statusCode.cfc file.

Page 3 of 6

Previous Page

Next Page