Creating a View Manager

There are a variety of different approaches that could be used to prevent our having to write static HTML over and over again. For instance, we could use CSS classes as per the jQuery validation plug-in that was used in the previous chapter, and then build some JavaScript code to read the information out of the CSS classes and configure our application. In this particular case, however, we are going to write a ViewManager submodule for our prowebapps.js file that we will configure from our application JavaScript file.

The outline of the PROWEBAPPS.ViewManager module is shown here: ViewManager: (function() {

var views = {}; var activeView = null;

function switchView(oldView, newView) { // will switch views here } // switchView

var subModule = { activate: function(viewId) { // save the old view var oldView = activeView;

// if a view id has been specified, but doesn't exist in the views, check for a div if (viewId && (! views[viewId]) && (jQuery("#" + viewId).get(0))) { subModule.define({ id: viewId }); } // if

// update the active view activeView = viewId ? views[viewId] : null;

// update the associated ui elements switchView(oldView, activeView);

getActiveView: function() { return activeView ? jQuery("#" + activeView.id) : null; },

define: function(args) { args = jQuery.extend({ id: '', actions: []

CHAPTER 4: Constructing a Multipage App

}, args);

// if the id is specified, add the view to the list of defined views if (args.id) {

views[args.id] = args; } // if

return subModule; })();

An application would then call PROWEBAPPS.ViewManager.define to define a new view with its associated actions (we’ll see an example soon). The static function define allows us to register new views with the view manager, and activate sets the module variable activeView to match the specified view. We then make a call to switchView to update the UI elements based on the change in active view.

Expanding on the switchView stub, we implement the following private functions to implement changing the view:

function getViewActions(view) { var html = ""; for (var ii = 0; view && (ii < view.actions.length); ii++) {

html += "<li>" + view.actions[ii].getAnchor() + "</li>"; } // for

return html; } // getViewActions

function getAction(view, actionId) { // extract the id portion from the action id actionId = actionId.replace(/^action_(\d+)$/i, "$1");

// find the specified view in the active view and execute it for (var ii = 0; ii < view.actions.length; ii++) {

Download from Wow! eBook <www.wowebook.com>

if (view.actions[ii].id == actionId) {

return view.actions[ii]; } // if } // for

return null; } // getAction

function switchView(oldView, newView) { var ii, menu = jQuery("#menu").get(0);

// switch the views using jQuery oldView ? jQuery("#" + oldView.id).hide() : null; newView ? jQuery("#" + newView.id).show().trigger("activated") : null;

// if we have a menu, then update the actions if (menu) {

// clear the menu and create list items and anchors as required jQuery(menu).html(getViewActions(activeView));

// attach a click handler to each of the anchors now in the menu

70 CHAPTER 4: Constructing a Multipage App

jQuery(menu).find("a").click(function(evt) { var action = getAction(activeView, this.id); if (action) {

action.execute(); evt.preventDefault();

} // if }); } // if } // switchView

At this stage, the private switchView function has two purposes: To hide the current view if active, and show the new view. Also notice

the call to the jQuery trigger method on the new element. We will be making use of that later in this chapter.

To check for the presence of a #menu element. If it exists, populate it appropriately with links to the relevant actions for the active view. Once the menu has been built, the jQuery click function is used to handle finding and executing the action when a link is clicked.

Creating a View Manager