The last piece of the code puts all the div elements together, then places the pollResult div inside the pollResults div. Figure 3.6 shows the running application.
"Hold on a second," you may well be thinking. "Where's the bar graph we're supposed to be seeing?"
The first bar is there, but it's displayed in white on white, which is pretty useless. Let's make it visible through our application's CSS:
Example 3.27. appmonitor2.css (excerpt)
.time {
width: 6em;
float: left;
}
.bar {
background: #ddf;
float: left;
}
.clearBoth {
clear: both;
}
The main point of interest in the CSS is the float: left declarations for the time and bar div elements, which make up the time listing and the colored bar in the bar graph. Floating them to the left is what makes them appear side by side. However, for this positioning technique to work, an element with the clearBoth class must appear immediately after these two divs.
This is where you can see AJAX in action. It uses bits and pieces of all these different technologies -- XMLHttpRequest, the W3C DOM, and CSS -- wired together and controlled with JavaScript. Programmers often experience the biggest problems with CSS and with the practicalities of building interface elements in their code.
As an AJAX programmer, you can either try to depend on a library to take care of the CSS for you, or you can learn enough to get the job done. It's handy to know someone smart who's happy to answer lots of questions on the topic, or to have a good book on CSS (for example, SitePoint's The CSS Anthology: 101 Essential Tips, Tricks & Hacks).
Figure 3.7. The beginnings of our bar graph
Now that our CSS is in place, we can see the bar graph in our application display, as Figure 3.7 illustrates.
Stopping the Application
The final action of the pollServerStart method, after getting the app running, is to call toggleAppStatus to toggle the appearance of the application. toggleAppStatus changes the status display to App Status: Running, switches the Start button to a Stop button, and attaches the pollServerStop method to the button's onclick event.
The pollServerStop method stops the ongoing polling process, then toggles the application back so that it looks like it's properly stopped:
Example 3.28. appmonitor2.js (excerpt)
this.pollServerStop = function() {
var self = Monitor;
if (self.stopPoll()) {
self.toggleAppStatus(true);
}
self.reqStatus.stopProc(false);
};
This code reuses the stopPoll method we added earlier in the chapter. At the moment, all that method does is abort the current HTTP request, which is fine while we're handling a timeout. However, this method needs to handle two other scenarios as well.
The first of these scenarios occurs when the method is called during the poll interval (that is, after we receive a response to an HTTP request, but before the next request is sent). In this scenario, we need to cancel the delayed call to doPoll.
The second scenario that this method must be able to handle arises when stopPoll is called after it has sent a request, but before it receives the response. In this scenario, the timeout handler needs to be canceled.
Share and Enjoy:
