Your SlideShare is downloading. ×
YUI introduction to build hack interfaces
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

YUI introduction to build hack interfaces


Published on

Published in: Technology, Art & Photos

1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. The Yahoo User Interface Library (YUI) Christian Heilmann | | Delhi, India, University Hack Day, January 2009
  • 2. Let’s take a walk... ...on the client side
  • 3. The client side is where strange things happen.
  • 4. Browsers render in fascinating and totally wrong ways.
  • 5. Random code from dubious sources interferes with your godlike, clean and high quality code.
  • 6. ...and you fix more than you develop.
  • 7. The web is a total mess!
  • 8. The reason is that things seemingly work.
  • 9. However, you are not the web and neither is your computer.
  • 10. To make things work for Yahoo we needed to find a way to abstract these issues away from us.
  • 11. And this is why we built the YUI.
  • 12. YUI is a framework to build working web applications.
  • 13. It includes CSS solutions to create layouts that work across browsers and allow for predictable typography.
  • 14. And it takes the pain out of writing JavaScript.
  • 15. Last but very much not least it allows you to create applications using tested and working widgets that extend what HTML gives us.
  • 16. Interface Widgets AutoComplete DataTable Button Layout Calendar Menu Rich Text Charts TabView Container
  • 17. Everything is fully documented.
  • 18.
  • 19. And there are almost 300 examples to look at.
  • 20.
  • 21. The controls are driven by custom events to allow for extending and monitoring them.
  • 22. Say for example you want to make sure to securely chain animation sequences...
  • 23. //This is the first animation; this one will //fire when the button is clicked. var move = new YAHOO.util.Anim(quot;animatorquot;, { left: {from:0, to:75} }, 1); //This is the second animation; it will fire //when the first animation is complete. var changeColor = new YAHOO.util.ColorAnim( quot;animatorquot;, { backgroundColor: {from:quot;#003366quot;, to:quot;#ff0000quot;} }, 1); //Here's the chaining glue: We subscribe to the //first animation's onComplete event, and in //our handler we animate the second animation: move.onComplete.subscribe(function() { changeColor.animate(); });
  • 24. //Here we set up our YUI Button and subcribe to //its click event. When clicked, it will //animate the first animation: var start = new YAHOO.widget.Button(quot;startAnimquot;); start.subscribe(quot;clickquot;, function() { //reset the color value to the start so that //the animation can be run multiple times: YAHOO.util.Dom.setStyle(quot;animatorquot;, quot;backgroundColorquot;, quot;#003366quot;); move.animate(); });
  • 25. //You can also make use of the onStart and onTween //custom events in Animation; here, we'll log all //of changeColor's custom events and peek at their //argument signatures: changeColor.onStart.subscribe(function() { YAHOO.log(quot;changeColor animation is starting.quot;, quot;infoquot;, quot;examplequot;); }); changeColor.onTween.subscribe(function(s, o) { YAHOO.log(quot;changeColor onTween firing with these arguments: quot; + YAHOO.lang.dump(o), quot;infoquot;, quot;examplequot;); }); changeColor.onComplete.subscribe(function(s, o) { YAHOO.log(quot;changeColor onComplete firing with these arguments: quot; + YAHOO.lang.dump(o), quot;infoquot;, quot;examplequot;); });
  • 26. All YUI components come as a debug version which log everything that is going on to the logger.
  • 27. All in all YUI allows you to build web interfaces without having to know all the pain that goes on in the browser world.
  • 28. Built on agreed standards Separated into modules each dealing with one task Constant reporting of what is going on Own Debugging environment
  • 29. Let’s hack using YUI!
  • 30. Step 1: Get the page structure built for you.
  • 31.
  • 32. Step 2: Get some nice data, for example photos from Delhi.
  • 33.
  • 34. Step 3: Find a nice way to display it – for example a Carousel
  • 35. carousel/csl_circular.html
  • 36. Step 4: Add tabs for more content
  • 37.
  • 38. Step 5: Add a menu for other pages
  • 39.
  • 40. Step 6: Add a Map!
  • 41.
  • 42. And... L I A F
  • 43.
  • 44. After you fixed that:
  • 45.
  • 46. Of course this is a mashup, not a hack.
  • 47. It is also not creative at all and has been done to death!
  • 48. But it shows you how you can build a working interface
  • 49. THANKS! Christian Heilmann