Yahoo User Interface Library 2.x Cookbook

Book Image

Yahoo User Interface Library 2.x Cookbook

By : Matt Snider

Book Image

Yahoo User Interface Library 2.x Cookbook

By: Matt Snider

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. Although you can create stylish Internet applications by modifying its default components, even advanced users find it challenging to create impressive feature-rich Internet applications using YUI.</p> <p>This book will help you learn how to use YUI 2.x to build richer, more interactive web applications that impress clients and wow your friends. It has recipes explaining over twenty-five YUI components, showing how to use them, and how to configure them to meet your needs. Each covered component will have extractable code samples that showcase the common ways that the component is used.</p> <p>The book starts by explaining the core features of YUI 2.x, the utilities that the rest of the library depends on and that will make your life easier. It then explains how to build UI components and make AJAX requests using the YUI framework. Each recipe will cover the most common ways to use a component, how to configure it, and then explain any other features that may be available. We wrap things up by looking at some of the recent beta components and explain how to use them, and how they may be useful on your web application.</p> <p>For each of the recipes, there is an introductory example, then more advanced examples, followed by an explanation of how the component works and what YUI is doing. For more experienced developers, most recipes also include additional discussion of the solution, explaining to further customize and enhance the component.</p>

Yahoo! User Interface 2.x Cookbook

Yahoo! User Interface 2.x Cookbook

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

USING YUI 2.x

Fetching the latest version of YUI 2.x

Letting YDN manage YUI dependencies dynamically

Configuring the YUILoader component

Letting YUI manage My Script dependencies

Importing JavaScript and CSS with the Get component

Configuring the Get component

Building namespaces

Including YUI CSS

Evaluating object types, the YUI way

Using hasOwnProperty to fix for...in loops

Extending JavaScript objects, the YUI way

Augmenting objects using YUI

Detecting client browser and platforms

Using the Cookie component

Using the JSON package

Using DOM and Selector Components

Using DOM and Selector Components

Searching the document

Searching for element children and siblings

Searching for element ancestors

Working with HTML classes

Modifying element styles and HTML attributes

Element positions and sizes

Using and comparing regions

Using advanced DOM functions

Using Selector to search the DOM

Using CSS 2 and 3 Selectors with YUI

Filtering and testing nodes using selector

Using Event Component

Using Event Component

Using YUI to attach JavaScript event listeners

Event normalization functions

Removing event listeners

Listening for key events

Using special YUI only events

Using YUI helper event functions

Using custom events

The simple way to add custom events to classes

Using Connection Component

Using Connection Component

Making your first AJAX request

Exploring the callback object properties

Exploring the response object properties

Handling event callback functions

Subscribing to connection events globally

Uploading files using Connection Manager

Making cross-domain AJAX requests

Other useful Connection Manager static function

Putting it all together

Using DataSource Component

Using DataSource Component

Simple examples of each DataSource type

Using the JavaScript array response type

Using the JSON response type

Using the XML ResponseType

Using the text response type

Using the HTML table response type

Exploring advanced DataSource features

Using Logger and YUI Test Components

Using Logger and YUI Test Components

Writing your first log statement

Exploring the Logger component

Configuring and using the LogReader class

Using the LogWriter component

Writing your first test case

How to use assertions

Simulating user actions in your tests

Using TestSuite to manage TestCases

Using TestRunner to run tests

Using Element and Button Components

Using Element and Button Components

Creating your first element object

Subscribing to events on element objects

Using AttributeProvider to attributes for classes

Manipulating the DOM using element objects

Creating your first button object

Using ButtonGroups to control related buttons

Using events with button and ButtonGroup objects

Using Menu Component

Using Menu Component

Creating your first Menu object

Grouping related MenuItems

Adding Submenus to your Menus

Traversing a Menu instance

Adding help text to your MenuItems

Configuring Menu and MenuItem instances

Subscribing to events on Menu objects

Using the ContextMenu Menu object

Using the MenuBar Menu object

Controlling a Menu using a Button object

Using Animation Component

Using Animation Component

Creating your first animation

Exploring the animation attributes

Using and writing easing functions

Subscribing to animation events

Animating colors

Animating with motion

Animating an element's scroll offset

Using Drag and Drop Component

Using Drag and Drop Component

Creating your first Drag and Drop element

Configuring and using Drag and Drop manager

Handling Drag and Drop events between DD and DDTarget objects

Limiting Drag and Drop interactions by grouping instances

Constraining drag elements within a region

Using drag handles

Limiting the drag element regions for dragging

Using Container Component

Using Container Component

Using Module, the foundation for all containers

Exploring Overlay, a foundation for all positioned containers

Creating a JavaScript driven tooltip

Exploring the Panel infrastructure

Showing on-demand forms with dialog

Replacing browser dialogs with SimpleDialog

Adding animation effects to your containers

Using DataTable Component

Using DataTable Component

Creating a simple DataTable

Defining DataTable columns

Custom cell formatting

Manipulating columns and rows

Sorting your DataTable

Paginating your DataTable

Scrolling your DataTable

Selecting rows, columns, and cells

Inline cell editing

Retrieving remote data for DataTable

Using TreeView Component

Using TreeView Component

Creating a simple TreeView

Defining node definitions

Navigating and searching the tree

Adding and removing nodes

Animating TreeView expand and collapse

Editing the content of a node

Handling TreeView events

Working with dynamic data

Creating custom node types

Other Useful Components

Other Useful Components

Using the Autocomplete component

Using the Calendar component

Using the History component

Using the Resize component

Using the Slider component

Using the TabView component

Some Interesting Beta Components

Some Interesting Beta Components

Using the SWF component

Using the SWFStore component

Using the Storage component

Using the StyleSheet component

Using the Charts component

Using the Uploader component

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Using YUI helper event functions

YUI events have four useful helpers functions: delegate, onAvailable, onContentReady, and onDOMReady. These functions augment how developers interact with the DOM. This recipe explains how they work.

Getting ready

To use the delegate function in this recipe, you will need to include the event-delegate and Selector components. Use the following DOM for the examples in this recipe:

<div id="myElementId">
<ul>
<li><a href="#" id="link1">Item Type One</a></li>
<li><a href="#" id="link2">Item Type Two</a></li>
<li><a href="#" id="link3">Item Type Three</a></li>
</ul>
</div>

How to do it...

Use event delegation to have a single handler for all three anchors:

YAHOO.util.Event.delegate("myElementId", "click", function(e, matchedElement, container) {
// The matchedElement is the default scope
alert("Default scope id: " + this.id);
alert("Clicked link id: " + matchedElement...