23,27 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
In Detail
The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML, and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.
This book covers all released components whether utility, control, core file, or CSS tool. Methods of the YAHOO Global Object are used and discussed throughout the book.
The basics of each control will be presented, along with a detailed example showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces.
Besides giving you a deep understand of the YUI library, this book will expand your knowledge of object-oriented JavaScript programming, as well as strengthen your understanding of the DOM and CSS.
You will learn to create a number of powerful JavaScript controls that can be used straight away in your own applications.
Learning the Yahoo! User Interface Library introduces the popular open-source YUI JavaScript library and takes the user through each of the fully released components in detail looking at the classes that make up each component and the properties and methods that can be used. It includes a series of practical examples to reinforce how each component should/can be used. Author Dan Wellman takes the reader from beginner to advanced-level YUI usage and understanding.
Approach
The book is a tutorial, leading the reader first through the basics of the YUI library before moving on to more complex examples involving the YUI controls and utilities. The book is heavily example driven, and based around an approach of tinkering and extending to improve.
Who this book is for
This book is for web developers comfortable with JavaScript and CSS, who want to use the YUI library to easily put together rich, responsive web interfaces. No knowledge of the YUI library is presumed.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 421
Veröffentlichungsjahr: 2008
Ähnliche
Table of Contents
Learning the Yahoo! User Interface Library
Dan Wellman
Learning the Yahoo! User Interface Library
Copyright © 2008 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published:March 2008
Production Reference: 1120308
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-847192-32-5
www.packtpub.com
Cover Image by Vinayak Chittar ( <[email protected]>)
Credits
Author
Dan Wellman
Reviewer
Jon Trelfa
Senior Acquisition Editor
Douglas Paterson
Development Editor
Nikhil Bangera
Technical Editor
Bhupali Khule
Editorial Team Leader
Mithil Kulkarni
Project Manager
Abhijeet Deobhakta
Project Coordinator
Snehal Raut
Indexer
Hemangini Bari
Proofreaders
Martin Brook
Angie Butcher
Production Coordinator
Shantanu Zagade
Cover Work
Shantanu Zagade
About the Author
Dan Wellman lives with his wife and three children in his home town of Southampton on the south coast of England. By day his mild-mannered alter-ego works for a small yet accomplished e-commerce agency. By night he battles the forces of darkness and fights for truth, justice, and less intrusive JavaScript.
Dan has been writing web-design tutorials and articles for around five years and is rarely very far from a keyboard of some description. This is his first book.
I'd like to say a special thank you to James Zabiela for the use of his Mac, and Eamon O'Donoghue for the exceptional art work that features in some of the examples; the book would simply not be the same without your help guys. A nod of respect is also directed at Steve Bishop for his invaluable advice.
This book is dedicated to my wife Tammy and my children Bethany, Matthew and James.
Preface
Learning the Yahoo! User Interface Library was written to help people with a basic knowledge of JavaScript and web design principles to quickly get up to speed with the UI library developed by Yahoo. The book covers a selection of some of the most established utilities and controls found in the library, but it does not go into detail on any of the beta or experimental components.
Each chapter of the book focuses on one, or a maximum of two, individual utilities or controls, and is broken down into theory and practice sections. The theory sections of each chapter discuss the benefits of the component being looked at, the situations it would be most useful in and looks at the classes from which it is constructed. The code sections walk you through implementing and configuring the component in step by step detail.
No previous experience of the YUI library is required, although an understanding of JavaScript, HTML, and CSS is assumed. Other technologies such as PHP and mySQL are used in places throughout the book, although these are not explained in great detail as they fall outside of the book's scope.
By the time you finish this book you'll be well on your way to mastering the library and will have increased the number of web design tools and techniques at your disposal exponentially.
What This Book Covers
In Chapter 1 we look at the library as a whole covering subjects such as how it can be obtained, how it can be used, the structure and composition of it, and the license it has been released under. We also look at a coding example featuring the Calendar control.
Chapter 2> covers the extensive CSS tools that come with the library, specifically the Reset and Base tools, the Fonts tool, and the extremely capable Grids tool. Examples on the use of each tool are covered.
In Chapter 3> we look at the all important DOM and Event utilities. These two comprehensive utilities can often form the backbone of any modern web application and are described in detail. We look at the differences between traditional and YUI methods of DOM manipulation, and how the Event utility unites the conflicting Event models of different browsers. Examples in this chapter include how the basic functions of the DOM utility are used, and how custom events can be defined and subscribed to.
AJAX is the subject of Chapter 4>, where we look in detail at how the Connection Manager handles all of our XHR requirements. Examples include obtaining remote data from external domains and the sending and recieving of data asynchronously to our own servers.
Chapter 5> looks first at how the Animation utility can be used to add professional effects to your web pages. It then moves on to cover how the Browser History Manager re-enables the back and forward buttons and bookmarking functionality of the browser when used with dynamic web applications.
The Button family of controls and the TreeView control are the focus of Chapter 6>. We first cover each of the different buttons and look at examples of their use. We then implement a TreeView control and investigate the methods and properties made available by its classes.
In Chapter 7> we look at one of the most common parts of any web site—the navigation structure. The example looks at the ease at which the Menu control can be implemented. We also look at the AutoComplete control and create both array and XHR-based versions of this component.
Chapter 8> looks at the container family of controls as well as the tabView control. Each member of the container family is investigated and implemented in the coding examples. The visually engaging and highly interactive TabView control is also looked at and implemented.
Drag-and-Drop, one of DHTML's crowning acheivements is wrapped up in an easy to use utility, forms the first part of Chapter 9>. In the second part of this chapter we look at the related Slider control and how this basic but useful control can be added to pages with ease.
In Chapter 10> we cover the Logger control in detail and work through several examples that include how the Logger is used to view the event execution of other controls and how it can be used to debug existing controls and custom classes.
What You Need for This Book
This book expects and requires you to have a prior knowledge and understanding of at least JavaScript, HTML, and CSS. While the use of the utilities, controls, and CSS tools will be explained in detail throughout the book, any HTML, CSS, or PHP code that is featured in any of the examples may not be explained in detail. Other skills, such as the ability to install and configure a web server, are required. A PC or Mac, a browser, text editor, the YUI, and a web server are also required.
Who is This Book for
This book is for web developers comfortable with JavaScript and CSS, who want to use the YUI library to easily put together rich, responsive web interfaces. No knowledge of the YUI library is presumed.
Reader Feedback
Feedback from our readers is always welcome. Let us know what you think about this book, what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply drop an email to <[email protected]>, making sure to mention the book title in the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer Support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the Example Code for the Book
Visit http://www.packtpub.com/files/code/2325_Code.zip, to directly downlad the example code.
The downloadable files contain instructions on how to use them.
Errata
Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in text or code—we would be grateful if you would report this to us. By doing this you can save other readers from frustration, and help to improve subsequent versions of this book. If you find any errata, report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the Submit Errata link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to the list of existing errata. The existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Questions
You can contact us at <[email protected]>if you are having a problem with some aspect of the book, and we will do our best to address it.
Chapter 1. Introducing the YUI
Welcome to the first chapter of "Web Development with the Yahoo! User Interface Library". Throughout this book, we'll be exploring what makes up the library and what it can do for you. By implementing a selection of the available utilities and controls, we can see exactly how each one works and what functionality and tools it leaves at your disposal.
During this chapter we're going to introduce ourselves to the library by taking an overall view of it. The topics that we are going to cover include:
We'll also go over a brief coding example where you will get down to some proper scripting and find out for yourself just how easy it is to get up and running with the components themselves. This is where you will see the power provided by the library at first-hand.
What is the YUI?
The Yahoo! User Interface (YUI) Library is a free collection of utilities and controls, written primarily in JavaScript, that has been produced by the expert developers at Yahoo! to make your life easier as a web developer or front-end user interface designer.
It consists of a series of JavaScript and CSS components that can be used to quickly and easily build the rich and highly interactive applications that today's web consumer expects and demands.
The premise of the library is simple; often when writing JavaScript, you'll come up with a function that works perfectly in one browser, yet badly (or worse, not at all) in alternative browsers. This means that you'll often need a set of different functions to do exactly the same thing in different browsers.
This can be done for some of the major browsers without too much difficulty using standard object detection methods within if statements. However, this can lead to massively increased script files and unwieldy code that takes longer to debug and troubleshoot, and longer to write in the first place.
The YUI wraps both sets of code up into one object that can be used programmatically with one constructor, so instead of dealing with different sets of code for different browsers, you deal with the library and it makes the different calls depending on the browser in use.
Another important aspect of the library that I should mention at this point is its respect for the Global Namespace. All objects created by the library and its entire code run within, and can only be accessed through, the YAHOO Global Namespace object. This means that the entire library, including every utility and every control, and its numerous classes, create just one namespace object within the Global Namespace.
The Global Namespace is the global collection of JavaScript object names, and it is very easy to litter it with potentially conflicting objects, which can become a problem when code is shared between applications. Yahoo minimises its impact on the Global Namespace and so shall we; all of the code that we'll write throughout the course of this book will reside within its own namespace object.
Essentially, the YUI is a toolkit packed full of powerful objects that enables rapid front-end GUI design for richly interactive web-based applications. The utilities provide an advanced layer of functionality and logic to your applications, while the controls are attractive pre-packed objects that we can drop onto a page and begin using with little customization.
Who Is It for and Who Will It Benefit the Most?
The YUI is aimed at and can be used by just about anyone and everyone, from single-site hobbyists to creators of the biggest and best web applications around. Developers of any calibre can use as much or as little of it as they like to improve their site and to help with debugging.
It's simple enough to use for those of you that have just a rudimentary working knowledge of JavaScript and the associated web design technologies, but powerful and robust enough to satisfy the needs of the most aspiring and demanding developers amongst you.
The library will be of interest primarily to front-end developers, as the main aim of the YUI is to provide a framework within which robust and attractive interfaces can be quickly and easily designed and built. It can help you to side-step what can otherwise be insurmountable compatibility issues.
There is no set standard that says you must know this much or that much before you can begin to use the YUI. However, the more you know and understand about JavaScript itself, the more the library will make sense to you and the more that you will be able to gain from using it.
Trying to learn how to make use of the YUI without first knowing about the JavaScript language itself, at least to a basic working standard, is an endeavour likely to end in frustration and disappointment. It would be a great shame if a lack of understanding prevented you from enjoying the benefits that using the library can bring to both your creativity and creations.
So to get the most out of the YUI, you do need to have at least a basic understanding of JavaScript and the principles of object oriented programming. However, a basic working understanding is all that is required and those developers that have less knowledge of scripting will undoubtedly find that they come out of the experience of developing with the YUI knowing a whole lot more than they did to begin with.
The YUI can teach you advanced JavaScript scripting methods, coding and security best practices, and more efficient ways of doing what you want to do. It will even help more advanced programmers streamline their code and dramatically reduce their development time, so everyone can get something from it.
For some, the YUI is also a challenge; it's an excellent opportunity for developers to get involved in a growing community that is creating something inspiring. The Firefox browser is a great example of an open-source, community-driven, collaborative effort of separate but like-minded individuals. Some people may not want to develop web pages or web applications using the library: they may just want to be involved in evolving it to an even greater accomplishment.
I should also point out at this stage that like the library itself, this book expects you to have a prior knowledge and understanding of JavaScript, HTML, and CSS. While the use of the utilities, controls, and CSS tools will be explained in detail throughout the book, any HTML, CSS, or PHP code that is featured in any of the examples may not be explained in detail. Other skills, such as the ability to install and configure a web server, are also required.
Why the Yahoo! User Interface Library?
Using any JavaScript library can save you great amounts of time and frustration when coding by hand, and can allow you to implement features that you may not have the knowledge or skill to make use of. But why should you use the YUI rather than the many other libraries available?
To start with, as I'm sure you already know, Yahoo! is extremely well established, and at the forefront of cutting edge web technology and front-end design principles. The utilities and controls provided by the library have already been tried and tested in their world-class service provision environment. Hence you know that the components are going to work, and work in the way that you expect them to work and that Yahoo! says that they will.
The YUI library is not the only developer-centric offering to come from these world-class leaders and go on to achieve high levels of accomplishment and a following amongst developers; other very successful projects include the extensive Design Pattern library, Yahoo! Widgets, and the Yahoo! Music Engine. They also have a wide range of APIs for you to experiment and work with, so they have already shown a commitment of providing open-source tools designed to succeed.
Additionally, the library has already been publicly available for over a year and in this time has undergone rapid and extensive improvement in the form of bug fixes and additional functionality. Overall, it is not still in beta stage, and has been proven to be an effective addition to your development toolset. Like the Mozilla and Firefox browsers, it has a huge, world-wide following of developers, all seeking to further enhance and improve it.
There are some libraries out there that have been developed which seek to alter the JavaScript language itself, building capabilities into the language that the developers felt should already have been present and extending the language in new and interesting ways.
While these libraries can provide additional functionality at a deeper and more integrated level, their use can often be hampered by technical implementation difficulties that will be too difficult to overcome for all but the most advanced and seasoned developers.
The YUI is not like this; it is extremely well documented, stuffed full of examples, and is extremely easy to use. It doesn't get bogged down in trying to alter the JavaScript language at a fundamental level, and instead sits on top of it as a complimentary extension.
There's also no reason why you can't use the YUI library in conjunction with other JavaScript libraries if a particular feature, such as the rounding of box corners as provided by MochiKit for example, is required in your application but not provided by the YUI.
Graded Browser Support
Whichever browser you prefer, there's one thing that I think we can all agree on; all browsers are not created equal. Differing support and a lack of common standards implementation are things that have confounded web developers for as long as there have been web developers.
Although the situation is improving with agreed standards from the W3C, and better and more consistent support for these standards, we are far from being in a position where we can write a bit of code and know that it is going to function on any of the many browsers in use.
There may never come a time when this can be said by developers, but with the YUI, you can already count on the fact that the most popular browsers in use, on all manner of operating systems, are going to be able to take full advantage of the features and functionality you wish to implement.
It doesn't, and can't be expected to support every single web browser that exists, but it does group together common browsers with common capabilities into a graded support framework that provides as much as it can to visitors whichever browser they happen to be using.
Every single browser in existence falls into one of the defined grades; the most common class of browser are the A-grade variety of browsers, which are the browsers that the creators of the library actively support. These are modern, generally standards compliant, and capable of rendering in full the enhanced visual fidelity and advanced interface functionality provided by the library as well as the inner core of content.
X-grade browsers are generally unknown and untested, and account for a wide range of less common, often highly specific browsers that are simply assumed to be able to access the full, enhanced experience. Any browser that has not been extensively tested by the YUI development team is automatically an X-grade browser regardless of its capabilities; IE7 on Vista was classed as X-grade for some time after its release simply because it had not been fully tested by the Yahoo! team.
C-grade browsers are able to access the base or core content and functionality of the library components, but cannot handle the enhanced content. These are browsers that are simply not supported by the library.
Currently, the complete spectrum of A-grade browsers supported by the library includes the following browser and platform configurations:
These 27 common configurations are able to make use of not just the core content of any applications we create with the YUI, but also all of the enhanced functionality brought on by the library. Any browser not on this list will still receive either an A or C-grade experience, but may be classed as an X-grade browser if it has not been extensively tested.
The graded browser support strategy is based on the notion of progressive enhancement as opposed to graceful degradation. "Graceful degradation" is a term that I'm sure you've heard at some point and involves designing content so that, when it breaks in older browsers, it retains some semblance of order.
This method involves designing a page with presentation in your supported browsers as your main priority while still allowing unsupported browsers to view at least some kind of representation of your content.
Progressive enhancement approaches the problem of supporting browsers with different capabilities from the other way by providing a core of accessible content and then building successive layers of presentation and enhanced functionality on top of this inner core of generalized support.
This screenshot shows how the Rich Text Editor control appears in a C-grade browser. Older readers may recognize the browser used in this experiment as Netscape Navigator version 4, a popular browser approximately a decade ago.
As you can see from this example, the inner core of the page content is a standard HTML<textarea> element, which is displayed completely normally. The page doesn't break, but the high fidelity content is not displayed. Using graceful degradation techniques, the browser would probably attempt to display the Editor, but it would probably look very poor and would certainly not function.
The following screenshot shows how the editor appears in an A-grade browser:
In a capable, supported browser the library can transform the<textarea> element into the full Rich Text Editor control. Now, the following screenshot shows exactly the same page in exactly the same browser but with JavaScript switched off:
Notice the similarity between a C-grade browser and an A-grade browser with JavaScript switched off.
The knowledge that has enabled Yahoo! to use the concept of graded browser support has been gained from wide variety of user-agents that hit their site every single day. They've been accessed by over 10,000 different software and platform configurations since they began focusing on who and how their portal is accessed.
Approximately 96% of this total have received an A-grade experience when using the Yahoo! site, leaving just three percent that are classed as C-grade, and a minimal one percent classed as X-grade.
What Comes with the YUI?
Some JavaScript libraries are condensed into a single script file such as the jQuery library. While this can make linking to them easier, it can be inefficient depending on how much of the library you actually use.
The YUI Library is split into its constituent components, making it easy to pick and mix which utilities and controls are used, and making it much more efficient to implement. In addition to the large collection of JavaScript files the library provides a great deal more.
The Library Topography
The library is currently divided into four distinct sections; the library core files, a series of utilities, a set of controls, and some excellent CSS tools. There are a total of 33 different components, at the time of writing, and the library is continually growing and being refined.
There are also three versions of most of the library's utilities and controls, including a full version of the underlying JavaScript file that powers each component, complete with white space and comments for better readability and understanding, which can help your learning and development.
As well as the full versions, there are also -min.js and -debug.js versions of all the utilities and controls; the min (for minified) files have had all white space and comments removed, and variable names have been shortened where possible to cut down drastically on file size.
The min versions of each component are the ones served by Yahoo! and are perfect for production-release applications. These are the ones that you should be using most of the time in your own implementations, and the ones that we will be using throughout for most of the coding examples included in this book.
The debug version of each component is designed to be used in conjunction with the Logger Control rather than presented to your visitors. Along with white space and comments, these files also contain additional code which logs messages to the Logger console during key interactions within the components.
The differences between the full and min versions of each file can be quite large, with the min versions often being less than half the size of the full version. The only comment in each of the min files is the copyright notice, which has to stay intact in every file. Other than that, these files are pretty much solid chunks of hard code and readability is therefore very poor.
There are also three different file designations that each component can be classed as; fully released components are termed GA (for General Availability). GA components are typically the oldest, have been tested extensively, and had most of the bugs weeded out. They are reliable and have been considerably refined.
Beta designated utilities and controls are still in the process of being ironed out, but they have been released to the development community for wider testing, bug highlighting, and feature suggestion.
Any component termed experimental is still in the conceptual phase of its design and may or may not be promoted to Beta or GA status.
The Core Files
The core of the library consists of the following three files:
The Global Object sets up the Global YUI namespace and provides other core services to the rest of the utilities and controls. It's the foundational base of the library and is a dependant of all other library components (except for the CSS tools). A useful browser detection method is also available via this utility.
The DOM Collection provides a series of convenience methods that make working with the Document Object Model much easier and quicker. It adds useful selection tools, such as those for obtaining elements based on their class instead of an id, and smoothes out the inconsistencies between different browsers to make interacting with the DOM programmatically a much more agreeable experience.
The Event utility provides a unified event model that co-exists peacefully with all of the A-grade browsers in use today and offers a consistent method of accessing the event object. Most of the other utilities and controls also rely heavily upon the Event utility to function correctly.
Since the core files are required in most YUI implementations, they have been aggregated into a single file: yahoo-dom-event.js. Using this one file instead of three individual files helps to minimise the number of HTTP requests that are made by your application.
The Utilities
The utilities provide you with different sets of user-interface functionality that you can implement within your web pages. They provide programming logic and deal specifically with the behaviour and interactions between your visitors and the different objects and elements on your pages.
They are more of a concept that you begin with and then build upon, and they provide the foundation from which you create your vision. They provide unseen behaviour; for example, the Animation utility isn't something your visitors will see directly, but its effects on the element being animated will of course be visible.
Like the core files of the library, the utilities have all been rolled up into one easy to link to master file: utilities.js. Again, this can be used to make your application run more efficiently when using all of the utilities together.
The set of utilities included in the current release of the library (which is constantly changing and growing) are as follows:
The Controls
The controls on the other hand are a collection of pre-packaged objects that can be placed directly on the page as they are, with very little customization. Your visitors can then interact with them.
These are objects on the page that have properties that you can adjust and control, and are the cornerstone of any web-based user interface.
These controls will be highly recognisable to most visitors to your site and will require little or no learning in order to use. The complete suite of controls currently included with the library is:
The CSS Tools
The CSS Tools form the smallest, but by no means the least useful, component of the library. The utilities and controls are designed to be used almost independently (although some of the files do depend on other files in the library to function properly), but the CSS tools are designed to be used together (although they can also be used separately if desired) and provide a framework for standardising the visual representation of elements on the page.
The following four tools make up the current CSS section of the library:
The CSS tools have just two versions of each CSS file instead of three: a full version and a minimum version; there are no debug versions in this section of the library. Like with the yahoo-dom-event utility, some of the CSS files have also been combined into one file for your convenience. You can use reset-fonts-grids.css or reset-fonts.css depending on your requirements.
The Library's Structure
Once the library has been unpacked, you'll see that there are a series of folders within it; the build folder contains production-ready code that you can use immediately on your web site. This is where the code that makes each component work, and all of its associated resources, such as images and style-sheets can be found.
The docs directory contains the complete API documentation for every library component. This is where you can find the classes that make up each component, look at the underlying code, and review the properties and methods available to you.
The examples folder contains a series of demonstrative web pages that highlight the key functionality or behaviour of each library component and mirrors the example space found online.
The tests folder contains a series of pages which use the Logger Control to check that each component is functioning correctly for the platform on which it is being run. Each method for the component being tested is called, and the results are logged for you to examine.
Another set of folders that you'll need frequently when using the library controls are the assets folders. Each of the controls has its own assets folder which contains things like supporting images and style-sheets, as well as the sam skin files (if applicable) for display purposes.
There are some other files and folders within the library, such as an index for the library so that you can easily look for documentation or examples and release notes. The screenshot on the next page shows the folder structure of the library.
Due to the changing nature of the beta, and the experimental utilities and controls, we will not be looking at them in any great detail in this book. For information regarding any of these components, see the YUI site and API guides.
What Else Does Yahoo! Provide?
There are some additional resources that are available courtesy of Yahoo! to help you use the library to its maximum potential. There are a series of very helpful "Cheat Sheets" that you can view online from any of the individual component's information pages, and which have also been bundled up into a zip file for you to download for offline viewing.
These resources provide a useful and centralised reference manual which lists the key methods, properties, and syntax patterns of each of the fully released components and gives some basic examples of their implementation.
Some of the beta and experimental components do not have their own cheat sheets as these are still subject to change. The cheat sheets for the rest of the components however, are extremely useful and act as an invaluable reference whilst working with the library.
There is a discussion forum which developers can use to discuss their projects and get help from experts. It's not a proper forum as such; it's actually a Yahoo! Group, which is kind of like a cross between a forum and a mailing list.
Nevertheless, if you've got a problem with getting a utility or control to do what you want it to, you can search the list of messages in the group to see what you're doing wrong, or submit a question if there is no information listed.
If you're a member of any other Yahoo! Groups already, you just need to join the ydn-javascript group. If not, you'll need to sign up for a free Yahoo! account and then join the group. There are tens of thousands of registered members and the number is growing on a daily basis, so if you do have any problems and find that you need to ask a question, there's a very good chance that someone, including the library's creators, will be willing and able to help.
The forum is home to a growing community of developers that have been brought together by the YUI; community involvement is an excellent way to connect with developers and can take a project in new and impressive directions.
To keep up-to-date on developments in the YUI and read associated news statements and technical articles about the library and the Yahoo! Developer Network in general, or to watch screen casts from the development team and other experts, you can visit the YUI blog at http://yuiblog.com.
This is a companion blog not just for the YUI library but also for the Yahoo! Design Pattern Library. This is separate from the YUI and is not something that we'll be looking at in this book, but it is worth mentioning because the two libraries can be used together in many situations.
The entire selection of different video screencasts and podcasts are brought together in one place for easy searching in the YUI theatre. Both the blog and the theatre are subscribable via RSS, so that you can have up-to-date news and announcements surrounding the library.
There is also a section of the YUI site where you can look at the implementations of the library by other people and on other web sites. There are only a few showcase examples listed on this page, and some of the examples link to other parts of the Yahoo! network rather than to external sites, but there are a couple of high profile sites using YUI and this page can be a great place to find inspiration.
This page is also where you can find links to the online component examples. These are detailed examples that demonstrate the default, core abilities of each module in an uncluttered environment and have been provided by the actual developers of the utilities and controls.
Finally, there are a few interesting articles about different aspects of the library that can be found on the YUI developer site. The first article is an FAQ that provides some standard answers to some standard questions.
Other articles discuss topics such as Yahoo's approach to graded browser support, the benefits of serving library files from Yahoo! servers, and current best practice with regard to security measures.
For those of you that want to join the YUI development community and give something back to the Yahoo! Developers that have bestowed this awesome tool upon us, there is also the facility to submit bug reports or feature requests.
This is an excellent channel of feedback and as the YUI team point out, many useful features have been added to the library following a feature request. It also allows the team to remove errors and refine the features of existing components.
Are There Any Licensing Restrictions?
All of the utilities, controls, and CSS resources that make up the YUI have been publicly released, completely for free, under the open-source BSD license. This is a very unrestrictive license in general and is popular amongst the open-source community.
For those of you who don't know anything about what the license stands for and what it allows you to do, I'll give you quick overview now so that you need not worry about it again. Consider these next few paragraphs your education in open-source software licensing!
BSD stands for Berkeley Software Distribution and was originally designed and used by a team of developers who created an open-source operating system of the same name that was similar in many ways to the UNIX platform (and even shared part of its code-base with it). Many of today's most popular operating systems, including Windows and OSX are derived from or contain code from the original BSD operating system.
The current BSD version, sometimes known as the New BSD license, differs from the original in that it has had the restrictive UC Berkeley advertising clause removed, making it almost equivalent to the MIT license but with the addition of a brief final clause prohibiting the use of the copyright owners name for endorsement without obtaining prior consent.
This means that you can pretty much do whatever you want to do with the library source code; you can use it as it is, you can modify it as you wish, add to it, or even remove bits. You can use the files in the format in which they are provided, or you can use the code within them in the distribution of a compiled, closed-source application.
You can use it in your own personal projects, as part of a commercial venture or even within an educational framework. You can do all of this provided that you retain the copyright notice in your source code, or the copyright notice present on each of the library files remains intact.
If you're using the library files as the original JavaScript files as they come in the library, all you need to do is make sure that the existing copyright notice is left at the top of every file that you use. In a compiled application, it should be clearly visible in the help section or user manual.
Installing the YUI
The YUI is not an application in its own right, and it doesn't need to be installed as such. Getting started with the YUI is extremely simple; you first choose whether to download all of the source files from Yahoo and use them locally as part of your web sites' hierarchy, or whether to use the URLs provided on the YUI developer pages to reference the library files stored on Yahoo's web server.
These are the exact same files that are used in many different interface implementations across the Yahoo! network and as such can be depended on for being almost continuously available, and even if Yahoo! does decide to take these files down at some point in the future, I'm sure that this will be announced in a timely manner.
Another benefit of using Yahoo's network bandwidth to provide the functionality behind your application is that their network is global in nature, with servers running in many geographically distinct parts of the world.
Being able to serve library files from a location closer to your visitors' location results in a better response from your application; this is good news for your visitors and therefore good news for your business.
Additionally, as I mentioned earlier, there are different versions of each of the working files in the library including a 'minified' file that has been stripped of whitespace and comment blocks. The Yahoo servers provide these minified versions of the files, but in addition, they also serve the files in a GZIP format, making the files up to 90% smaller and therefore, much more efficient for transportation across the Internet. Finally, Yahoo! also helps the cache hit rates by issuing expires headers with expiration dates set far in the future. But best of all, these benefits are all provided for free.
If you've decided that you want to download the YUI in its entirety, you'll find a link on the YUI home page at http://developer.yahoo.com/yui which will lead you to the library's project site at SourceForge.net.
SourceForge is renowned as the world's largest open-source software development site and currently host over 100,000 different projects. All you really need from there is the library itself as virtually all of the documentation and useful information resides on the YUI site on the Yahoo! portal.
