You are previewing Learning the Yahoo! User Interface Library: Get started and get to grips with the YUI JavaScript development library!.
O'Reilly logo
Learning the Yahoo! User Interface Library: Get started and get to grips with the YUI JavaScript development library!

Book Description

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. 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

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 written 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.

Table of Contents

  1. Learning the Yahoo! User Interface Library
  2. Credits
  3. About the Author
  4. Preface
    1. What This Book Covers
    2. What You Need for This Book
    3. Who is This Book for
    4. Conventions
    5. Reader Feedback
    6. Customer Support
      1. Downloading the Example Code for the Book
      2. Errata
      3. Questions
  5. 1. Introducing the YUI
    1. What is the YUI?
      1. Who Is It for and Who Will It Benefit the Most?
      2. Why the Yahoo! User Interface Library?
      3. Graded Browser Support
    2. What Comes with the YUI?
      1. The Library Topography
      2. The´╗┐ Core Files
      3. The Utilities
      4. The Controls
      5. The CSS Tools
      6. The Library's Structure
      7. What Else Does Yahoo! Provide?
      8. Are There Any Licensing Restrictions?
    3. Installing the YUI
      1. Creating an Offline Library Repository
    4. Using the Library Files in Your Own Web Pages
    5. Code Placement
    6. Perfect Date Selection with the Calendar Control
      1. The Basic Calendar Class
      2. The CalendarGroup Class
    7. Implementing a Calendar
      1. The Initial HTML Page
      2. Beginning the Scripting
      3. Highly Eventful
      4. The DateMath Class
    8. Summary
  6. 2. Creating Consistency With The CSS Tools
    1. Tools of the Trade
    2. Element Normalisation with reset.css
      1. Element Rules
    3. First Base
      1. Headings
      2. Lists
      3. Tables
      4. Miscellaneous Rules
    4. Tidying up Text with fonts.css
      1. The Body
      2. Tables
    5. Layout Pages with Ease Using grids.css
      1. Setting up Your Page Structure
      2. The Basic Building Blocks of Your Pages
      3. Grid Nesting
    6. A Word on Sam
    7. Summary
  7. 3. DOM Manipulation and Event Handling
    1. Working with the DOM
      1. DOM Concepts
    2. Common DOM Scripting Techniques
      1. Common DOM Methods
      2. Further Reading
      3. DOM—the Old Way
      4. DOM—the YUI Way
    3. DOM Manipulation in YUI
      1. Many DOMs Make Light Work
      2. The DOM Class
      3. Using the DOM Class
      4. Additional Useful DOM Methods
      5. The Region Class
      6. I See Your Point
    4. Listening for Events the Easy (YUI) Way
    5. Event Models
      1. Event History
      2. W3C Events
      3. The Event Object
    6. YUI Event Capturing
      1. Evolving Event Handlers
      2. Reacting When Appropriate
    7. A Look at the Event Class
      1. Listeners
    8. Custom Events
      1. The Custom Event Class
    9. Creating a Custom Event
    10. Summary
  8. 4. AJAX and Connection Manager
    1. The Connection Manager—A Special Introduction
    2. The XMLHttpRequest Object Interface
    3. A Closer Look at the Response Object
    4. Managing the Response with a Callback Object
    5. Working with responseXML
      1. Adding the JavaScript
      2. Styling the Newsreader
    6. Useful Connection Methods
    7. A Login System Fronted by YUI
    8. Summary
  9. 5. Animation and the Browser History Manager
    1. Introducing the Animation Utility
      1. The Class Structure of the Animation Utility
      2. The Animation Constructor
      3. Animation's Properties
      4. Custom Animation Events
      5. The Subclasses
      6. Additional Classes
      7. Members of the Easing Class
    2. Using Animation to Create an Accordion Widget
      1. A Basic Animation Script
      2. Dealing With Motion
      3. Curvature
    3. Restoring the Browser's Expected Functionality
      1. The BHM Class
    4. Using BHM
      1. The BHM Script
    5. Summary
  10. 6. Buttons and Trees
    1. Why Use the YUI Button Family?
    2. Meet the Button Control
      1. YAHOO.widget.Button
      2. YAHOO.widget.ButtonGroup
    3. Using the Button Control
      1. Creating the YUI Button Objects
      2. Additional Button Types
    4. Using the Split Button Type
      1. Getting Started
      2. Scripting the Split Button
    5. Tree-like Structures with the TreeView Control
    6. Class of Nine
      1. YAHOO.widget.TreeView
      2. YAHOO.widget.Node
      3. YAHOO.widget.TextNode
      4. YAHOO.widget.HTMLNode
      5. YAHOO.widget.RootNode
      6. YAHOO.widget.MenuNode
      7. The Animation Classes
    7. Implementing a Tree
      1. Begin the Scripting
      2. Creating the Tree Nodes
      3. Drawing the Tree On-Screen
      4. Using Custom Icons
      5. Applying the Icon Styles
      6. Dynamic Nodes—Making the Library Work Harder
    8. Summary
  11. 7. Navigation and AutoComplete
    1. Common Navigation Structures
    2. Instant Menus—Just Add Water (or a Menu Control)
    3. The Menu Classes
      1. Menu Subclasses
      2. The MenuItem Class
      3. MenuItem Subclasses
    4. Creating a Basic Navigation Menu
      1. The Initial HTML Page
      2. The Underlying Menu Mark Up
      3. Creating the Menu Object
      4. Styling the Page
    5. Using the ContextMenu
      1. ContextMenu Scripting
      2. Wiring Up the Backend
    6. The Application-style MenuBar
    7. Look Ahead with the AutoComplete Control
      1. AutoComplete Components
      2. The Constructors
      3. Custom Styling and Visual Impact
      4. A Rich Event Portfolio
    8. Implementing AutoComplete
      1. Adding Bling to Your AutoComplete
    9. Working With Other DataSources
      1. Bring on the Data
      2. Now for Some PHP
    10. Summary
  12. 8. Content Containers and Tabs
    1. Meet the YUI Container Family
      1. Module
      2. Overlay
      3. Panel
      4. Tooltip
      5. Dialog
      6. SimpleDialog
      7. Container Effects
      8. OverlayManager
    2. Creating a Panel
      1. Preparation
      2. The New Code
    3. Working with Dialogs
      1. Preparation
      2. Additional Library files
      3. Changes to the HTML
      4. Some Additional CSS
      5. Dialog's Required JavaScript
      6. Extending the Dialog
      7. The PHP Needed by Dialog
    4. A Quick SimpleDialog
      1. Additonal JavaScript for SimpleDialog
    5. Easy Tooltips
      1. Preparation
      2. Overriding Sam
    6. The YUI TabView Control
      1. TabView Classes
      2. Properties, Methods, and Events
    7. Adding Tabs
      1. The Underlying Mark Up
      2. The JavaScript Needed by TabView
      3. A Little CSS
    8. Summary
  13. 9. Drag-and-Drop with the YUI
    1. Dynamic Drag-and-Drop without the Hassle
    2. The Different Components of Drag-and-Drop
      1. Design Considerations
      2. Events
      3. Allowing Your Visitors to Drag-and-Drop
    3. DragDrop Classes
      1. The Constructor
      2. Target Practice
      3. Get a Handle on Things
      4. The Drag-and-Drop Manager
      5. Interaction Modes
    4. Implementing Drag-and-Drop
      1. The Required CSS
      2. Scripting DragDrop
      3. Creating Individual Drag Objects
      4. Using DragDrop Events
      5. Additional CSS
      6. Extending the DDProxy Object
    5. Visual Selection with the Slider Control
      1. The Constructor and Factory Methods
      2. Class of Two
    6. A Very Simple Slider
      1. Getting Started
      2. Adding the CSS
      3. Adding the JavaScript
    7. Summary
  14. 10. Advanced Debugging with Logger
    1. The Purpose of Logger
    2. The Purpose of the —debug Library Files
    3. How the Logger Can Help You
      1. Debugging the Old Way
      2. Debugging the YUI Way
      3. Log Message Types
      4. Logger Layout
      5. Logger Styling
      6. Logger is not Omnipotent or Infallible!
    4. The Logger Classes
      1. LogMsg Structure
      2. Generate the UI Interface with LogReader
      3. The LogWriter Class
    5. How to Use Logger
    6. Component Debugging with Logger
    7. Logging with a Custom Class
    8. Summary