How to create a MVC Utility App using Flex and Webservices

Part 1 of 3

Last year, I wrote a post explaining how we optimized a client’s website using advanced web monitoring tools. In the article, I glossed over the fact that this is a service we regularly perform for our clients on an ongoing basis. Each client has different needs and requires a custom report with a range of specified charts and data.

Since many of the required reports and charts are not provided out of the box from AlertSite’s control panel (our monitoring software of choice), we devised a system that would gather the raw data and produce charts in a few easy steps. The steps are as follows:

  1. Login to AlertSite’s control panel
  2. Select the desired measurement/website
  3. Select the desired data range
  4. Once the report executed, download the raw csv data
  5. Copy and paste the data into an already formatted excel spreadsheet that contained the desired formula to produce the charts the client required
  6. Copy and paste the excel charts into Photoshop
  7. Import the JPG charts into the final PDF document to be presented to the client

All in all, it is a pretty simple process, but it’s not very efficient. A human has to manually perform each step every single time reports were needed. For the client in question, the outlined process takes about 45 minutes from start to finish for the four sites we present on the final PDF. Why not write an application that will automate reporting of the site’s loading times?

With this in mind I set out to cut down on the steps and time it takes us to create these bi-weekly reports. In addition to those two goals, I also wanted to accomplish a few other things:

  1. Write the application with flexibility in mind. (I did not want to just write the application to output one client’s specific report)
  2. Use the Model View Controller design pattern. (As always, there are multiple ways to skin a cat, but I decided this pattern will be the best suited for this application and I wanted to exercise my ability to follow such a pattern)
  3. Create an application that was easy to use for the end user, available on the web, and would be quick to develop. (I decided to create a Flex application which allowed me to concentrate more on the reporting and programmatic aspect of the app, rather than the user interface)
  4. Write it in such a way that would allow others to learn from it. (A detailed blog article – this one – and by organizing the code in the best way possible to illustrate programming points)

With those goals in mind, the “Report Viewer” was born. You can check out the application here.

Technical Details

Before we jump into the technical details I want to mention two things:

  1. The remaining parts of this article are technical and programmatic in nature. If you are not the type to enjoy this kind of reading (actionscript code, programming concepts, etc) you will probably find it very boring.
  2. If you are still reading this and are the opposite type of person and can’t wait to dive into the code you can find it in the following SVN repository.
    (Your svn client may ask you to authenticate, if so, use the word “anonymous” for the username and password)

Now for sure, Technical Details

If you have not already, visit the application and see what it does, so that you can better understand what the next few sections try to illustrate.

As a first step, I sketched out the “pseudo-code,” the rough steps my application would need to perform:

  1. Query the user for a date range
  2. Query and retrieve the data from AlertSite
  3. Load the data into the application
  4. Trigger an event(s) to tell the application that data is ready to be processed
  5. Generate the report charts based on the gathered data
  6. Display the report based on the generated charts
  7. Handle any errors such as invalid date range or connection failures.

With this in mind, I could now start to layout my application.

I decided to put all of the code within the com.agencynet package for organization’s sake. Within that set, I sectioned off the application into the following folders:

  • Views
  • Models
  • Controller
  • Events
  • Reports


To keep reading, please visit the next page of this post.

Pages: 1 2 3