The community aspect of the Internet has changed the way we
work. Developers can quickly get answers to their questions by way of a Google search, or learn new techniques and technologies via
countless Web sites, blogs, and so forth. One site I
recently discovered is the Yahoo!
Developer Network
. While it offers lots of API’s for utilizing Yahoo!
features, it also includes plenty of generic Web development resources.

What is it?

An initial perusal of the site can be a bit overwhelming,
but it offers a variety of cool stuff for Web developers. Yahoo! describes the
purpose of the site as helping software developers integrate Web sites and
applications with Yahoo! using standard technologies such as XML and RSS.

YUI Library

The Yahoo! Developer Network offers tools and
sample code for working with Yahoo! applications like Yahoo! Finance, Maps, and
Messenger, as well as Flickr and HotJobs.
The tools include RSS feeds and API’s for utilizing application services, but I
want to concentrate on the Yahoo!
User Interface (YUI) Library

Yahoo! describes the YUI Library as a set of utilities and
controls, written in JavaScript, for building richly interactive Web
applications using techniques such as DOM scripting, DHTML, and AJAX. It
provides a set of components for adding specific functionality to a Web
application. The components are available as open source via a BSD license.

The components are available in one download, which is comprised of
one compressed file. You can extract it to install the library; it includes
documentation, sample code, and the source code for each component. Let’s take
a closer look at one of the components to get a feel for what is available.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic’s free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!


Providing a calendar is a common requirement for Web applications.
The calendar component provides a powerful solution to such requirements. It is
very flexible, allowing it to be configured to meet just about any scenario.
The following resources of the YUI Library are necessary to use the calendar:

  • The
    Yahoo global object is available in the yahoo.js
    file in the build/yahoo directory of your YUI Library installation. It provides
    a single global namespace within which all YUI Library code resides. It
    must be included on every page that utilizes the YUI Library, and it must
    appear before any of the other YUI components.
  • The
    Event utility (event.js file) includes code to
    handle events. It is located in the build/event directory of your YUI
    Library installation.
  • The
    DOM Collection (dom.js file) provides code for
    working with the HTML DOM. It is located in the build/dom
    directory. It comprises a family of convenient methods that simplify
    common DOM-scripting tasks, including element positioning and CSS-style
    management, while normalizing for cross-browser inconsistencies.
  • The
    actual calendar code is found in the calendar.js
    file in the build/calendar directory.
  • The calendar.css style sheet provides visual formatting of
    the calendar control. It can be found in the build/calendar/assets directory.

All of these files should be included in your Web page to
use the calendar control. With them included, an HTML element is created to
contain the calendar. For example, the following div element is used:

<div id="calDiv"></div>

Next, the calendar control is created. It accepts a minimum
of two parameters. The first parameter is the id of the new element that will
be created by the calendar control to hold its DOM. The second parameter is the
id of the element that will contain the calendar control (our div element). The
next example takes advantage of the optional third parameter that specifies a
start month/year for the rendered calendar. A fourth optional parameter can be
used to specify a selected date on the calendar control.

Finally, the render method of the calendar object is called
to render it on the page.
Listing A
creates a calendar beginning with January 2007.

This is a basic example, but there are plenty of options for
working with the calendar contents as well as formatting its display.
Listing B extends the previous
code to customize the display characteristics of the calendar including the
weekdays, months, and so forth.

Using the Calendar control is better if you can work with
the values within it. You can use the following line to display the date
selected by the user (mouse click) via the Calendar control’s getSelectedDates()
method in the previous examples.

<a href="javascript:alert(cal.getSelectedDates())">what's selected?</a>

These examples provide a preview of the basic functionality
of the Calendar control. You should refer to the documentation to dig deeper
into what it offers.

Design patterns

Another interesting area of the Yahoo! Developer Network is design patterns.
While design patterns have been utilized by application developers for years,
they are not as common with Web developers. Design patterns provide solutions
to common problems and keep developers from reinventing the wheel every time
they are faced with common scenarios. The library site includes numerous Web
development patterns with sample code that often utilizes YUI Library

New tools at your disposal

The Web is overloaded with sample code and related resources
to help with your Web development projects, but some resources are better than
others. I found a great resource when I stumbled upon the Yahoo! Developer
Network. It provides plenty of helpful information for taking advantage of
Yahoo!-related resources in Web applications, as well as a great set of Web
components, sample code, and much more.

Miss a column?

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton’s column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.