Introducing the Google AJAX APIs, Page 5

JSON and XML outputs for the Feed API

In addition to the canonicalized JSON format, the AJAX Feed API also provides an XML data output as well as a mixed XML and JSON output. The XML output allows programmers to access any element of the feed even if it doesn't fall into the canonicalized JSON output. An example of this occurs when dealing with GEORSS feeds where the latitude and longitude elements of the feed are not currently available from the JSON output. In this case, a mixed mode output is used; it allows you to extract from the JSON output as well as any extra elements that are only provided in the raw XML output directly.

The Base UI Layer

Returning back to the overall architecture of the AJAX APIs, recall that above the Raw Data Access Layer lies below the Base UI Layer. With the Base UI Layer comes helpful code to display data without having to do low level DOM programming.

The GSearchControl

The other Base UI layer control from the AJAX APIs is the GSearchControl. As you've seen earlier in the article, this control provides a simple solution to the overall task of displaying the results of an AJAX Search. Extending upon the GSearchControl example from before, this example shows how to specify the Tabbed Mode rendering option as well for AJAX Search.

...function OnLoad() {

   // create a search control
   sc = new GSearchControl();
   sc.addSearcher(new GwebSearch());
   sc.addSearcher(new GblogSearch());
   sc.addSearcher(new GnewsSearch());
   sc.addSearcher(new GbookSearch());

   // set up for tabbed mode
   var drawOpt = new GdrawOptions();
   drawOpt.setDrawMode(
   GSearchControl.DRAW_MODE_TABBED);
   // bind to page
   sc.draw(scDiv, drawOpt);
}
...

And here is how the preceding code is rendered:

Figure 6: The GSearchControl with several searchers rendered in Tabbed Mode

In a similar manner, GSearchControl's appearance is governed by a similar set of base CSS classes located here: http://www.google.com/uds/css/gsearch.css and one can override these by adding classes to the HTML page that contains GSearchControl. The following CSS code would suppress the snippet portion of the AJAX Search results.

#mycontrol .gs-webResult .gs-snippet {
   display : none; }

The Advanced UI Layer

In addition to the base controls offered by the AJAX APIs, there is a higher level collection of controls that provide more specialized output such as a video bar, blog bar, or a feed-based slideshow. These more advanced control are extensions upon the Base UI Layer and are appropriately grouped in the Advanced UI Layer. One of the cool things about these advanced UI controls is that they easily can be downloaded and customized or extended upon. Several even have accompanying wizards that help generate custom usage code for the end user. Some of these most compelling controls include a video bar that shows playable videos based on a search query in a bar, a news bar with similar behavior but for news searches as well as a slideshow that displays images from Internet feeds.

Similar to the Base UI controls, minimal JavaScript code is needed for them to run on a page. For example, the code below is used to place a video bar on a page:

function LoadVideoBar() {
   var options = {
   largeResultSet  : false,
   autoExecuteList : {
      executeList  : ["Kelly Clarkson",...]
   }
};

barDiv  = document.getElementById("bar");
playDiv = document.getElementById("player");
new GSvideoBar(barDiv, playDiv, options);
}
   ...

<div id="player">Loading...</div>
<div id="bar">Loading...</div>

As you can see, loading a video bar (GSVideoBar) is simply a matter of setting some options such as the initial search query and then creating a new GSVideoBar object with these options. Also notice that there are two elements for a video bar, a player and the accompanying video bar itself.