Using CF Reports in Flex 2.0.1

Posted: February 1, 2007 in ColdFusion, Flex

Hello World,

Well, here it is folks. It’s a little late but as promised, my series about CF Reports and Flex 2.

This is the first in a series of tutorials about using ColdFusion Reports in Flex 2. In these tutorials I will show you how you can take advantage of reports created using the ColdFusion Report Builder within your Flex 2 application. I will take your from learning how to use the updated CF/Flex Wizard to include reports to how to “manually” incorporate and interact with CF reports in your application. I will try to publish these tutorials on every other day on my blog. In the end I will combine the series into one lesson and include all the working examples. So let’s have a little fun now, shall we?

Part I: Including CF Reports Using the ColdFusion/Flex Application Wizard

In early January, Adobe released an update to the Flex 2 framework. It included several really nice features and updates including Dynamic CSS and Modules. However what most people was not aware of was that the ColdFusion/Flex Application Wizard extension which, allowed developers to easily create a complete Flex database administration application, also received an update. The ability to include a CF Report was added to the wizard.

So how do you take advantage of this new feature? First, if you haven’t done so already you need to install the updated plug-in. If you have already installed the CF/Flex App Wizard plug-n from the initial release, you may need to remove and re-install. More on that described below.

Installing the ColdFusion/Flex Application Wizard.

The wizard plug-in is included on your FlexBuilder installation CD or in the FlexBuilder download installation file. However you must install FlexBuilder before you are able to access the plug-in. Here are the steps to install the wizard plug-in on a Windows OS:

  1. Download and install the Flex Builder 2.0.1 update (for Windows).
  2. (the updater can be found here; http://www.adobe.com/products/flex/productinfo/updater/)
  3. After the installation completes, open the Flex Builder product.
  4. From the main menu select Help > Software Updates > Find and Install. (see figure 1)
  5. From the Install Update window select “Search for new features to install” and click on the Next button. (see figure 2)
  6. Next click on the New Archived Site button. (see figure 3)
  7. A file selection dialog box will be displayed. On a Windows system you can normally find the archive (zip) file in the following location: C:\Program Files\Adobe\Flex Builder 2\ColdFusion Extensions for Flex Builder
  8. Select the following file and click on the Open button: CF_FB_Extensions.zip
  9. When the Edit Local Site dialog box appears, click the OK button. (see figure 4)
  10. Ensure that the CF_FB_Extensions.zip feature is selected and then click on the Finish button. (see figure 5)
  11. Accept the terms of the license and then click on the Next button and then finally click on the Finish button. (see figure 6)
  12. You may encounter a “Verification” window. This is simply a security function that informs you that a new feature is being installed in Flex Builder. Click on the Install All button. (see figure 8)
  13. When the installation is complete Flex Builder must be restarted to Apply Changes. (see figure 9)

Another important step to follow before you’re ready to build your application is to enable RDS. The ColdFusion Flex Builder App Wizard uses RDS to help build your application. You can follow the steps below to enable RDS in Flex Builder (this example assumes that you have the default ColdFusion installation on your local machine):

  1. Select Window > Preferences from the main men. (see figure 15)
  2. Select localhost from the Currently Configured RDS Servers box. (see figure 16)
  3. Enter localhost in the Description field.
  4. Enter 127.0.0.1 in the Host Name field.
  5. Enter 8500 in the Port number field.
  6. You may either enter the RDS password in the Password field or select Prompt for Password.
  7. You may test your connection by clicking on the Test Connection button.

You can refer to the livedoc to get more information about Using ColdFusion with Flex 2 (http://download.macromedia.com/pub/documentation/en/flex/2/using_cf_with_flex2.pdf).

Creating a sample application with a report using the wizard

Now we’re ready to create a small application using the wizard. There have been many tutorials on the Internet that teach you how to use the CF/FB Application Wizard. However this time we will be adding a CF Report to the app. First, you need to create a report using the ColdFusion Report Builder. How to create one however is beyond the scope of this tutorial. Suffice to say, once you have created your report save the .CFR in a location you can find later. In this tutorial I will use one of the sample reports based on the cfdocexamples sample database. I have included that report in the tutorial1.zip file found at the end of this tutorial.

  • We begin creating our sample application by choosing File > New > Other from the main menu. (see figure 17) .
  • From the New Wizard dialog window we see that we have a folder called ColdFusion Wizards. Expand that folder and we will see the ColdFusion/Flex Application Wizard plug-in. Select the Next > button. (see figure 18)
  • Next is the ColdFusion/Flex Application Wizard window. Select the Next > button. (see figure 19)
  • Next is the Previous Wizard Settings window. This window allows us to select an existing settings file. Since this is our first time using the wizard (well … yours maybe, not mine) we can simply select the Next > button. (see figure 20)
  • Now we are ready to select our RDS Server and Default Data Source. Select your RDS Server. For this tutorial it’s localhost. The select the Default Data Source, cfdocexamples. (see figure 21)

Now we get to the heart of the wizard, the Page Layout and Design window. This window allows us to define the various pages in our application and arrange them on the main menu of our new application. We simple “point and click” (and enter a few values) and it builds our application automatically. For this tutorial we are building an application that contains one menu item, Employees Report that will spawn one window containing our report.

  • First, click on the “plus” button under the Available Page label. Then enter a name in the Name field for our new page. Call it “Employee Report”. Next choose a Page type “ColdFusion FlashPaper Report/Document” from the Page Type drop-down menu. (see figure 22)
  • Once you make that selection you will see the report information change to allow us specify the FlashPaper Report/Document URL and a Report Parameter Name, if applicable. Now, if you haven’t done so already, you need to copy the .cfr file into a folder within you web root. You can browse to that file from within your browser to test its operation. The URL I used was;

http://localhost:8500/FlexProjects/CFReportInFlex/assets/cfr/Company-Departments_v1.cfr

  • Once you have specified the URL you can now place that page on the Navigation Tree. Select your new page in the Available Pages box and select the “->” button. This will place your page on the main menu of your application. (see figure 23)
  • Select the Next > button. Now you will see the Project Information window. This window allows you to specify things such as ColdFusion information, Project Location, and your Settings File Name. Take a look at my screenshot to get an idea of what you need to enter. (see figure 24) The values you see entered for the ColdFusion Information is based on a default ColdFusion installation. The values entered for the Project Information is completely up to you. The Settings File Name can remain the same.
  • Once it has finished building and compiling your application you are shown the main.mxml file. No changes are needed here, just Run the application. (see figure 25)
  • Your new application will be presented in the browser containing a navigational menu with just one menu item, Employees Report. Click on that menu item and you will be presented with a new window containing your report. (see figure 26)

So there you have the basic instructions for including a ColdFusion report in Flex using the ColdFusion/Flex Application Wizard. In the next part of this tutorial I will show you how to supply report parameters to your report from within the wizard. I will also show you how to add a master data page that will allow you to select a Department and display a report based on your selection.

</post>

Advertisements
Comments
  1. Carroll Girtman says:

    Where’s part II??!!

  2. therush says:

    I’m sorry I haven’t had a lot of time to create Part II of this post (new job, family, presentation engagements, etc). Now that things have stabilized somewhat I can sit down and write part two of this post.

    I’m happy to see that someone is reading my blog. 🙂

  3. me says:

    blah blah blah… show me the report… don ‘t tell me about it….

  4. Gary says:

    I’d also like to see more info on Flex and reporting. Can you dynamically create controls for report parameter input through actionscript based on “parameter” entries stored in a database?
    Thanks!