28.3 Putting the Application Together

The final step in creating a working scheduler application is to create the main code routine on the main timeline of the Flash document. Essentially, the main routine is responsible for three things:

• Creating an instance of Macromedia's Calendar component (the FCalendarSymbol must be available in the Library)

• Creating an instance of the Schedule component

• Creating functionality that opens a schedule item that corresponds to a calendar date when the calendar date is double-clicked

All you need to do to complete the scheduler application is add the following code to the first frame of the default layer of the Flash document's main timeline:

// Include DrawingMethods.as from Chapter 4.
#include "DrawingMethods.as"
// Include MovieClip.as from Chapter 7 and TextField.as from Chapter 8.
#include "MovieClip.as"
#include "TextField.as"
// Include Date.as from Chapter 10 and Tables.as from Chapter 11.
#include "Date.as"
#include "Table.as"

function init(  ) {

  // Create an instance of the Calendar component.
  _root.attachMovie("FCalendarSymbol", "cal", _root.getNewDepth(  ));
  cal.setChangeHandler("onSelectDate");
  cal.setSize(Stage.width, Stage.height);

  // Create a Schedule component instance.
  _root.attachMovie("ScheduleSymbol", "scheduler", _root.getNewDepth(  ));
  scheduler.setOnClose("onScheduleClose", _root);
}

// The onSelectDate(  ) function is the callback function for the Calendar component.
function onSelectDate(cmpt) {

  // Get the time, in milliseconds, since the movie started playing.
  var currentTime = getTimer(  );
  var selectedDate = cmpt.getSelectedItem(  );

  // Select the date that has been clicked in the Calendar component.
  if (selectedDate == undefined || selectedDate == previousDate) {
    cmpt.setChangeHandler(null);
    cmpt.setSelectedItem(previousDate);
    cmpt.setChangeHandler("onSelectDate");
  }

  // If the click is a double-click, open the schedule item that corresponds to the
  // date. If no schedule item for that date has been created, create it first.
  if (currentTime - previousTime < 500) {
    if (scheduler.getItem(previousDate.format("MM-dd-yyyy")) == undefined) {
      scheduler.addItem(previousDate.format("MM-dd-yyyy"));
    }
    scheduler.openItem(previousDate.format("MM-dd-yyyy"));
    cal._alpha = 33;
  }

  // Keep track of the time differences between clicks.
  previousTime = currentTime;

  // Set the previousDate to the date that the user has clicked.
  previousDate = (selectedDate == undefined) ? previousDate : selectedDate;
}

// When the schedule item is closed, reset the calendar's transparency to opaque.
function onScheduleClose(  ) {
  cal._alpha = 100;
}

init(  );

Although the main code routine of the scheduler application is short, it probably requires the most explanation of any of the code in this application thus far. Let's take a look at what this code is doing.

The init( ) and onScheduleClose( ) functions are both straightforward, but the onSelectDate( ) function requires a closer look. The onSelectDate( ) function is the callback function that is invoked whenever a calendar date is selected. By default, clicking a date toggles its selection in the Calendar component, but we want a double-click to open the corresponding schedule item. To do this, we need to do several things. First, to determine whether a date has been double-clicked, we need to calculate the time difference between clicks. We start with the current timer value:

var currentTime = getTimer(  );

The rest of the code for determining double-clicking comes later in the function, so we'll examine that in a moment.

If the user selects one date and then another, there is no problem. However, if the user clicks a date and then clicks it again, you need to make sure the same date remains selected (instead of toggling to unselected, which is the standard behavior of Macromedia's Calendar component). If a user clicks the same date two or more times in a row, we trick the Calander component by setting the selected calendar item to the previously selected date (which happens to be the same date). The trouble with this approach is that it again triggers the calendar's change handler, causing an infinite, recursive loop. To avoid this problem, we temporarily set the calendar's change handler to null just before setting the selected item. Then, immediately following that assignment, we reset the change handler.

var selectedDate = cmpt.getSelectedItem(  );
if (selectedDate == undefined || selectedDate == previousDate) {
  cmpt.setChangeHandler(null);
  cmpt.setSelectedItem(previousDate);
  cmpt.setChangeHandler("onSelectDate");
}

Returning to detecting double-clicks, you can check for a double-click by comparing the difference between the current timer value and the timer value from when the user last selected a calendar date. If the difference is less than 500 milliseconds (half a second), you should consider it a double-click and open up the schedule item that corresponds to the selected date. If no schedule item for that date has been created, you should create it first.

if (currentTime - previousTime < 500) {
  if (scheduler.getItem(previousDate.format("MM-dd-yyyy")) == undefined) {
    scheduler.addItem(previousDate.format("MM-dd-yyyy"));
  }
  scheduler.openItem(previousDate.format("MM-dd-yyyy"));
  cal._alpha = 33;
}

Finally, for future calculations, you should store the current timer value as the previous timer value. You should also store the selected date as the previous date for future calculations. The selected date may be undefined because of the built-in toggling functionality of the Calendar component. If this is the case, set the previous date to the value already stored as the previous date:

previousTime = currentTime;
previousDate = (selectedDate == undefined) ? previousDate : selectedDate;