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:
http://developer.yahoo.com/yui/examples/calendar/index.html(refer to the API documentation)http://developer.yahoo.com/yui/docs/YAHOO.widget.Calendar.html(to get a list of methods for the widget)
You can use the Firebug extension or JavaScript Shell to get a feel for how to program the component:
Go to
http://developer.yahoo.com/yui/examples/calendar/quickstart.html.Click a date.
In the console of Firebug or the JavaScript Shell, type the following to get back the date you selected (see Figure 8-2):
YAHOO.example.calendar.cal1.getSelectedDates()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) YAHOO.example.calendar.cal1.setMonth(1) // Redraws the control using the YUI TreeView YAHOO.example.calendar.cal1.render()
Figure 8.2. Figure 8-2.Interacting with the Yahoo! Calendar using the JavaScript Shell. (Reproduced with permission of Yahoo! Inc. ® 2007 by Yahoo! Inc. YAHOO! and the YAHOO! logo are trademarks of Yahoo! Inc.)
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):
http://developer.yahoo.com/yui/treeview/
In addition to reading the API documentation for the TreeView component,[116]
Go to
http://developer.yahoo.com/yui/examples/treeview/default_tree.html.In the console of Firebug or the JavaScript Shell, type the following to expand and collapse the tree, respectively:
tree.expandAll() tree.collapseAll()
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/.
Download the library to your machine or your web hosting environment. Go to
http://developer.yahoo.com/yui/download/.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 theyuidirectory athttp://examples.mashupguide.net/lib/yui/. The important part of the library for runtime purposes is theyui/builddirectory.
With the files in your own directory, you can, for instance, look at the calendar example on my own server:
http://examples.mashupguide.net/lib/yui/examples/calendar/quickstart.html