Example 3.47. appmonitor2.js (excerpt)
this.doDone = function() {
var self = Status;
if (self.currOpacity == 0) {
clearInterval(self.procInterval);
}
self.currOpacity = self.currOpacity - 10;
self.displayOpacity();
};
Figure 3.9. The application with a pulsing status indicator
Finally, we're ready to test this code in our browser. Open appmonitor2.html in your browser, click the Start button, and you should see a pulsing Processing ... message near the top right-hand corner of the browser's viewport, like the one shown in Figure 3.9.
Be Careful with that Poll Interval!
Now that we have an animation running in the page, we need to be careful that we don't start the animation again before the previous one stops. For this reason, it's highly recommended that you don't set POLL_INTERVAL to anything less than two seconds.
Styling the Monitor
Now that we've got our application up and running, let's use CSS to make it look good. We'll need to add the following markup to achieve our desired layout:
Example 3.48. appmonitor2.html (excerpt)
<body>
<div id="wrapper">
<div id="main">
<div id="status">
<div id="statusMessage">App Status:
<span id="currentAppState"></span>
</div>
<div id="pollingMessage"></div>
<br class="clearBoth" />
</div>
<div id="pollResults"></div>
<div id="buttonArea"></div>
</div>
</div>
</body>
As you can see, we've added three divs from which we can hang our styles, and a line break to clear the floated application status message and animation. The completed CSS for this page is as follows; the styled interface is shown in Figure 3.10:
Example 3.49. appmonitor2.css
body, p, div, td, ul {
font-family: verdana, arial, helvetica, sans-serif;
font-size:12px;
}
#wrapper {
padding-top: 24px;
}
#main {
width: 360px;
height: 280px;
padding: 24px;
text-align: left;
background: #eee;
border: 1px solid #ddd;
margin:auto;
}
#status {
width: 358px;
height: 24px;
padding: 2px;
background: #fff;
margin-bottom: 20px;
border: 1px solid #ddd;
}
#statusMessage {
font-size: 11px;
float: left;
height: 16px;
padding: 4px;
text-align: left;
color: #999;
}
#pollingMessage {
font-size: 11px;
float: right;
width: 80px;
height: 14px;
padding: 4px;
text-align: center;
background: #fff;
}
#pollResults {
width: 360px;
height: 210px;
}
#buttonArea {
text-align: center;
}
.pollResult {
padding-bottom: 4px;
}
.time {
font-size: 11px;
width: 74px;
float: left;
}
.processing {
color: #339;
border: 1px solid #333399;
}
.done {
color: #393;
border: 1px solid #393;
}
.bar {
background: #ddf;
float: left;
}
.inputButton {
width: 8em;
height: 2em;
}
.clearBoth {
clear: both;
}
Share and Enjoy:
