Section 14.6. The Yahoo UI

14.6. The Yahoo! UI

In Chapter 13, we had a chance to play with Google Maps' API, and in this chapter we'll give Yahoo! a chance to show its Ajaxy stuff.

The Yahoo! UI Library is a complete set of files that provides numerous functionality; some are basic DHTML effects, and others use Ajax to integrate with the Yahoo! search engine. To use the library, first download and unzip it from the Yahoo! UI site (http://developer.yahoo.com/yui/). This site also provides documentation, and there are numerous examples installed with the library.

Since there are well-documented examples and API calls included with the UI, I'm going to walk through one of existing examples rather than create any new ones. In this case, I'm going to take a closer look at the AutoComplete control being used with data accessed from Flickr, the photo-sharing service.

You can find examples of the AutoComplete control use in the examples/autocomplete subdirectory, and loading the index.html page allows you to pick whether you want to try out AutoComplete with JSON or with in-memory array, and so on. I clicked the "Query Flickr Web Services for XML" option.

Once the page opens, a logger console that can be collapsed is shown on the right side of the page, and a form field to enter Flickr tags is just below the application description. As you enter the tag information, the console provides information about the program's progress, and as you type, thumbnails of pictures that match tags with whatever letters you've typed are shown below the search field. All in all, a lot of activity is going on, and you can easily get lost playing with the AutoComplete control.

Looking under the covers (the bottom half of the example page shows the script) at the JavaScript, a data-source object needs to be created first. The Flickr XML example uses the Yahoo.widget.DS_XHR data control. This control processes XML Http requests (commonly referred to as REST requests). The URL for the request proxy and an optional object with configuration parameters are passed to the constructor:

oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",     ["photo", "title", "id", "owner", "secret", "server"]);

Once the data source object is instantiated, several properties are set, including a parameter, responseType, maxCacheEntries, and the script query:

// Instantiate data source and define schema as an array:     //     ["ResultNodeName",     //     "QueryKeyAttributeOrNodeName",     //     "AdditionalParamAttributeOrNodeName1",     //     ...     //     "AdditionalParamAttributeOrNodeNameN"]     oACDS = new YAHOO.widget.DS_XHR("./php/flickr_proxy.php",         ["photo", "title", "id", "owner", "secret", "server"]);     oACDS.scriptQueryParam = "tags";     oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_XML;     oACDS.maxCacheEntries = 0;     oACDS.scriptQueryAppend = "method=flickr.photos.search"; 

I then took a peek at the proxy server application in PHP. It's a simple server application that uses the Flickr REST API to perform a query of photos based on whatever tag or set of tags is sent in the query. It then returns the results without any modification.

The AutoComplete widget is created next, and then several of its properties are set:

// Instantiate auto complete     oAutoComp = new YAHOO.widget.AutoComplete('flickrinput','flickrcontainer', oACDS);     oAutoComp.autoHighlight = false;     oAutoComp.formatResult = function(oResultItem, sQuery) {         // This was defined by the schema array of the data source         var sTitle = oResultItem[0];         var sId = oResultItem[1];         var sOwner = oResultItem[2];         var sSecret = oResultItem[3];         var sServer = oResultItem[4];         var sUrl = "http://static.flickr.com/" +             sServer +             "/" +             sId +             "_" +             sSecret +             "_s.jpg";         var sMarkup = "<img src='/books/4/327/1/html/2/" + sUrl + "' class='yui-ac-flickrImg'> " + sTitle;         return (sMarkup);     };

The names of the form field and the container to hold the results are passed to the AutoComplete constructor along with the newly created data-source object. Next, a function to format the result assigns data fields to application variables, which are then used to build a return string suitable for embedding in the web page.

Behind the scenes, then, we can assume that traditional Ajax calls are being made between the Yahoo! UI library and the proxy PHP application hosted on my server, which then makes calls to the Flickr server. In addition, this same library most likely formats the XML that returns into a format suitable for easy access and display.

It's a lovely library, not only for the functionality provided but for the approach it demonstrates for working with external services. Since a direct Flickr API access violates the same-domain security rule, the server-side proxy application that manages the querying has no problem because there are no security restrictions on server applications accessing external web services. The UI then uses traditional JavaScript to communicate with this proxy.

In addition, the component-based nature of this library is one of the better I've seen, as well as being one of the best documented and demonstrated of the more advanced libraries. I give the Yahoo! UI a must-see rating for any new or experienced JavaScript developer.