YUI 2.8: Learning the Library


YUI 2.8: Learning the Library
eBook: $26.99
Formats: PDF, PacktLib, ePub and Mobi formats
$22.94
save 15%!
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
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 : 404 pages [ 235mm x 191mm ]
Release Date : July 2010
ISBN : 1849510709
ISBN 13 : 9781849510707
Author(s) : Daniel Barreiro, Dan Wellman
Topics and Technologies : All Books, Web Development, Java, Open Source, Web Development


Table of Contents

Preface
Chapter 1: Getting Started with YUI
Chapter 2: Creating Consistency with the CSS Tools
Chapter 3: DOM Manipulation and Event Handling
Chapter 4: Calling Back Home
Chapter 5: Animation, the Browser History Manager, and Cookies
Chapter 6: Content Containers and Tabs
Chapter 7: Menus
Chapter 8: Buttons and Trees
Chapter 9: DataSource and AutoComplete
Chapter 10: DataTable
Chapter 11: Rich Text Editor
Chapter 12: Drag-and-Drop with the YUI
Chapter 13: Everyday Tools
Index
  • Chapter 1: Getting Started with 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 developer 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
      • Highly eventful
      • The DateMath class
    • Summary
  • Chapter 2: Creating Consistency with the CSS Tools
    • Tools of the trade
    • Element normalization with reset.css
      • Element rules
    • First base
    • Tidying up text with fonts.css
    • 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
      • The Region class
      • Additional useful Dom methods
      • Other classes
    • The Selector Utility
    • Listening for Events the easy (YUI) way
    • Event models
      • Old-styled events
    • YUI event capturing
      • Evolving event handlers
      • Reacting when appropriate
    • A look at the Event Utility
      • Listeners
      • Event delegation
      • Other plugins
    • Custom events
      • The evolution of Custom Events
      • EventProvider
      • Custom event basics
    • The Element Utility
      • Subclassing from Element
      • Adding custom methods and properties
      • Using AttributeProvider
    • Summary
  • Chapter 4: Calling Back Home
    • Introduction to Connection Manager
    • The XMLHttpRequest object interface
    • A closer look at the response object
    • The Callback object
    • Basic communication
      • Sending forms
      • Posting
    • Yahoo Query Language (YQL)
      • Overcoming the XDS restriction
      • Working with XML
      • Processing a JSON reply
      • Using JSONP with the Get utility
      • Loading library components via Get
    • Summary
  • Chapter 5: Animation, the Browser History Manager, and Cookies
    • Introducing the Animation Utility
      • The class structure of the Animation Utility
      • The Animation constructor
      • Animation's attributes
      • Custom Animation events
      • The subclasses
      • Additional classes
    • Using Animation to create an Accordion Widget
      • Listening to the end of the Animation
      • The CSS for Accordion
      • Using Element
    • Dealing with motion
  • Restoring the browser's expected functionality
    • The BHM class
    • Using BHM
    • The BHM script
  • Cookies
  • Summary
  • Chapter 6: Content Containers and Tabs
    • Meet the YUI Container family
      • Module
      • Overlay
      • Panel
      • Tooltip
      • Dialog
      • SimpleDialog
      • Container Effects
      • OverlayManager
    • Creating a Panel
    • Before we go on
    • Working with Dialogs
    • An "Are you sure?" SimpleDialog
    • Easy Tooltips
    • The YUI TabView Control
      • TabView classes
      • Class members
    • Adding tabs
      • The underlying markup
      • The JavaScript needed by TabView
    • Summary
  • Chapter 7: Menus
    • 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 markup
        • Formatting options
      • Creating the Menu object
    • Using the ContextMenu
      • ContextMenu scripting
      • Wiring up the backend
    • The application-style MenuBar
    • Summary
  • Chapter 8: 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
    • Using the Split Button type
      • Getting started
      • Scripting the Split Button
    • Tree-like structures with the TreeView Control
    • Planting the seed
      • An assortment of nodes
        • Reading from markup
      • TreeView members
      • Tree nodes
      • Custom information
      • Dynamic loading
      • Highlighting
    • Summary
  • Chapter 9: DataSource and AutoComplete
    • Tabular data sources
      • DataSource classes
        • HTML table
        • Simple array
        • Complex array
        • FunctionDataSource
        • Remote DataSource with text
        • Remote DataSource with JSON
        • Remote DataSource with XML
        • News reader examples
        • Meta information
      • Massaging unruly data
    • Look ahead with the AutoComplete Control
      • AutoComplete Constructor
    • Implementing AutoComplete
    • Summary
  • Chapter 10: DataTable
    • DataTable dependencies
    • DataTable classes
    • Creating a DataTable
      • Cell formatting
      • Responding to DataTable events
      • More column properties and methods
      • Column sorting
      • Cell editing
        • Server-side updating
      • DataTable methods
      • Paging
      • Server-side sorting and paging
      • Selection and highlighting
      • More DataTable configuration attributes
      • ScrollingDataTable
    • Summary
  • Chapter 11: Rich Text Editor
    • The two editors
    • A simple e-mail editor
      • Filtering the data
      • More validation
      • Improving the looks
      • Changing the toolbar
      • Adding a new toolbar button
      • Adding CSS styles
      • Changing the available fonts
    • Summary
  • Chapter 12: Drag-and-Drop with the YUI
    • Dynamic drag-and-drop without the hassle
    • DragDrop classes
      • Design considerations
      • Allowing your visitors to drag-and-drop
      • The constructor
      • Target practice
      • Get a handle on things
      • The drag-and-drop manager
      • Interaction modes
      • Constraints
      • Responding to DragDrop events
    • Implementing drag-and-drop
      • Scripting DragDrop
      • Creating a draggable product item
    • 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
    • The Resize utility
    • The Layout Manager
    • Summary
  • Chapter 13: Everyday Tools
    • Lint-free code
    • The Logger
      • The purpose of the –debug Library files
      • How the Logger can help you
    • Debugging
    • Watching bits go by
    • Seeking performance
      • YSlow
      • YUI Compressor
      • Images and Sprites
      • YUI Profiler
    • YUI Testing
      • Testing in multiple platforms
      • API Docs
    • Summary

