YUI Widgets

You can find the Yahoo UI Library at http://developer.yahoo.com/yui/ where you can read “Yahoo! UI Library—Getting Started.”[115]

Try the pieces on the Yahoo! site (for example, the TreeView controller at http://developer.yahoo.com/yui/examples/treeview/index.html ), and enter some commands on the JavaScript Shell. To help you out, we will walk through the use of two YUI widgets: the calendar and the TreeView widget.

Using the YUI Calendar

The YUI Calendar component (http://developer.yahoo.com/yui/calendar/) presents a browser-­based calendar interface from which users can select one or more dates. To learn how to use it, you can try the calendar examples:

You can use the Firebug extension or JavaScript Shell to get a feel for how to program the component:

  1. Go to http://developer.yahoo.com/yui/examples/calendar/quickstart.html.

  2. Click a date.

  3. In the console of Firebug or the JavaScript Shell, type the following to get back the date you selected (see Figure 8-2):


  4. Try other methods to see how the calendar works:

    YAHOO.example.calendar.cal1.hide() // Hides the control
    YAHOO.example.calendar.cal1.show() // Shows the control
    // Sets month to February (change not visible until redrawn)
    // Redraws the control using the YUI TreeView

The TreeView component is a UI control that lets users interact with a tree structure (by, for instance, expanding or collapsing branches of the tree):


In addition to reading the API documentation for the TreeView component,[116]

  1. Go to http://developer.yahoo.com/yui/examples/treeview/default_tree.html.

  2. In the console of Firebug or the JavaScript Shell, type the following to expand and collapse the tree, respectively:


See how you can interactively learn how to use the YUI JavaScript widgets through using Firebug and the JavaScript Shell.

Installing YUI on Your Host

To use YUI in your own applications, you should set up YUI on your own web host. I will use a concrete example, http://examples.mashupguide.net, which is mapped to the Unix directory ~/examples.mashupguide.net. Substitute your own values. My goal is to set up YUI so that it is accessible at http://examples.mashupguide.net/lib/yui/.

  1. Download the library to your machine or your web hosting environment. Go to http://developer.yahoo.com/yui/download/.

  2. Unzip and copy the files to the right location. In my case, I unzipped and copied the unzipped directory (which is named yui) to /home/rdhyee/examples.mashupguide.net/ lib/yui, which maps to the yui directory at http://examples.mashupguide.net/lib/yui/. The important part of the library for runtime purposes is the yui/build directory.

With the files in your own directory, you can, for instance, look at the calendar example on my own server: