In this exercise, you will learn how to add a transition to the noteArea gadget, creating a visual effect as the user moves through "to-do" items by clicking the "Prev Note" and "Next Note" buttons.

When incorporating the transition, you must first ensure that the item to which the user is transitioning exists in the items array. For example, if the user views the first item in the list and then selects the "Prev Note" button (thereby attempting to transition to a nonexistent item), no transition effect should display.

To complete the exercise, follow these steps:

Step 1: Modifying the noteArea setDisplay JavaScript function

To add a transition to the noteArea gadget, you must edit the setDisplay function in the noteAreaGadgets.js file to:

The code shown below in bold demonstrates how to do this:

component.prototype.setDisplay = function(item,  doTransition)
{ 
  var snapshot1 = null;
  var snapshot2 = null;

  if (doTransition)
  {
    try
    {
      // Take a snapshot of the current state of the gadget
      snapshot1 = this._gadget.createSnapshot(false);

      // Draw the snapshot on screen
      this._gadget.attachSourceSnapshot(snapshot1);

      // Create a blank snapshot object
      snapshot2 = this._gadget.createSnapshot(true);

      // Attach target snapshot to gadget so that the changes
      // below are drawn into the target snapshot
      this._gadget.attachTargetSnapshot(snapshot2);
    }
    catch (e) { debugger; }
  }

  // Modify the gadget; these changes are drawn into the target snapshot
  this._gadget.setAttribute("title", item["title"]);
  this._gadget.setAttribute("date", formatDate(item["date"]));
  this._gadget.setAttribute("description", item["description"]);
  this._gadget.setAttribute("image", item["image"]);
   this.displayingItem = true;

  // If we have the snapshots, do the transition
  if (snapshot1 && snapshot2)
  {
    try
    {
      this._gadget.renderTargetSnapshot();

      var transition =  this._gadget.createTransition();

      // Create a transition
      if (transition)
      {
        // Set the transition type
        transition.type = "pageTurn";

        // Set the duration in milliseconds
        transition.duration = 1000;

        // Perform the transition
        transition.perform(snapshot1, snapshot2);
      }
    }
    catch (e) { }

    // Clean up
    this._gadget.detachSourceSnapshot();
    this._gadget.detachTargetSnapshot();
  }
}

This is how the above code works:

If the doTransition flag is true, we begin the transition by taking two snapshots of the box, a source snapshot (snapshot1) and a target snapshot (snapshot2), both of which are attached to the noteArea gadget. Then, we update the noteArea gadget's attributes to equal the elements of the item that was passed to the function.

If snapshot1 and snapshot2 exist, we invoke the renderTargetSnapshot function to render the updates made to the noteArea gadget to the target snapshot. Then, we create the transition object and specify transition settings using the type and duration properties. As our last step, we call the perform function to execute the transition using the source and target snapshots.

Step 2: Modifying the ToDoList displayItem JavaScript function

For the noteArea's setDisplay function to work correctly, we must set the doTransition flag to true (if the index to which we are transitioning is valid) or false (if the index to which we are transitioning is invalid). Then, we must include the doTransition flag in the call to the setDisplay function.

To complete this step, open the ToDoList.js file and modify the displayItem function to include the code shown below in bold:

component.prototype.displayItem = function (index)
{
  if (this.items.length == 0)
  {
    this.displayDefaultItem();
    return;
  }
 
  var doTransition = false;

  if (index > (this.items.length - 1))
  {
    this.currentItem = this.items.length - 1;
  }
  else if (index < 0)
  {
    this.currentItem = 0;
  }
  else
  { 
    if (this.currentItem != index) { doTransition = true; }
    this.currentItem = index;
  }

  var item = this.items[this.currentItem];
  this.noteArea.setDisplay(item,  doTransition);
}

Step 3: Testing the application

Now, when you run your application and navigate through the notes in the "to-do" list, you should see a transition.