Book Image

Learning the Yahoo! User Interface library

By : Dan Wellman
Book Image

Learning the Yahoo! User Interface library

By: Dan Wellman

Overview of this book

<p>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.<br /><br />This book covers all released components whether utility, control, core file, or CSS tool.&nbsp; Methods of the YAHOO Global Object are used and discussed throughout the book.<br />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.<br /><br />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.<br /><br />You will learn to create a number of powerful JavaScript controls that can be used straight away in your own applications.</p>

Related Content you might be interested in

Current Title:

Small book image
Learning the Yahoo! User Interface library
Dan Wellman
Mar, 2008 | 380 pages
No titles found
Table of Contents (14 chapters)
Learning the Yahoo! User Interface Library
Learning the Yahoo! User Interface Library
Credits
Credits
About the Author
About the Author
Preface
Preface
Free Chapter
1
Introducing the YUI
Introducing the YUI
What is the YUI?
What Comes with the YUI?
Installing the YUI
Using the Library Files in Your Own Web Pages
Code Placement
Perfect Date Selection with the Calendar Control
Implementing a Calendar
Summary
2
Creating Consistency With The CSS Tools
Creating Consistency With The CSS Tools
Tools of the Trade
Element Normalisation with reset.css
First Base
Tidying up Text with fonts.css
Layout Pages with Ease Using grids.css
A Word on Sam
Summary
3
DOM Manipulation and Event Handling
DOM Manipulation and Event Handling
Working with the DOM
Common DOM Scripting Techniques
DOM Manipulation in YUI
Listening for Events the Easy (YUI) Way
Event Models
YUI Event Capturing
A Look at the Event Class
Custom Events
Creating a Custom Event
Summary
4
AJAX and Connection Manager
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
Useful Connection Methods
A Login System Fronted by YUI
Summary
5
Animation and the Browser History Manager
Animation and the Browser History Manager
Introducing the Animation Utility
Using Animation to Create an Accordion Widget
Restoring the Browser's Expected Functionality
Using BHM
Summary
6
Buttons and Trees
Buttons and Trees
Why Use the YUI Button Family?
Meet the Button Control
Using the Button Control
Using the Split Button Type
Tree-like Structures with the TreeView Control
Class of Nine
Implementing a Tree
Summary
7
Navigation and AutoComplete
Navigation and AutoComplete
Common Navigation Structures
Instant Menus—Just Add Water (or a Menu Control)
The Menu Classes
Creating a Basic Navigation Menu
Using the ContextMenu
The Application-style MenuBar
Look Ahead with the AutoComplete Control
Implementing AutoComplete
Working With Other DataSources
Summary
8
Content Containers and Tabs
Content Containers and Tabs
Meet the YUI Container Family
Creating a Panel
Working with Dialogs
A Quick SimpleDialog
Easy Tooltips
The YUI TabView Control
Adding Tabs
Summary
9
Drag-and-Drop with the YUI
Drag-and-Drop with the YUI
Dynamic Drag-and-Drop without the Hassle
The Different Components of Drag-and-Drop
DragDrop Classes
Implementing Drag-and-Drop
Visual Selection with the Slider Control
A Very Simple Slider
Summary
10
Advanced Debugging with Logger
Advanced Debugging with Logger
The Purpose of Logger
The Purpose of the —debug Library Files
How the Logger Can Help You
The Logger Classes
How to Use Logger
Component Debugging with Logger
Logging with a Custom Class
Summary

Chapter 5. Animation and the Browser History Manager

The Animation utility is used to add a variety of effects to your pages that can really bring your web application to life. It's a very easy component of the library to use, but delivers a powerful and robust mechanism by which elements can be made to grow, move, and even change color.

When using web-based applications that are based on DOM-scripted or AJAX-driven dynamic page changes, it is usually impossible to return to a previous page state using the back button of the browser. The Browser History Manager (BHM) utility provided in the YUI is the first step towards a web of online applications where the functionality of the back and forward browser buttons has been restored.

In this chapter we will look at:

  • Enhancing our pages with attractive animations

  • Why the BHM is needed and how it can be implemented

  • The different components of the BHM

  • Recording state changes

  • Retrieving bookmarked state

Introducing the Animation Utility

The Animation utility...

Previous Section
End of Section 1
Next Section