YUI introduction to build hack interfaces

  • 2,788 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,788
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
60
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The Yahoo User Interface Library (YUI) Christian Heilmann | http://wait-till-i.com | http://scriptingenabled.org 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. http://developer.yahoo.com/yui/docs/
  • 19. And there are almost 300 examples to look at.
  • 20. http://developer.yahoo.com/yui/examples/
  • 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. http://developer.yahoo.com/yui/grids/builder/
  • 32. Step 2: Get some nice data, for example photos from Delhi.
  • 33. http://developer.yahoo.com/yql/console/
  • 34. Step 3: Find a nice way to display it – for example a Carousel
  • 35. http://developer.yahoo.com/yui/examples/ carousel/csl_circular.html
  • 36. Step 4: Add tabs for more content
  • 37. http://developer.yahoo.com/yui/tabview/
  • 38. Step 5: Add a menu for other pages
  • 39. http://developer.yahoo.com/yui/menu/
  • 40. Step 6: Add a Map!
  • 41. http://developer.yahoo.com/maps/ajax/
  • 42. And... L I A F
  • 43. http://yuiblog.com/blog/2006/12/14/maps-plus-yui/
  • 44. After you fixed that:
  • 45. http://isithackday.com/hacks/delhi/
  • 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 http://wait-till-i.com http://scriptingenabled.org http://twitter.com/codepo8