Yui- Yahoo! User Interface Library
-
date post
21-Oct-2014 -
Category
Technology
-
view
6.586 -
download
1
description
Transcript of Yui- Yahoo! User Interface Library
A presentation by
Yahoo! User Interface Library
YUI
I. what is YUI?
II. what does it all mean?
III. what does it look like?
IV. who uses YUI?
V. want to get some?
contents
A presentation by
a collection of JavaScript and CSS Resources for building richly interactive web applications using DOM scripting and DHTML and AJAX.
developed for internal use but now available under a BSD (Berkeley Software Distribution) license.
supported by Firefox 3, Firefox 2, IE 7, IE 6, Opera 9.5, Safari 3.1.
what is YUI?
A presentation by
features of YUI 6 types of YUI components:
core
utilities
UI controls
CSS components
developer tools
build tools
what is YUI?
A presentation by
features of YUI (continued)
what does it all mean?
A presentation by
core: a set of tools for event management and DOM manipulation.
YAHOO! Global Object – contains language utilities and other infrastructure for YUI.
DOM Collection – simplifies common DOM scripting tasks such as positioning and CSS Style Management.
Event Utility – provides developers easy & safe access to browser events such as mouse clicks and key presses.
features of YUI (continued)
what does it all mean?
A presentation by
utilities: reusable infrastructure libraries that handle things like events, Ajax calls, animation, and drag and drop.
• animation
• browser history manager
• connection manager
• data source
• drag and drop
• image loader
• JSON (JavaScript Object Notation)
• resize
• selector
• YUI loader
features of YUI (continued)
what does it all mean?
A presentation by
UI controls: • auto-complete
• button
• calendar
• charts
• color picker
• container
• data table
• image cropper
• layout manager menu
• rich text editor
• slider
• tab view
• tree view
• uploaded
features of YUI (continued)
what does it all mean?
A presentation by
developer tools: logger – read or write log messages with a single line of code!
profiler – non-visual code profiler that allows you to specify which parts of your application to profile.
ProfileViewer – used with Profiler to provide visualizations of profiling data in graphical and tabular format.
YUI Test – create test cases, failure detection, etc. for browser-based JavaScript solutions.
working examples:
what does it look like?
A presentation by
event utility- http://developer.yahoo.com/yui/examples/event/eventsimple.html
using custom units for an animation-http://developer.yahoo.com/yui/examples/animation/units.html
basic drag and drop- http://developer.yahoo.com/yui/examples/dragdrop/dd-basic.html
animated proxy re-size- http://developer.yahoo.com/yui/examples/resize/anim_resize.html
submit form-http://developer.yahoo.com/yui/examples/button/btn_example05.html
http://www.linkedin.com/
http://www.jetblue.com/
http://www.target.com/
http://www.smugmug.com/
http://www.southwest.com/
http://images.insuggest.com/
http://www.dataffect.com/usgs/#
http://www.tag4you.com/flickr.php
who uses YUI?
A presentation by