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

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.

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

AJAX http://en.wikipedia.org/wiki/Ajax_(programming) YUI Patterns http://developer.yahoo.com/ypatterns/ YUI Documentation http://developer.yahoo.com/yui/

Yui Design Patterns

More Related Content

Similar to Yui Design Patterns (20)

More from Madhuri Chopurala, CSPO, CSM (8)

Yui Design Patterns

Editor's Notes