Dr. Dobb's Journal - January 2008 - (Page 57) d01gutm_p4ma 11/9/07 11:31 AM Page 57 structuring service.php as a factory, this solution can be reused and additional service proxies can easily be added. The JavaScript Almost all of the JavaScript in FNN is based on Prototype.js. There are other good JavaScript libraries such as Dojo and YUI!. Prototype.js, however, is simple to understand and implement, yet advanced enough to handle the needs of FNN. (See “Ajax: Selecting the Framework that Fits,” by Andrew Turner and Chao Wang, DDJ, June 2007.) The bulk of the JavaScript code is contained in two classes (both available online). The first of these is a class that we treat as a Static class, even though JavaScript does not have the facility to declare it as such. The class Articles contains everything we need to get the ball rolling. Because of its static nature, Articles is the one class that is not a subclass of Prototype’s Class object. Because it’s a static, we never instantiate it, we simply make calls to its member methods. The first call you see is in the pageLoad() method where we add a watcher to the Event Bus. The primary method of entry is Articles.fetchArticleList() (available online), which fires off the request to services.php to fetch the feed. It passes the necessary parameters to service.php, including the action name, to properly set up and execute the proxy object. Prototype.js has a unique feature. If you are returning JSON from your service, you can set an HTTP header of X-JSON. The contents of the header are automatically evaluated creating a JavaScript object for you to use. This object is passed in as the second parameter to the onComplete method. The thought process behind the fetching of the articles, keywords, and photos is straightforward and so is the JavaScript implementation—get articles, get the keywords for each article, get a photo for each keyword. The second important JavaScript class in this project is NewsArticle. Once Articles has fetched the feed, it instantiates one copy of NewsArticle for each article in the feed. Each NewsArticle then goes off on its own and fetches the keywords for its story and then the best photo for each keyword according to Flickr. Finally it displays each of these items. While the NewsArticle class contains the bulk of the code that will be executed, the concepts behind it are all pretty mundane. Buses and Observers The other code of interest is the Event Bus and Observer classes previously mentioned. The Event Bus class lets you marshal observers for a given event. These are not browser-based events but code-based ones. You can create as many as you want and your observers will contain the code necessary to process these events when they happen. In the case of this sample application, there are only two events of interest. When we initiate a newAjax request, we want to increment the number of currently outstanding requests. The corollary to that action is that when an Ajax action completes, we want to decrement the number of outstanding events. To register the observer, we include this line in the pageLoad() method: January 2008 l www.ddj.com l Dr. Dobb’s Journal 57 http://www.faircom.com/go/?usesDLD http://www.faircom.com/go/?usesDLD http://www.ddj.com
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.