Y U I(2)
- 1. YUI Yahoo! User Interface Library A presentation by
- 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