Implementing View Actions

With the ViewManager functional, it is now just a matter of building some actions that the ViewManager can make use of. We can then integrate this new functionality into our to- do list app.

We will start with the PROWEBAPPS.ViewAction class: ViewAction: function(args) {

args = jQuery.extend({ label: "", run: null

}, args);

var self = { id: actionCounter++,

getAnchor: function() { return "<a href='#' id='action_" + self.id + "'>" + args.label + "</a>"; },

execute: function() { if (args.run) { args.run.apply(this, arguments); } // if } };

return self; }

This is a base class that knows how to display itself as an anchor tag, using the getAnchor method, and also has an execute method for executing the action. Additionally, note the reference to a variable called actionCounter that is being assigned

CHAPTER 4: Constructing a Multipage App

to the id member of a new ViewAction object. This variable is defined within the scope of the PROWEBAPPS main module as such:

PROWEBAPPS = (function() { var actionCounter = 0; ...

})(); The variable will exist and maintain state for the life of the page/application, so we can

use it as a counter for the actions and it will generate unique IDs for the anchors that are created. At no time, however, is the variable into global scope. This is one of the big attractions of using something like the module pattern in JavaScript code.

Let’s now create a PROWEBAPPS.ChangeViewAction class that actually does something when it’s executed:

ChangeViewAction: function(args) { // if the target is not defined, then raise an error if (! args.target) {

throw new Error("Unable to create a ChangeViewAction without a target specified."); } // if

// prep the label to equal the target if not defined if (! args.label) {

args.label = args.target; } // if

return new module.ViewAction(jQuery.extend({ run: function() { module.ViewManager.activate(args.target); } }, args)); }

At first glance the preceding code is a little confusing, but let’s step through it and understand what is happening:

1. We first check to see that a target has been defined for the simple args object that has been passed to the class constructor; if not, an exception is raised.

2. If a label hasn’t been defined in the constructor args, we assign the target value to the label to prevent displaying an empty anchor tag.

3. If all is well, we then create a new PROWEBAPPS.ViewAction and supply a run function handler. When the new ViewAction is subsequently executed, this function will be executed.

TODOLIST = (function() { // define the module var module = {

// define the main view PROWEBAPPS.ViewManager.define({

72 CHAPTER 4: Constructing a Multipage App

id: "main", actions: [

new PROWEBAPPS.ChangeViewAction({ target: "add", label: "Add"

return module; })();

And voila! We are rewarded with a display that looks exactly like Figure 4–2. We guess this could be a little disheartening, but remember the following:

It actually does something now. We are beginning to build up a pretty useful toolkit in the

prowebapps.js file that will definitely make our lives easier—eventually.

Figure 4–2. Clicking the Add link actually does something now. Note that we didn’t define the “add” view, but the view still switched successfully. This

is thanks to some code in the ViewManager.activate function that checks to see if a view actually does exist, regardless of whether it was explicitly defined or not.

CHAPTER 4: Constructing a Multipage App

Implementing View Actions