Filter dates with the Flash MX Calendar Component

The Flash MX Calendar Component adds a nice rich media touch to your Web site. Find how to take full advantage of this advanced Flash feature.

The Flash MX Calendar Component opens the door to sophisticated Flash applications that combine the appeal of rich media with an intuitive, universally understood interface element. Essential for organizing your schedule, the calendar component, shown in Figure A, can provide similar organization to your site’s Web-based scheduling needs. I’ll walk you through the code to incorporate the Calendar Component into your Flash Web front-end. You can download the source code here.

Figure A
The calendar component

What you need to get started
To put the sample code to work, you will need the following.
  • ·        Flash Remoting Components: Download Flash Remoting Components from Macromedia’s Web site.
  • ·        ColdFusion MX and Flash MX: Download the trial versions of ColdFusion and Flash MX.
  • ·        Microsoft Access Database: The simple database used for this demonstration (included in the download Zip file) is in Access, but any database will do as long as your table has the same name and field names as the one in this demonstration.

Don’t confuse Remoting Components with ColdFusion Components (CFCs). Remoting Components are really just ActionScript files that install to your computer. These files allow your Flash applications to interact directly with ColdFusion. For an applied example of Flash Remoting, see my previous article, "Flash Remoting with ColdFusion Components."

Step 1: The data source
In the Zip file containing the article’s source code, open the Access database and register it in ColdFusion MX Administrator. You’ll notice a table named dates. Inside are four fields: postID, textYear, textMonth, and textDay (see Figure B).

Figure B
Database fields in Access

Step 2: Install Flash Remoting Components
Flash Remoting Components will allow Flash to talk to ColdFusion and vice versa. A simple breakdown and installation instructions can be found at Macromedia’s Web site.

Step 3: Download and install Flash MX UI Components Set II
The Flash MX Calendar Component is part of the Flash MX UI Components Set II. It doesn't come with Flash by default, but you can get it from Macromedia’s Web site.

Step 4: Download dates.cfc and view the source
Listing A shows the dates ColdFusion Component.

As you can see, the CFC returns the query object getDates. We’re going to send this object to our calendar with Flash Remoting and ColdFusion MX.

Step 5: Open Flash MX
You can start from scratch or use the FLA provided with this tutorial. Just make sure your calendar on the stage is named “cal.”

Listing B contains the complete ActionScript code.

That’s it! Make sure this ActionScript is saved externally as and included in the FLA for this project.

Now, a walk-through
Listing C will allow you to choose the font (and font size) you’d like for your calendar.

In Listing D, the include commands are necessary to bring in the ActionScripts required to make a gateway connection. Uncomment the "" include after you finish testing—it slows down the file considerably.

With your gateway connection now established, you’re ready to call the CFC as shown in Listing E. Remember: You’re in the same if block that is shown in Listing D.

Access the method getAllDates in your CFC. I’ve traced out the field names here:
function getAllDates_Result(result) {
       theLength = result.items.length;


Remember when the getAllDates method was accessed in the previous if block? When the data is returned, the getAllDates_Result function is automatically triggered. This removes one step from ActionScript solutions like XML parsing, in which you have to do this with some kind of handler, such as onLoad. It’s a demonstration of how remoting makes dynamic Flash less code intensive. (Keep in mind that the complete script for this app is only 42 lines compared to the same functionality in XML, which would require twice that, at best.)

In the above snippet, the result variable you see in parentheses following the getAllDates_Result function declaration is the data object (from the CFC) being passed into the function.

After you begin your counter (for (i=0; i<theLength; i++)) using variable theLength to count against, each field in your data set can be accessed by preceding it with result.items[i]. For example, as you can see in Listing F,  result.items[i].textDay returns one of your database’s textDay field values.

Inside the for loop is a key bit of conditional code that compares your query result set to the values returned by executing three ActionScript functions and initializing variables for them: getDate(), getMonth(), and getFullYear().The corresponding variable names are day, month, and year, respectively.

Listing G compares each element in day, for instance, to the values in your query object. If there’s a match, the function returns true; if not, it returns false.

This final line runs the setDateFilter method, populating your calendar with the dates in Posts.mdb’s dates table:

(Note: You definitely want to register your datasource in ColdFusion Administrator. Not doing it this way could produce unexpected results.)

Only dates from the database should be selectable. If you scroll forward or backward one year, you’ll notice the calendar is populated with dates exclusive to 2002, as well, making this tiny little app that much more powerful.

What's ahead
Now you've gotten a taste of how to use the Flash MX Calendar Component to produce a sophisticated interface element. In a future article, I will discuss how to integrate other components into the calendar, as well as ways you can make some other tweaks.

Editor's Picks