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.
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.
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.
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.
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
There are three styles for code. Code words in text are shown as follows: "we can also add the lang attribute to the opening<html> tag..."
A block of code will be set as follows:
//get the date components Var dates = args[0]; Var date = dates[0]; Var theYear = date[0]; Var theMonth = date[1]; Var theDay = date[2];
When we wish to draw your attention to a particular part of a code block, the relevant lines or items will be made bold:
<body>
<div id="doc3">
<div id="hd">This is your Header</div>
<div id="bd">This is the body
<div class="yui-b">This is the secondary block</div>
<div class="yui-main">
<div class="yui-b">This is the main block</div>
</div>
</div>
<div id="ft">This is your footer</div>
</div>
</body>
New terms and important words are introduced in a bold-type font. Words that you see on the screen, in menus or dialog boxes for example, appear in our text like this: " the default category of message is INFO".
Note
Tips and tricks appear like this.
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.
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.
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.
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.
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.