Learning the Yahoo! User Interface library
Formats:
save 40%!
save 37%!
Free Shipping!
| Also available on: |
|
- Improve your coding and productivity with the YUI Library
- Gain a thorough understanding of the YUI tools
- Learn from detailed examples for common tasks
Book Details
Language : EnglishPaperback : 380 pages [ 235mm x 191mm ]
Release Date : March 2008
ISBN : 1847192327
ISBN 13 : 9781847192325
Author(s) : Dan Wellman
Topics and Technologies : All Books, AJAX, Open Source, Web Development
Table of Contents
Preface
Chapter 1: Introducing the YUI
Chapter 2: Creating Consistency With The CSS Tools
Chapter 3: DOM Manipulation and Event Handling
Chapter 4: AJAX and Connection Manager
Chapter 5: Animation and the Browser History Manager
Chapter 6: Buttons and Trees
Chapter 7: Navigation and AutoComplete
Chapter 8: Content Containers and Tabs
Chapter 9: Drag-and-Drop with the YUI
Chapter 10: Advanced Debugging with Logger
Index
Dan Wellman
Code Downloads
Download the code and support files for this book.
Submit Errata
Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.
Errata
- 37 submitted: last submission 06 Jan 2012Errata type: Typo | Page number: 2
In the What this book covers section
4th paragraph 3rd line
recieving should be receiving
Errata type:Typo | Page number:5
In the Downloading the Example Code for the Book section:
1st line
downlad should be download
Errata type: Others | Page number: 26
SEO refers to Search Engine Optimization
Errata type: Code| Page number: 27
please change '<script src=...'
to
<script type="text/javascript" src=...'
Errata type: Code | Page number: 36
In the Code is states
Choose your Date Of Birth
Which should be
Enter your Date of Birth
Errata type: Typo | Page number: 38
The last line of the paragraph above the first code states: "add the following code directly after the showCall() function" Should be "add the following code directly after the showCal() function"
Errata type: Typo | Page number: 38
the code at the bottom of the page: //get the date components
Var dates = args[0];
Var date = dates[0];
Var theYear = date[0];
Var theMonth = date[1];
Var theDay = date[2];
Should be
//get the date components var dates = args[0];
var date = dates[0]
; var theYear = date[0];
var theMonth = date[1];
var theDay = date[2];
Errata type: Typo| Page number: 46
Third paragraph under the Heading "Tools of the Trade" says:
making them easier and more efficient to use together. resets.css and fonts.css have
been amalgamated into one file for your convenience
Should be making them easier and more efficient to use together. reset.css and fonts.css have
been amalgamated into one file for your convenience
Errata type: Language | Page number: 52
In the Lists section the first line states:
Ordered, unordered, and definition lists are given a left margin to indent them by
two lines. Should be
Ordered, unordered, and definition lists are given a left margin to indent them by
two spaces.
Errata type: Technical | Page number: 52
please change 'left-margin' to 'magin-left' in paragraph 6
Errata type: Technical| Page number: 52
Change 'bottom-margin' to 'margin-bottom' in paragraph 8
Errata type: Typo | Page number: 52
please change 'resets' to 'reset' in paragraph 2
Errata type: Typo| Page number: 55
please change 'resets CSS tool' to 'reset CSS tool' in the 4th paragraph
Errata type: Code | Page number: 59
In the code change:
href="reset-fonts-grids.css"
To
href="yui/build/reset-fonts-grids/reset-fonts-grids.css"
Errata type: Typo | Page number: 63
please change 'three' to 'four' in paragraph 2 first line
Errata type: Typo| Page number: 68
change 'resets-fonts-grids.css' to 'reset-fonts-grids.css
Errata type: Technical | Page number: 75
In the third paragraph change:
.document.getElementBy()
To
document.getElementById()
Errata type: Typo| Page number: 77
In the bulleted list of"Dom Manipulation in YUI" section change
getAnscestorByClassName
To
getAncestorByClassName
Errata type: Typo | Page number: 78
please change 'YAHOO.util.DOM' to 'YAHOO.util.Dom' in paragraph 4
Errata type: Technical | Page number: 79
Third and fourth paragraphs change
YAHOO.util.DOM
To
YAHOO.util.Dom
Errata type: Typo| Page number: 81
3rd paragraph:
"First, the veiwport ..."
should be
"First, the viewport ... "
Errata type: Typo | Page number: 83
in fourth paragraph change:
smoothes
To smooths
Errata type: Code| Page number:84
The Code sample reads <h2 class="header">Positional Methods</h2>
<p><span id="elemX">The X position of this div is: </span>
</p>
<p><span id="elemY">The Y position of this div is: </span></p>
<span>Move X to: </span> <span>Move Y to: </span> <button id="moveElem" type="button">Move this div!</button>
Should be
<h2 class="header">Positional Methods</h2>
<p><span id="elemX">The X position of this div is: </span>
</p> <p><span id="elemY">The Y position of this div is: </span>
</p>
<form id="form" action="" method=""> <span>Move X to: </span><input id="moveX" type="text"> <span>Move Y to: </span>
<input id="moveY" type="text">
Errata type:Technical | Page number: 90
In the first paragraph change
X and Y
To
x and y
Errata type: Typo | Page number: 107
4th paragraph: "...the response form the server."
form
Should be
from
Errata type: Typo | Page number: 123
//show succes message
succes
should be
success
Errata type: Technical| Page number: 130
The 6th paragraph says
Note that the use of the motion class results in paths that follow
straight lines
It should be
Note that the use of the YAHOO.util.Motion class results in paths that follow
straight lines
Errata type: Code | Page number: 131
in the first code sample change
Scroll
To
scroll
Errata type: Technical | Page number: 131
In the Additional Classes section there are 2 occurrences of motion in code font
which should be
YAHOO.util.Motion
Errata type: Typo| Page number: 143
last sentence change
mycall
To
mycal
Errata type: Code | Page number: 145
In the code sample
//set calendar page and render calendar
myCal.cfg.setProperty("pagedate", state);
myCal.render();
Should be
//set calendar page and render calendar
myCal.cfg.setProperty("pageDate", state);
myCal.render();
Errata type: Typo | Page number: 158
Creating the YUI Button Objects section:
2nd paragraph 1st line
YAHOO.widet.Button()
should be
YAHOO.widget.Button()
Errata type: Code | Page number: 185
The code
icon-drive {
padding-left:20px;
background:url(icons/drive.png) no-repeat;
}
icon-folder
{ padding-left:20px;
background:url(icons/folder.png) no-repeat;
}
Should be
.icon-drive {
padding-left:20px;
background:url(icons/drive.png) no-repeat;
}
.icon-folder {
padding-left:20px;
background:url(icons/folder.png) no-repeat;
}
Errata type: Technical| Page number: 190
In the fourth paragraph change
node
to newNode
and in the fifth paragraph change
nodes
to newNode
Errata type: Code| Page number: 191
The php script at the bottom of the page:
<?php
$dir = $_POST['dir'];
$dirHandle = opendir($dir);
while(($item = readdir($dirHandle)) !== false) {
$dirArray[] = $item;
}
closedir($action);
Should be:
<?php
$dir = $_POST['dir'];
$dirHandle = opendir($dir);
while(($item = readdir($dirHandle)) !== false) {
$dirArray[] = $item;
}
closedir($dirHandle);
Errata type: Technical | Page number: 281
Under the heading "A Little CSS"
.yui-sam-skin
should be
.yui-skin-sam
Errata type: Typo| Page number: 48
please change 'resets.css' to 'reset.css'
Sample chapters
You can view our sample chapters and prefaces of this title on PacktLib or download sample chapters in PDF format.
- Explore the YUI Library—utilities, controls, core files, and CSS tools
- Install the library and get up and running with it
- Handle DOM manipulation and scripting
- Get inside Event Handling with YUI
- Create consistent web pages using YUI CSS tools
- Work with Containers—implementation, skinning, adding transitions, and tabs
- Debug, maintain, and update applications with the Logger control
- Examples included in the book:
- Calendar interface
- Autocomplete
- Creating panels
- Dialogs
- Custom tooltips
- Forms
- Split button
- TreeView Control
- Browser History Manager with Calendar
- Simple animation
- Custom animation
- Creating tabs and adding content dynamically
- Dragging and dropping
- Implementing sliders
- Logger at work
- Logging custom classes
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.
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.
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.

