2. contents
I. w is YUI?
hat
II. w does it all m
hat ean?
III. w does it look like?
hat
IV. w uses YUI?
ho
V. w to get som
ant e?
A presentation by
3. w is YUI?
hat
a collection of JavaScript and CSS Resources for
building richly interactive w applications
eb
using DOM scripting and DHTM and AJAX.
L
developed for internal use but nowavailable
under a BSD (Berkeley Software Distribution) license.
supported by Firefox 3, Firefox 2, IE 7, IE 6,
Opera 9.5, Safari 3.1.
A presentation by
4. w is YUI?
hat
features of YUI
6 types of YUI components:
core
utilities
UI controls
CSS components
developer tools
build tools
A presentation by
5. w does it all m
hat ean?
features of YUI (continued)
core:
a set of tools for event managem and DOM
ent
m anipulation.
YAHOO! Glo bal Obje c t –contains language utilities and
other infrastructure for YUI.
DOM Co lle c tio n –simplifies com on DOM scripting
m
tasks such as positioning and CSS Style Managem ent.
Eve nt Utility –provides developers easy & safe access
to brow events such as m
ser ouse clicks and key presses.
A presentation by
6. w does it all m
hat ean?
features of YUI (continued)
utilities:
reusable infrastructure libraries that handle things like
events, Ajax calls, anim ation, and drag and drop.
• animatio n • imag e lo ade r
• bro ws e r his to ry manag e r • JS ON (JavaScript Object Notation)
• c o nne c tio n manag e r • re s ize
• data s o urc e • s e le c to r
• drag and dro p • YUI lo ade r
A presentation by
7. w does it all m
hat ean?
features of YUI (continued)
UI controls:
• auto -c o mple te •imag e c ro ppe r
•butto n •layo ut manag e r me nu
•c ale ndar •ric h te xt e dito r
•c harts •s lide r
•c o lo r pic ke r •tab vie w
•c o ntaine r •tre e vie w
•data table •uplo ade d
A presentation by
8. w does it all m
hat ean?
features of YUI (continued)
developer tools:
lo g g e r –read or w log m
rite essages w a single line of
ith
code!
pro file r –non-visual code profiler that allow you to specify
s
which parts of your application to profile.
Pro file Vie we r –used w Profiler to provide visualizations of
ith
profiling data in graphical and tabular format.
YUI Te s t –create test cases, failure detection, etc. for
browser-based JavaScript solutions.
A presentation by
9. w does it look like?
hat
working examples:
e ve nt utility -
http://developer.yahoo.com/yui/examples/event/eventsimple.html
us ing c us to m units fo r an animatio n -
http://developer.yahoo.com/yui/examples/animation/units.html
bas ic drag and dro p -
http://developer.yahoo.com/yui/examples/dragdrop/dd-basic.html
animate d pro xy re -s ize - http://developer.yahoo.com/yui/examples/
resize/anim_resize.html
s ubmit fo rm -
http://developer.yahoo.com/yui/examples/button/btn_example05.html
A presentation by
10. w uses YUI?
ho
http ://www .linke din .c o m /
http ://www .je tblue .c o m /
http ://www .targ e t.c o m /
http ://www .s mug mug .c o m /
http ://www .s o uthwe s t.c o m /
http ://imag e s .ins ug g e s t.c o m /
http ://www .dataffe c t.c o m /us g s /#
http ://www .tag 4 yo u .c o m /flic kr.php
A presentation by
11. w to get som
ant e?
hello@momentumdesignlab.com
1.866.542.7124
A presentation by
