Chapter 16. Ajax Toolkits
Here's what we didn't tell you in the last chapter: writing Ajax applications can be difficult. They often require a great deal of knowledge of working with the DOM, CSS, JavaScript, and server resources. Since this is a book for beginning scripters, we've shown you how to do some easy things with Ajax, so you can see that learning Ajax techniques is well within your reach. But many books have been written that are completely devoted to showing intermediate-to-advanced scripters how to create Ajax applications, and our Ajax chapters are no substitute for that kind of in-depth exploration.
Does that mean that you can't make good use of Ajax on your sites, even though you're not yet a total JavaScript wizard? Not at all! This chapter shows you how to take advantage of Ajax toolkits: prewritten, already-programmed libraries of functions that make it easy for you to bring the power of Ajax to your projects.
There are many Ajax toolkits available for download, and most of them are free. For this chapter, we're using the Yahoo! User Interface (YUI) Library (developer.yahoo.com/yui/). YUI is a freely downloadable, open-source set of utilities and controls that help you build interactive Web applications. We think it's one of the best. In this chapter, we'll show you how to use YUI to enable the user to drag-and-drop page elements; add calendar objects; create overlays and pop-up windows; add cool animation effects to your pages; and finally, embed a light-weight debugger right in your page to help you create your applications.
|
All of the examples in this chapter require you to download the entire Yahoo! User Interface Library, which is available as a downloadable ZIP archive from Sourceforge (sourceforge.net/projects/yui). When you download and unpack the archive, you'll get a folder with subfolders containing all of the library components (build), documentation files (docs), and an examples folder. You'll need to upload the particular JavaScript and CSS files you'll be using from the build folder to your server, and in the <link> and <script> tags in your XHTML pages, you'll need to specify the paths to those files.
The files you'll need to upload will vary, depending on the library components that you'll be using, but all of them require the Yahoo! Global Object, yahoo.js. This file provides the namespace that contains all YUI code (that is, the YAHOO objects referred to in step 5 on page 394). You must include the Yahoo! Global Object on every page that uses a YUI component, and it must appear on the page before any of the other components, so that it loads first. YUI components that require other components to work are said to be dependent on those components, and a component can require more than one dependency.
You include the Yahoo! Global Object by adding a <script> tag that specifies it, like so:
<script type="text/javascript" src="yui/yahoo.js"></script>
Then, add additional <script> tags for each of the other YUI components and (if necessary) their dependencies.
Note that this means that you're running these files off your own server, so if and when Yahoo! upgrades its code, you won't get the fixes automatically. Be sure to check back regularly to see if there are newer versions available.
|
|
