Learning the Yahoo! User Interface library


Learning the Yahoo! User Interface library
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$16.19
save 40%!
Print + free eBook + free PacktLib access to the book: $71.98    Print cover: $44.99
$44.99
save 37%!
Free Shipping!
UK, US, Europe and selected countries in Asia.
Also available on:
Overview
Table of Contents
Author
Reviews
Support
Sample Chapters
  • 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 : English
Paperback : 380 pages [ 235mm x 191mm ]
Release Date : March 2008
ISBN : 1847192327
ISBN 13 : 9781847192325
Author(s) : Dan Wellman
Topics and Technologies : All Books, Web Development, 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
  • Chapter 1: Introducing the YUI
    • What is the YUI?
      • Who Is It for and Who Will It Benefit the Most?
      • Why the Yahoo! User Interface Library?
      • Graded Browser Support
    • What Comes with the YUI?
      • The Library Topography
      • The Core Files
      • The Utilities
      • The Controls
      • The CSS Tools
      • The Library's Structure
      • What Else Does Yahoo! Provide?
      • Are There Any Licensing Restrictions?
    • Installing the YUI
      • Creating an Offline Library Repository
    • Using the Library Files in Your Own Web Pages
    • Code Placement
    • Perfect Date Selection with the Calendar Control
      • The Basic Calendar Class
      • The CalendarGroup Class
    • Implementing a Calendar
      • The Initial HTML Page
      • Beginning the Scripting
      • Highly Eventful
      • The DateMath Class
    • Summary
  • Chapter 2: Creating Consistency With The CSS Tools
    • Tools of the Trade
    • Element Normalisation with reset.css
      • Element Rules
    • First Base
      • Headings
      • Lists
      • Tables
      • Miscellaneous Rules
    • Tidying up Text with fonts.css
      • The Body
      • Tables
    • Layout Pages with Ease Using grids.css
      • Setting up Your Page Structure
      • The Basic Building Blocks of Your Pages
      • Grid Nesting
    • A Word on Sam
    • Summary
  • Chapter 3: DOM Manipulation and Event Handling
    • Working with the DOM
      • DOM Concepts
    • Common DOM Scripting Techniques
      • Common DOM Methods
      • Further Reading
      • DOM—the Old Way
      • DOM—the YUI Way
    • DOM Manipulation in YUI
      • Many DOMs Make Light Work
      • The DOM Class
      • Using the DOM Class
      • Additional Useful DOM Methods
      • The Region Class
      • I See Your Point
    • Listening for Events the Easy (YUI) Way
    • Event Models
      • Event History
      • W3C Events
      • The Event Object
    • YUI Event Capturing
      • Evolving Event Handlers
      • Reacting When Appropriate
    • A Look at the Event Class
      • Listeners
    • Custom Events
      • The Custom Event Class
    • Creating a Custom Event
    • Summary
  • Chapter 4: AJAX and Connection Manager
    • The Connection Manager—A Special Introduction
    • The XMLHttpRequest Object Interface
    • A Closer Look at the Response Object
    • Managing the Response with a Callback Object
    • Working with responseXML
      • Adding the JavaScript
      • Styling the Newsreader
    • Useful Connection Methods
    • A Login System Fronted by YUI
    • Summary
  • Chapter 5: Animation and the Browser History Manager
    • Introducing the Animation Utility
      • The Class Structure of the Animation Utility
      • The Animation Constructor
      • Animation's Properties
      • Custom Animation Events
      • The Subclasses
      • Additional Classes
      • Members of the Easing Class
    • Using Animation to Create an Accordion Widget
      • A Basic Animation Script
      • Dealing With Motion
      • Curvature
    • Restoring the Browser's Expected Functionality
      • The BHM Class
    • Using BHM
      • The BHM Script
    • Summary
  • Chapter 6: Buttons and Trees
    • Why Use the YUI Button Family?
    • Meet the Button Control
      • YAHOO.widget.Button
      • YAHOO.widget.ButtonGroup
    • Using the Button Control
      • Creating the YUI Button Objects
      • Additional Button Types
    • Using the Split Button Type
      • Getting Started
      • Scripting the Split Button
    • Tree-like Structures with the TreeView Control
    • Class of Nine
      • YAHOO.widget.TreeView
      • YAHOO.widget.Node
      • YAHOO.widget.TextNode
      • YAHOO.widget.HTMLNode
      • YAHOO.widget.RootNode
      • YAHOO.widget.MenuNode
      • The Animation Classes
    • Implementing a Tree
      • Begin the Scripting
      • Creating the Tree Nodes
      • Drawing the Tree On-Screen
      • Using Custom Icons
      • Applying the Icon Styles
      • Dynamic Nodes—Making the Library Work Harder
    • Summary
  • Chapter 7: Navigation and AutoComplete
    • Common Navigation Structures
    • Instant Menus—Just Add Water (or a Menu Control)
    • The Menu Classes
      • Menu Subclasses
      • The MenuItem Class
      • MenuItem Subclasses
    • Creating a Basic Navigation Menu
      • The Initial HTML Page
      • The Underlying Menu Mark Up
      • Creating the Menu Object
      • Styling the Page
    • Using the ContextMenu
      • ContextMenu Scripting
      • Wiring Up the Backend
    • The Application-style MenuBar
    • Look Ahead with the AutoComplete Control
      • AutoComplete Components
      • The Constructors
      • Custom Styling and Visual Impact
      • A Rich Event Portfolio
    • Implementing AutoComplete
      • Adding Bling to Your AutoComplete
    • Working With Other DataSources
      • Bring on the Data
      • Now for Some PHP
    • Summary
  • Chapter 8: Content Containers and Tabs
    • Meet the YUI Container Family
      • Module
      • Overlay
      • Panel
      • Tooltip
      • Dialog
      • SimpleDialog
      • Container Effects
      • OverlayManager
    • Creating a Panel
      • Preparation
      • The New Code
    • Working with Dialogs
      • Preparation
      • Additional Library files
      • Changes to the HTML
      • Some Additional CSS
      • Dialog's Required JavaScript
      • Extending the Dialog
      • The PHP Needed by Dialog
    • A Quick SimpleDialog
      • Additonal JavaScript for SimpleDialog
    • Easy Tooltips
      • Preparation
      • Overriding Sam
    • The YUI TabView Control
      • TabView Classes
      • Properties, Methods, and Events
    • Adding Tabs
      • The Underlying Mark Up
      • The JavaScript Needed by TabView
      • A Little CSS
    • Summary
  • Chapter 9: Drag-and-Drop with the YUI
    • Dynamic Drag-and-Drop without the Hassle
    • The Different Components of Drag-and-Drop
      • Design Considerations
      • Events
      • Allowing Your Visitors to Drag-and-Drop
    • DragDrop Classes
      • The Constructor
      • Target Practice
      • Get a Handle on Things
      • The Drag-and-Drop Manager
      • Interaction Modes
    • Implementing Drag-and-Drop
      • The Required CSS
      • Scripting DragDrop
      • Creating Individual Drag Objects
      • Using DragDrop Events
      • Additional CSS
      • Extending the DDProxy Object
    • Visual Selection with the Slider Control
      • The Constructor and Factory Methods
      • Class of Two
    • A Very Simple Slider
      • Getting Started
      • Adding the CSS
      • Adding the JavaScript
    • Summary
  • Chapter 10: Advanced Debugging with Logger
    • The Purpose of Logger
    • The Purpose of the –debug Library Files
    • How the Logger Can Help You
      • Debugging the Old Way
      • Debugging the YUI Way
      • Log Message Types
      • Logger Layout
      • Logger Styling
      • Logger is not Omnipotent or Infallible!
    • The Logger Classes
      • LogMsg Structure
      • Generate the UI Interface with LogReader
      • The LogWriter Class
    • How to Use Logger
    • Component Debugging with Logger
    • Logging with a Custom Class
    • Summary

Dan Wellman

Dan Wellman is an author and frontend engineer living on the South Coast of the UK and working in London. By day he works for Skype and has a blast writing application-grade JavaScript. By night he writes books and tutorials focused mainly on frontend web development. He is also a staff writer for the Tuts+ arm of the Envato network, and occasionally writes for .Net magazine. He's the proud father of four amazing children, and the grateful husband of a wonderful wife.

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 2012

Errata 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:&nbsp;</span>
</p>
<p><span id="elemY">The Y position of this div is:&nbsp;</span></p>
<span>Move X to:&nbsp;</span> <span>Move Y to:&nbsp;</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:&nbsp;</span>
</p> <p><span id="elemY">The Y position of this div is:&nbsp;</span>
</p>
<form id="form" action="" method=""> <span>Move X to:&nbsp;</span><input id="moveX" type="text"> <span>Move Y to:&nbsp;</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.

Frequently bought together

Learning the Yahoo! User Interface library +    IBM Rational Team Concert 2 Essentials =
50% Off
the second eBook
Price for both: $41.55

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book

  • 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

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.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software