Licensed to jonathan zheng

178

CHAPTER 5

The role of the server

We have included a few JavaScript libraries b in our file. net.js handles the low-level HTTP request mechanics for us, using the XMLHttpRequest object that we described in chapter 2. windows.js defines a draggable window object that we can use as our pop-up window. The details of the implementation of the window needn’t concern us here, beyond the signature of the constructor:

var MyWindow=new Window(bodyDiv,title,x,y,w,h);

where bodyDiv is a DOM element that will be added into the window body, title is a display string to show in the window titlebar, and x,y,w,h describes the initial window geometry. By specifying a DOM element as the argument, we give ourselves considerable flexibility as to how the content is supplied to the window. The downloadable source code accompanying the book contains the full listing for the Window object.

In the HTML, we simply define a div element for each planet d, to which we assign an onclick handler in the window.onload function c, using the standard DOM tree navigation methods. The onclick handler, showInfo(), isn’t defined here, as we’ll provide several implementations in this chapter. Let’s start by looking at the various actions that we can take when we come to loading the content. 5.4.3 Thinking like a web page: content-centric interactions

The first steps that we take toward Ajax will resemble the classic web application that we are moving away from, as noted in chapter 1 when discussing horses and bicycles. Content-centric patterns of interaction still follow the classic web paradigm but may have a role to play in an Ajax application. Overview

In a content-centric pattern of interaction, HTML content is still being generated by the server and sent to an IFrame embedded in the main web page. We discussed IFrames in chapter 2 and showed how to define them in the HTML markup of the page or generate them programmatically. In the latter case, we can still be looking at a fairly radically dynamic style of interface more akin to a window manager than a desktop. Figure 5.7 outlines the contentcentric architecture. Listing 5.2 shows an implementation of the event handler for our planetary info application, using a content-centric approach.

Licensed to jonathan zheng

The details: exchanging data

179

Client

Server

Inner frame

1. Request

2. Response

ABC

3. Display

• 1
• 2
• 3

Figure 5.7 Content-centric architecture in an Ajax application. The client creates an IFrame and launches a request to the server for

content. The content is generated from a Model, View, and Controller on the server presentation tier and returned to the IFrame. There is no requirement for a business domain model on the client tier.

Listing 5.2 ContentPopup.js

var offset=8;

function showInfo(event){

var planet=this.id;

var infoWin=new ContentPopup(

"info_"+planet+".html",

planet+"Popup",

planet,offset,offset,320,320

);

offset+=32;

}

function ContentPopup(url,winEl,displayStr,x,y,w,h){

var bod=document.createElement("div");

document.body.appendChild(bod);

this.iframe=document.createElement("iframe");

this.iframe.className="winContents";

this.iframe.src=url;

bod.appendChild(this.iframe);

this.win=new windows.Window(bod,displayStr,x,y,w,h);

}

Licensed to jonathan zheng

180

CHAPTER 5

The role of the server

showInfo() is the event-handler function for the DOM element representing the planet. Within the event handler, this refers to the DOM element, and

Return Main Page Previous Page Next Page

®Online Book Reader