Daniel Barreiro

Daniel Barreiro, screen-name Satyam, has been a very active member in the YUI forums, providing support, writing articles in the YUI Blog, and maintaining examples and further articles in his own site. A YUI Contributor, he is one of the few external developers to have a component included in the YUI 2 library.


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.

Sorry, we don't have any reviews for this title yet.

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

- 9 submitted: last submission 12 Mar 2013

Errata type: Typo | Page number: 363 | Errata date: 27 Aug 10

A period is missing after this sentence "The padding is necessary to prevent the text from overlapping the image".

 

Errata type: Typo | Page number: 42 | Errata date: 28 Aug 10

The function showcall() should be showcal().

 

Errata type: Others | Page number: 38 | Errata date: 20 Jan 11

In the very last paragraph, before the line of code, it says: .... we can add the following code beneath the .hide() method: It should have been: .... we can add the following code beneath the definition of the showCal() function

 

Errata type: Typo | Page number: 79 | Errata date: 24 Jan 11

There are two semicolons (;) after the third line of JS code: var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event;; There should be only one semicolon (;).

 

Errata type: Typo | Page number: 76 | Errata date: 25 Nov 11

"This all we need..." should be "This is all we need..."

 

Errata type: Typo | Page number: 90 | Errata date: 25 Nov 11

1st sentence of 1st paragraph, "...are not enough to for us, ..." should be "...are not enough for us,

 

Errata type: Typo | Page number: 116 | Errata date: 25 Nov 11

"... which makes no sense in makes no sense..." should be "which makes no sense"

 

Errata type: Typo | Page number: 122 | Errata date: 25 Nov 11

"..., the application still work;" should be "the application will still work;"

 

Errata type: Typo | Page number: 136 | Errata date: 25 Nov 11

"thee" should be "the

 

Errata type: Typo | Page number: 116 | Errata date: 30th December

"The Connection Manager does not handle synchronous communication, where everything is frozen until the reply comes, which makes no sense in makes no sense in a modern environment." should be "The Connection Manager does not handle synchronous communication, where everything is frozen until the reply comes, which makes no sense in a modern environment."

 

Errata type: Technical | Page number: 5,62,63 | Errata date: 30 Dec 11

class="yui-main" should be id="yui-main"

 

Errata type: Others | Page number: 77 | Errata date: 25 Nov 11

".document.getElementBy()" should be "document.getElementBy()" in 3rd paragraph, 4th line. ".checkInput()" should be "checkInput()" in 4th paragraph, 4th line.

 

Errata type: Others | Page number: 87 | Errata date: 25 Nov 11

6th line of 1st paragraph: `"auto".Region` should be `"auto". Region` In other words, add a space character between the two separate sentences.

 

