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.
Calendar
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:
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.
what's selected?
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 components.
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.
courtesy @TechRepublic
Posts
No comments:
Post a Comment