22 March 2010
|Prerequisite knowledge||Required products
Adobe ColdFusion Enterprise Edition (2016 release) (Download trial)
Flash Builder (Download trial)
f4cf_fictitious_db.zip (75 KB)
- Download thef4cf_fictitious_db.zip sample file if you haven't done so already.
- Unzip the file to the
\ColdFusion9\dbdirectory and review the contents:
\ColdFusion9\dbfolder now contains the F4CF_FictitiousSalesPlanner folder which contains the control files and sample data for the Derby db.
- Start the ColdFusion server.
- Log on to the ColdFusion Administrator.
- Expand the Data & Services left hand navigation and Click on Data Sources.
- Enter F4CF_FictitiousSalesPlanner as the Data Source Name and Select Apache Derby Embedded from the Driver drop down menu as shown in Figure 1.
- Click the Add button.
- Click the Browse Server button next to the Database Folder, and navigate to the ColdFusion9\db\F4CF_FictitiousSalesPlanner folder. Click Apply. The Data Source definition panel will appear as shown in Figure 2.
- Click the Submit button.
- You should now see the F4CF_FictitiousSalesPlanner Data Source listed under the Connected Data Sources as shown in Figure 3.
Figure 3. The F4CF_FictitousSalesPlanner Data Source has been added.
- Open Flash Builder 4.Note: We assume that you are working with the standalone (not the plug-in) version of Flash Builder 4 . You can install the plug-in version if you are already using Eclipse for your programming environment. However, you will likely see some minor variations in the following steps. We also assume that you have a local, standalone installation of ColdFusion. You may need to make changes to the paths based on your custom installation.
- Select File > New > Flex Project as shown in Figure 4.
Figure 4. Create a new Flash Builder project.
- Name the project F4CF_Getting_Started.
- Be sure to use the default location for this example.
- In the Server technology section of the dialog box, select ColdFusion from the Application server type drop-down menu. (Note that the Use remote object access service check box is selected by default when you select a server technology.)
- Select the ColdFusion Flash Remoting option.
Figure 5. Set up your new project in the New Flex Project dialog box.
- Click Next.
- In the Configure ColdFusion Server dialog box, select the options for your ColdFusion installation type. Figure 6 shows the settings if you are using the default installation of ColdFusion in Standalone mode on a PC.
Figure 6. Specify your ColdFusion server configuration.
- ColdFusion root folder: /Applications/ColdFusion9
- Built-in ColdFusion web server web root: /Applications/ColdFusion9/wwwroot
- Built-in ColdFusion web server root URL: http://localhost:8500
- Click the Validate Configuration button to ensure that the settings are correct.Note that the location of the Output folder is located within the ColdFusion server web root.Flash Builder automatically creates a folder named based on the project name and appended with –debug. In this case, the F4CF_Getting_Started-debug folder is where Flash Builder will place the compiled Flash SWF and HTML wrapper files.Note: If you have the default installation of ColdFusion in Standalone mode for a Mac OS X computer, your Output folder setting is likely /Applications/ColdFusion9/wwwroot/F4CF_Getting_Started-debug.Remember that Flash source files, unlike ColdFusion source files, are not deployed to the web server. Instead, you compile the source into a SWF file that is referenced in HTML wrapper files. The SWF and HTML files are uploaded to the server.
- Click Finish to create the Flash Builder project.
Figure 7. The Flash Builder project in the Package Explorer.
cfquerytag at the top of your CFML page, you invoke the query that is placed into a CFC method, passing in arguments as necessary.
- Download and unzip the provided f4cf_getting_started_tutorial.zip file on your local disk if you haven't done so already.
- Move the SalesTarget.cfc file to the \\wwwroot\F4CF_Getting_Started-debug directory.When you configured the Flash Builder project, a project-specific debug folder was automatically referenced and created as the output location for the compiled SWF and related HTML wrapper files. Since this is a ColdFusion data service project, the debug folder is in the ColdFusion server's web root. Figure 8 shows the CFC in the same directory as the SWF and HTML wrapper files.Note: Refer to Deployment assets for more information about the SWF and HTML wrapper files. The default Flash Builder compile settings are configured to create these files immediately and whenever the source files are saved.
Figure 8. The compiled Flash SWF and HTML wrapper files.
- Open the SalesTarget.cfc file in a code editor or in a browser.
cffunctiontags. Each method contains encapsulated business logic for the Fictitious Sales Planner application. In this tutorial, you will use the
getAllDataoperation to retrieve all employees in the database.
accessproperty set to
remote, which makes the method available for use with SWF applications.
- Download and unzip the provided f4cf_getting_started _db_test.zip file onto your local disk if you haven't done so already.
- Move the SalesTargetTest.cfm file to the \\wwwroot\F4CF_Getting_Started-debug directory.
- Open a browser and run the SalesTargetTest.cfm page.You will see all of the database records in a cfdump display (see Figure 9).
Figure 9. The F4CF_FictitiousSalesPlanner employee sales data.
- Locate the Data/Services view in Flash Builder shown in Figure 10.(If the view is not open, select Window > Data/Services.)
Figure 10. The Data/Services view.
- Click the Connect to Data/Service link to run the Data Services wizard. Note: You can also select Data > Connect to Data/Service to open the Data Services wizard. Use this method if you already have a Data Service defined.
- Select ColdFusion for the service type (see Figure 11).
Figure 11. Select the ColdFusion data service type.
- Click Next.
- Name the service F4CF_Getting_Started_Service and configure it as shown in Figure 12. Note: The service name is arbitrary. You can name it anything you want; however, it is related to the CFC so you will often see it named similarly. In this case, it might be something like SalesTarget_Service. We have chosen to name the service to match the tutorial.
- Be sure the Import CFC option is selected.
- Specify the CFC location: Click the Browse button next to the CFC Location field, navigate to the \wwwroot\F4CF_Getting_Started-debug\ directory, select the SalesTarget.cfc file, and click Open.
Figure 12. Configure the ColdFusion service.
- Click Next.
- In the Remote Service Authentication dialog box, shown in Figure 13, enter your RDS username and password.Note: Be sure to have RDS enabled in the ColdFusion Administrator. Remember that the default username is admin.
Figure 13. Enter your credentials to authenticate RDS access.
- Click OK. Flash Builder accesses the CFC, introspects it, and returns information about the available operations and data types associated with those operations. You will see each method in the CFC displayed in the Service Operations window shown in Figure 14.
Figure 14. The Service Operations dialog displays the CFC methods.
- Click Finish. Flash Builder creates the service. You may see the instructions shown in Figure 15, if you have not previously selected the check box in the lower left corner of the Using Remote Services dialog box.
Figure 15. Instructions for using the remote service.
- Click OK to dismiss the Using Remote Services dialog box.
- Locate the Data/Services view to see the CFC operations shown in Figure 16.
Figure 16. The introspected CFC operations.
getAllData()method name is followed by the word Object. When Flash Builder introspected the CFC and provided information about the methods, it mapped the ColdFusion query that is returned from this operation to a generic ActionScript Object data type.
- Right-click the
getAllData()operation in the F4CF_Getting_Started_Service and select Configure Return Type (see Figure 17).
Figure 17. Configure the return type of a CFC method.
- In the Configure Return Type dialog box, leave the radio button checked for Auto-detect the return type from sample data. (see Figure 18).
Figure 18. Auto-detect the return type.
- Check the box for Remote authentication, and Enter your username and pasword in the Service Authentication window (see Figure 19).
Figure 19. Enter the remoting credentials for the getAllData() CFC function.
- Click OK, and then click Next.
- Enter a name to create a new data type. In the field next to 'Array of' , enter the name, EmployeeSalesData (see Figure 20).
Figure 20. Enter a name to create a new data type.
- Review the Properties returned by the operation and click Finish.
Figure 21. The EmployeeSalesData data type.
- Switch to Design mode in Flash Builder by clicking the Design button below the Editor tab (see Figure 22).
Figure 22. The Design view button.
- Locate the DataGrid control of the Components view (see Figure 23).
Figure 23. The Flex Builder Components panel.
- Drag and drop the DataGrid component into the Design view of the F4CF_Getting_Started.mxml file as shown in Figure 24.
Figure 24. Add the DataGrid control to your application.
- Drag and drop the
getAllData()CFC function from the Data/Services view onto the DataGrid control to populate it with the EmployeeSalesData data type.
Figure 25. Leave the defaults in the Bind to Data dialog window.
Figure 26. The bound DataGrid control.
- Select File > Save tosave the MXML file.
- Click the Run (green round) button to test the file(see Figure 27).
Figure 27. Click the Run button.
Figure 28. The DataGrid component populated by the EmployeeSalesData data type.
Where to go from here