Setting Up the UI
The first version of this application started when the page loaded, and ran until the browser window was closed. In this version, we want to give users a button that they can use to toggle the polling process on or off. The toggleAppStatus method handles this for us:
Example 3.6. appmonitor2.js (excerpt)
this.toggleAppStatus = function(stopped) {
var self = Monitor;
self.toggleButton(stopped);
self.toggleStatusMessage(stopped);
};
Okay, so toggleAppStatus doesn't really do the work, but it calls the methods that do: toggleButton, which changes Start buttons into Stop buttons and vice versa, and toggleStatusMessage, which updates the application's status message. Let's take a closer look at each of these methods.
The toggleButton Method
This method toggles the main application between its "Stop" and "Start" states. It uses DOM-manipulation methods to create the appropriate button dynamically, assigning it the correct text and an onclick event handler:
Example 3.7. appmonitor2.js (excerpt)
this.toggleButton = function(stopped) {
var self = Monitor;
var buttonDiv = document.getElementById('buttonArea');
var but = document.createElement('input');
but.type = 'button';
but.className = 'inputButton';
if (stopped) {
but.value = 'Start';
but.onclick = self.pollServerStart;
}
else {
but.value = 'Stop';
but.onclick = self.pollServerStop;
}
if (buttonDiv.firstChild) {
buttonDiv.removeChild(buttonDiv.firstChild);
}
buttonDiv.appendChild(but);
buttonDiv = null;
};
The only parameter to this method, stopped, can either be true, indicating that the polling has been stopped, or false, indicating that polling has started.
As you can see in the code for this method, the button is created, and is set to display Start if the application is stopped, or Stop if the application is currently polling the server. It also assigns either pollServerStart or pollServerStop as the button's onclick event handler. These event handlers will start or stop the polling process respectively.
When this method is called from init (via toggleAppStatus), stopped is set to true so the button will display Start when the application is started.
As this code calls for a div with the ID buttonArea, let's add that to our markup now:
Example 3.8. appmonitor2.html (excerpt)
<body>
<div id="buttonArea"></div>
</body>
The toggleStatusMessage Method
Showing a button with the word "Start" or "Stop" on it might be all that programmers or engineers need to figure out the application's status, but most normal people need a message that's a little clearer and more obvious in order to work out what's going on with an application.
This upgraded version of the application will display a status message at the top of the page to tell the user about the overall state of the application (stopped or running), and the status of the polling process. To display the application status, we'll place a nice, clear message in the application's status bar that states App Status: Stopped or App Status: Running.
In our markup, let's insert the status message above where the button appears. We'll include only the "App Status" part of the message in our markup. The rest of the message will be inserted into a span with the ID currentAppState:
Example 3.9. appmonitor2.html (excerpt)
<body>
<div id="statusMessage">App Status:
<span id="currentAppState"></span>
</div>
<div id="buttonArea"></div>
</body>
The toggleStatusMessage method toggles between the words that can display inside the currentAppState span:
Example 3.10. appmonitor2.js (excerpt)
this.toggleStatusMessage = function(stopped) {
var statSpan = document.getElementById('currentAppState');
var msg;
if (stopped) {
msg = 'Stopped';
}
else {
msg = 'Running';
}
if (statSpan.firstChild) {
statSpan.removeChild(statSpan.firstChild);
}
statSpan.appendChild(document.createTextNode(msg));
};
Once the UI is set up, the application is primed and ready to start polling and recording response times.
Share and Enjoy:
