yui design patterns
DESCRIPTION
YUI Design Patterns - IntroductionTRANSCRIPT
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/