Yui Design Patterns

YUI Overview What is YUI? Why YUI? What are YUI Features?

YUI Design Pattern Library Design Patterns Examples from application

Where can I find more information about YUI Design Patterns?

The Yahoo User Interface (YUI) Library is a collection of JavaScript and CSS core resources that make it easier to build richly interactive applications in web browsers.

Set of Utilities and controls that enable web developers to quickly create DOM Scripting, AJAX, DHTML websites and web applications.

Simply a framework of JS, CSS, Design Patterns and Widgets.

Free software – Just download and use it.

Light and flexible

Safe and Maintainable

Fully documented

Name Spacing included

YUI IDE Support - Firefox 3/2, IE7/IE6, Opera 9.5, Safari 3.1, Supports the vast majority of browsers that are in general use.

Avoid Memory leaks, creative standards support and syntax oddities

Core components

Utilities

UI Controls

CSS Components

Developer Tools

Build Tools

DOM Collection & Events

• DOM positioning• CSS Style management• Browser events such as Mouse click and

Key press

Yahoo User Interface Utilities

• Animation Utility• Browser History Manager• Connection Manager• Data Source• Drag & Drop Utility• Image Loader, Color Picker• JSON ( JavaScript object notation )• YUI Loader

Yahoo Global Object

• Language utilities• YUI infrastructure

User Interface Controls

• Button, Calendar• Charts• Container• Data Table• Layout Manager• Tab View / Tree View

YUI Library?

Patterns originated as an architectural concept by Christopher Alexander (1977/79). In 1987, Kent Beck and Ward Cunningham began experimenting with the idea of applying patterns to programming

Design patterns gained popularity in computer science after the book Design Patterns: Elements of Reusable Object-Oriented Software was published in 1994 (Gamma et al.).

Documentation of Design Patterns

Design Pattern is a general reusable solution to a commonly occurring problem in software design

The design patterns are language-independent strategies for solving common object-oriented design problems

Solve a problem that can be used in many different situations – general solution to a variety of similar problems

Reusable templates for interaction design - pattern based approach to UI design

Ensure consistent designs that follow design best practices – letting you focus on content and user needs

Designers have reusable foundation to create interface designs, prototyping

Creational Design Patterns Ex: Abstract Factory, Factory, Singleton

Structural Design Patterns Ex: Adapter, Bridge, Composite, Decorator,

Facade Behavioral Design Patterns

Command, Iterator, Interpreter, etc. J2EE Patterns

MVC, Business Delegate, DAO, Front Controller, TO etc

AlphaNumeric Filter Links Animate Transition Auto Complete Breadcrumbs Brighten Transition Calendar Picker Collapse Transition Dim Transition

Drag & Drop Fade Out /Fade In

Transition Pagination Item / Search Module / Navigation Tabs Slide Transition Spotlight Transition Tool Tip Write Review

Problem: The user needs the ability to look up

information alphabetically within a large data set.

Rationale: Long lists that require extensive scrolling can

place a cognitive burden on the user and may also slow down page rendering. Breaking a list into alphabetical chunks, when appropriate, can make the experience easier and more responsive for the user.

On selection of letter links are filtered

Problem: The user needs to be able to navigate up (towards

the root page) and have an understanding of where he/she is in relation to the rest of the site

Solution: Display a horizontal list of labels starting with the

topmost page and continuing down the site's hierarchy to the current page

Rationale: Breadcrumbs provide context relative to the rest of

the site Breadcrumbs provide a way to navigate up the site

hierarchy

Problem: The designer needs to communicate that an object is of

secondary importance, not available or currently inactive.

Solution: Define two states: the brightened (normal) state and the

dimmed state The dimmed state should be visually distinct from the normal

state Rationale:

Color changes do not generate the same level of attention in the brain that movement changes generate. How much the dimming and brightening an area of the screen will get noticed is dependent on the speed of animation (faster is more eye-catching) and the contrast between the two states.

Problem: The designer wants to make a previously dimmed object the

point of focus, signal that it is now active now available Solution:

Define two states: the dimmed state and the brightened state.

Set the brightened state at 100% opacity (alpha) Set the animation speed between the state

Rationale: Color changes do not generate the same level of attention in

the brain that movement changes generate. How much attention the dimming and brightening of an area on the screen will get is dependent on the speed of animation (faster is more eye-catching) and the contrast between the two states (greater contrast; more attention).

Problem: The user needs to enter an item into a text box which could

ambiguous or hard to remember and therefore has the potential to be mis-typed

Solution: Design the layout and interaction

Rationale: Reducing the number of keystrokes allows for faster user input. Showing additional formatting information in the suggested

items list (like the email address in the example above) removes ambiguity.

Continual feedback helps the user narrow in on the correct

choice.

Type text in the search box

Problem: The designer needs to communicate that an object is no

longer of primary importance, yet wants to keep it available in a smaller form.

Solution: Decrease the size of an object while animating the in-between

sizes (tweening). Shrink should happen very quickly.

Rationale: Collapsing preserves real estate on the screen. The downside

is that its content is either un-readable or less readable. Collapse is visually more eye-catching than a Dim Transition,

especially when combined with the move transition. Movement is more easily detected in the peripheral than color changes.

Problem: The user needs needs to re-arrange the layout of

modules on a web page directly with the mouse. Solution:

The complexity lies in the number of event states (we call these event states interesting moments) that can be used in a specific drag and drop sequence.

Page generation, Mouse hover over draggable object , Drag initiated, Drag over a valid target area, Drag over an invalid target area, Drag over the original location , Drop accepted , Drop rejected , Drop back on original location

Problem: The user needs to view data items from a

potentially large set of sorted data that will not be easy to display within a single page

Solution:

Break the list of items into a sequence of pages.

Provide links to access the previous and next pages of information.

Provide links to jump to the first and last pages in the set.

Provide information about what type of object the user is browsing.

Present links in the following order: First, Previous, Next, Last.

Yahoo Global Object Dom Collection Event

• Connection Manager

• Data Source

• Animation

YUI Core

YUI Utilities

AJAX Shorthand for Asynchronous JavaScript and XML With Ajax, web applications can retrieve data

from the server asynchronously in the background without interfering with the display and behavior of the existing page

Despite the name, the use of JavaScript and XML is not actually required, nor do the requests need to be asynchronous

The Yahoo! UI Library or YUI The 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

AJAXhttp://en.wikipedia.org/wiki/

Ajax_(programming) YUI Patternshttp://developer.yahoo.com/ypatterns/ YUI Documentationhttp://developer.yahoo.com/yui/