Datasheet
</div>
</li>
</ul>
</div>
</div>
If you are familiar with HTML, you will have recognized an HTML division (div) that embeds a multi-
level unordered list (
ul). This multilevel list defines the structure of the menu bar and follows a set
of conventions that are described in the YUI library. You may also notice many
id attributes, such as
id=”menubar.go”. These are identifiers that will be used by our scripts to attach actions to the menu
items. Speaking of the Go menu, identified by
menubar.go, you may also notice that its content includes
only a dummy item. This is because you populate the content of this menu with dynamic information
gathered from the web server.
This is done by another BuzzWatch class that is called the controller. During its initialization, the con-
troller performs the following actions in
controller.js:
YAHOO.util.Event.addListener(
“menubar.file.save”,
“click”, this.save,
this,
true);
YAHOO.util.Event.addListener(
“menubar.file.new”,
“click”,
this._new,
this,
true);
YAHOO.buzzWatch.menuGo.cfg.getProperty(“submenu”).show();
this.loadList();
The first two instructions belong to the user interaction category and they assign actions on the click
events of the file.save and file.new menu items for which this class is responsible. The third one
tells the application to open and show the Go menu. This is the instruction that opens this menu when
you load the page. The last instruction calls the
loadList method, which is defined as:
BuzzWatchController.prototype.loadList = function() {
YAHOO.util.Connect.asyncRequest(‘GET’, “watch.php”, this.callbackList);
}
With this method, you leave the domain of changing the way the document is presented to enter
the domain of web server interaction. The YUI connect module is a wrapper around the mythic
XMLHTTPRequest object that is the heart of Ajax applications. As already mentioned, the big benefit of
using such a wrapper is that it hides the differences between implementations and makes all the browsers
pretty much equal. Here, the controller uses an asynchronous request (asynchronous meaning that the
browser does not wait until the response from the server comes back but calls a method depending on the
result of the request). The first parameter,
‘GET’, is the same HTTP request code that you saw in the HTTP
traces. The second parameter,
“watch.php” is the URL of the resource to fetch. This URL doesn’t start with
a URI scheme such as
http:// and it is what is called a relative URI. This means that its address is evalu-
ated relatively to the current page. If you’ve accessed this page as
http://localhost/buzzwatch/, this
URL is equivalent to
http://localhost/buzzwatch/watch.php. The last parameter defines what needs
to be done when the answer comes back. It is a reference to the following definition:
12
Chapter 1
04_087889 ch01.qxp 5/2/07 12:56 PM Page 12