Yahoo User Interface Library 2.x Cookbook

Yahoo User Interface Library 2.x Cookbook

By : Matt Snider

Buy this Book

Yahoo User Interface Library 2.x Cookbook

By: Matt Snider

Buy this Book

Overview of this book

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

Yahoo! User Interface 2.x Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

USING YUI 2.x

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

Introduction

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

4 star

3 star

2 star

1 star

Including YUI CSS

YUI contains several general CSS files that are useful for normalizing browser default style variations, font-sizes, and grid-based layouts. Additionally, many components also include a component-specific CSS files. While each component can be used without including the base CSS, for best results you should include them or incorporate them into your own CSS. This recipe will explore the global CSS files and explain how component-based CSS will work in the future.

How to do it...

To normalize variations in the default element styles across browsers, include:

<link href="pathToBuild/reset/reset-min.css" rel="stylesheet" type="text/css"/>

To set the base font-size of the Body element to 10 pixels, include:

<link href="pathToBuild/font/font-min.css" rel="stylesheet" type="text/css"/>

To set some intelligent default styles to various elements, include:

<link href="pathToBuild/base/base-min.css" rel="stylesheet" type="text/css"/>

To use YUI to manage your layout, include:

<link href="pathToBuild/grids/grids-min.css" rel="stylesheet" type="text/css"/>

To use grids create a Div element inside the Body element and add one of the "doc" IDs to it ("doc", "doc2", "doc3", "doc4"), use code similar to the following:

<div id="doc2">
<div class="hd">Put header here</div>
<div class="bd">Put body here</div>
<div class="ft">Put footer here</div>
</div>

Later in this book, we will include components which have their own custom CSS, such as the Logger component:

<link href="pathToBuild/logger/assets/skins/sam/logger.css" rel="stylesheet" type="text/css"/>

Components like Logger, will namespace all their styles below the"yui-skin-sam" class, and therefore require the"yui-skin-sam" to be added to an ancestor element of the component markup. Most developers choose to simply apply it to the Body element:

<body class="yui-skin-sam">
...
</body>

How it works...

The reset CSS file applies rules that remove styles, such as font-sizes, padding, margins, and borders that may be applied to various elements by the browser. This ensures that CSS rules will be the same across browsers, as all elements start being styled the same way. The rules in this file have been built by the web community and are found on many sites and in many CSS frameworks.

The fonts CSS file adjusts the font-size of the Body element so that 1em is exactly 10 pixels (or as approximately close to 10 as possible). This makes building sites that scale according to font-size much easier. There are also a few additional rules that correct rounding errors and style discrepancies on several elements.

The base CSS file applies some intelligent default styles, since all the defaults have been reset, such as header (H1, H2, etc.) tag font-sizes, bolding of the Strong element, and italicizing of the Em element.

The grids CSS file sets up rules that can be used to layout the page. The example in this recipe will be centered on the page with a 950 pixel width, and have simple textual content for the header, body, and footer. You can use grids to manage simple or nested columns, and even more complex document sections. To find out more about what you can do with grids, see: http://developer.yahoo.com/yui/grids/.

The CSS for components will be mentioned in their respective chapters, but it is important to remember that the files are generally located at "someComponent/assets/skins/sam/someComponent.css" and that the"yui-skin-sam" class needs to be applied to an ancestor of the component markup for the styles to be applied.

There's more...

Additionally, there are two convenient files that combine the minified versions of reset, font, and grid for use in your production environment:

<link href="pathToBuild/reset-fonts/reset-fonts.css" rel="stylesheet" type="text/css"/>
<link href="pathToBuild/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet" type="text/css"/>

Yahoo User Interface Library 2.x Cookbook

By : Matt Snider

Yahoo User Interface Library 2.x Cookbook

By: Matt Snider

Overview of this book

Related Content you might be interested in

Current Title:

Yahoo User Interface Library 2.x Cookbook

Including YUI CSS

How to do it...

How it works...

There's more...