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: Modify the noteArea setDisplay JavaScript function - Modify the noteArea gadget's setDisplay
function to include a second paramemter, called doTransition
, that indicates whether or not the transition is valid. Then, within the function, if the doTransition
flag is true, add the code required to perform the transition.
Step 2: Modify the ToDoList displayItem JavaScript function - Modify the ToDoList gadget's displayItem
function to 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, include the doTransition
flag in the call to the setDisplay
function.
Step 3: Testing the application - Run your application and ensure that the tranisition displays as you navigate through notes in the list.
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:
Include a second parameter that is passed to the function called doTransition
. This parameter indicates whether or not we should perform the transition.
Within the function, if the doTransition
flag is true, add code to perform the transition by:
Creating a snapshot of the noteArea
gadget as it currently stands (the "source" snapshot).
Displaying the source snapshot.
Creating a target snapshot.
Updating the gadget to display the new item. (The item is passed as a parameter to the setDisplay
function.)
Rendering the target snapshot based on the gadget's current state.
Performing the transition from the source snapshot to the target snapshot.
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.
Falls eine Boxely Anwendung nicht ordningsgemäß funktioniert, kann die Problembehandlungsreferenz für allgemeine Debugging und Problembehandlungstipps zu rate gezogen werden.