Errata type: Others | Page number: 90 | Errata date: 25 Nov 11

1st sentence of 1st paragraph, "...are not enough to for us, ..." should be "...are not enough for us, ..."

 

Errata type: Others | Page number: 96 | Errata date: 25 Nov 11

7th line of 1st paragraph, "...are not removed automatically along the elements..." -- replace "along" with "from" or perhaps "along with".

 

Errata type: Others | Page number: 121 | Errata date: 25 Nov 11

1st line uses "squared.php" while in the code that follows uses "squarer.php".

 

Errata type: Others | Page number: 129 | Errata date: 25 Nov 11

1st paragraph from bottom on pages references the tag in the previous code yet this particular tag is missing from it (Although the tag is present).

 

Errata type: Others | Page number: 131 | Errata date: 25 Nov 11

2nd line of 1st paragraph: "three" should be "four".

 

Errata type: Others | Page number: 150 | Errata date: 25 Nov 11

"container" should be "contain" in last line of 1st paragraph.

 

Errata type: Others | Page number: 155 | Errata date: 25 Nov 11

Last paragraph: "...of the process or drawing such a curve." "or" should be "of" or "for".

 

Errata type: Others | Page number: 171 | Errata date: 26 Nov 11

1st bullet under Overlay: "constrainviewport" should be "constraintoviewport".

 

Errata type: Others | Page number: 163 | Errata date: 26 Nov 11

Last bullet: "pages" appears in the wrong font.

 

Errata type: Others | Page number: 164 | Errata date: 26 Nov 11

2nd paragraph from bottom, 1st sentence: "accepts" should be "accept".

 

Errata type: Others | Page number: 172 | Errata date: 26 Nov 11

4th bullet: "contextElement" should be "contextElementOrId" 5th bullet: "containerCorner" should be "overlayCorner" 7th bullet: "triggerEvents" should be "arrayOfTriggerEvents"

 

Errata type: Others | Page number: 174 | Errata date: 26 Nov 11

"DOM's .generateId() method" should be "Dom's .generateId() method"(See correct usage on pages 169 &171).

 

Errata type: Others | Page number: 177 | Errata date: 26 Nov 11

1st bullet: in addition to the six constants from YAHOO.widget.SimpleDialog, the string "none" is allowed (and is in fact the default value).

 

Errata type: Typo | Page number: 48| Errata date: 30 Oct 12

The line: "we want,just as we did to get the today's date." should read : "we want, just as we did to get today's date."

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

YUI 2.8: Learning the Library +    Openswan: Building and Integrating Virtual Private Networks =
50% Off
the second eBook
Price for both: $44.10

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

What you will learn from this book

  • Explore the YUI Library's 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
  • Use rich user interface controls
  • Communicate with external sources of data
  • Debug, maintain, and update applications

Examples included in the book:

  • Calendar interface
  • Autocomplete
  • Creating panels
  • Dialogs
  • Custom tooltips
  • Forms
  • Split button
  • TreeView Control
  • Browser History Manager with Calendar
  • Simple and custom animations
  • Creating tabs and adding content dynamically
  • Dragging and dropping
  • Implementing sliders
  • DataTable Control
  • Rich Text Editor
  • Creating Menus
  • Creating custom controls with Element
  • Connecting with web services and other sources

 

In Detail

The YUI Library is a set of utilities and controls written in JavaScript for building Rich Internet Applications, across all major browsers and independently of any server technology. There's a lot of functionality baked into YUI, but getting to and understanding that functionality is not for the faint of heart. This book gives you a clear picture of YUI through a step-by-step approach, packed with lots of examples.

YUI 2.8: Learning the Library covers all released (non-beta) components of the YUI 2.8 Library in detail with plenty of working examples, 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, showing its use to create complex, fully featured, cross-browser, Web 2.0 user interfaces. It has been updated from its first edition with the addition of several chapters covering several new controls and enriched with lots of experience of using them.

You will learn to create a number of powerful JavaScript controls that can be used straightaway in your own applications. Besides giving you a deep understanding 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. The final chapter describes many of the tools available to assist you the developer in debugging, maintaining, and ensuring the best quality in your code.

In this new edition, all the examples have been updated to use the most recent coding practices and style and new ones added to cover newer components. Since the basic documentation for the library is available online, the focus is on providing insight and experience.

The authors take the reader from beginner to advanced-level YUI usage and understanding.

The beginner to advanced-level guide for understanding the YUI library

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