• Like
Introducing YUI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Introducing YUI

  • 5,356 views
Published

An introduction to YUI and some examples of how to use it to solve daily problems in web design. A talk given at the University in Bucharest and partly re-hashed on the flight from my Ajax Experience …

An introduction to YUI and some examples of how to use it to solve daily problems in web design. A talk given at the University in Bucharest and partly re-hashed on the flight from my Ajax Experience talk.

Published in Education , Technology
  • 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
5,356
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
237
Comments
0
Likes
16

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. Introducing YUI Christian Heilmann Bucharest, Romania, November 2008
  • 2. Hello there, I am Chris.
  • 3. I am here today to talk about the Yahoo User Interface library (YUI) http://developer.yahoo.com/yui/
  • 4. What is the most annoying thing about web development?
  • 5. The undefined environment.
  • 6. This is also the coolest thing about web development.
  • 7. Don’t ever delude yourself into thinking you can control what people see when they visit your web products.
  • 8. However, you want your products to work.
  • 9. The working bit is what I want to talk to you about.
  • 10. When you start writing a web document, you use HTML and hope browsers do things right.
  • 11. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <meta name=quot;descriptionquot; content=quot;Descriptionquot;> </head> <body> </body> </html>
  • 12. The right DOCTYPE, encoding and language is a great start.
  • 13. This is an unstyled document, right?
  • 14. Wrong.
  • 15. There is no such thing as an unstyled document.
  • 16. There is no such thing as an “unstyled page”.
  • 17. This differs from browser to browser and can be *very* annoying!
  • 18. Which is why YUI offers you reset.css http://developer.yahoo.com/yui/reset/
  • 19. Starting with a blank canvas is a good start.
  • 20. What about typography?
  • 21. Make it work across browsers with fonts.css http://developer.yahoo.com/yui/fonts/
  • 22. Even create layouts with grids.css http://developer.yahoo.com/yui/grids/
  • 23. All of this with one line of code pulling a document from the web.
  • 24. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <meta name=quot;descriptionquot; content=quot;Descriptionquot;> <link rel=quot;stylesheetquot; href=quot;http:// yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset- fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> </body> </html>
  • 25. What if that file is not available?
  • 26. First of all, this is not a single server, but a world-wide network of servers.
  • 27. Visitors of your site will get the files from the server geographically located nearest to them.
  • 28. This is Yahoo’s network, but you can also use Google’s! http://yuiblog.com/blog/2008/11/19/yui-google/
  • 29. http://developer.yahoo.com/yui/articles/hosting/
  • 30. If you like full control, then you can also host the files yourself (this will also make them work off-line!)
  • 31. Let’s play with grids a bit.
  • 32. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> <div id=quot;docquot; class=quot;yui-t4quot;> <div id=quot;hdquot;>Header</div> <div id=quot;bdquot;> <div id=quot;yui-mainquot;> <div class=quot;yui-bquot;> Main section </div> </div> <div class=quot;yui-bquot;> Sidebar </div> </div> <div id=quot;ftquot;><p>Footer</p></div> </div> </body> </html>
  • 33. You divide the document in three parts: a head, a body and a footer.
  • 34. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> <div id=quot;docquot; class=quot;yui-t4quot;> <div id=quot;hdquot;>Header</div> <div id=quot;bdquot;> <div id=quot;yui-mainquot;> <div class=quot;yui-bquot;> Main section </div> </div> <div class=quot;yui-bquot;> Sidebar </div> </div> <div id=quot;ftquot;><p>Footer</p></div> </div> </body> </html>
  • 35. You then define a side bar and a main part.
  • 36. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> <div id=quot;docquot; class=quot;yui-t4quot;> <div id=quot;hdquot;>Header</div> <div id=quot;bdquot;> <div id=quot;yui-mainquot;> <div class=quot;yui-bquot;> Main section </div> </div> <div class=quot;yui-bquot;> Sidebar </div> </div> <div id=quot;ftquot;><p>Footer</p></div> </div> </body> </html>
  • 37. Both are identical, the only difference is that the main part has to be wrapped in a DIV with the ID “yui-main”.
  • 38. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> <div id=quot;docquot; class=quot;yui-t4quot;> <div id=quot;hdquot;>Header</div> <div id=quot;bdquot;> <div id=quot;yui-mainquot;> <div class=quot;yui-bquot;> Main section </div> </div> <div class=quot;yui-bquot;> Sidebar </div> </div> <div id=quot;ftquot;><p>Footer</p></div> </div> </body> </html>
  • 39. The order of the two doesn’t matter!
  • 40. The sidebar is a predefined width, the main section takes up the rest of the space.
  • 41. You define the overall width of the document with an ID and the location and width of the sidebar with a class on the containing DIV.
  • 42. <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01//ENquot; quot;http://www.w3.org/TR/html4/strict.dtdquot;> <html lang=quot;enquot;> <head> <meta http-equiv=quot;Content-Typequot; content=quot;text/html; charset=utf-8quot; /> <title>Here’s my title</title> <link rel=quot;stylesheetquot; href=quot;http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.cssquot; type=quot;text/cssquot;> </head> <body> <div id=quot;docquot; class=quot;yui-t4quot;> <div id=quot;hdquot;>Header</div> <div id=quot;bdquot;> <div id=quot;yui-mainquot;> <div class=quot;yui-bquot;> Main section </div> </div> <div class=quot;yui-bquot;> Sidebar </div> </div> <div id=quot;ftquot;><p>Footer</p></div> </div> </body> </html>
  • 43. ID and width class, side and width #doc = 750px .yui-t1 = left 160px #doc2 = 950px .yui-t2 = left 180px #doc3 = 100% .yui-t3 = left 300px #doc4 = 974px .yui-t4 = right 180px .yui-t5 = right 240px .yui-t6 = right 300px
  • 44. You can add grid units inside the main section to divide it into horizontal columns.
  • 45. Check the docs at: http://developer.yahoo.com/yui/grids
  • 46. Or if you are lazy...
  • 47. Use the grids builder:
  • 48. http://developer.yahoo.com/yui/grids/builder/
  • 49. So where does this work?
  • 50. In all the browsers Yahoo has to support.
  • 51. Which are defined in our graded browser support: http://developer.yahoo.com/yui/articles/gbs/
  • 52. What if a new browser comes around?
  • 53. Chances are very high Yahoo will have to support it...
  • 54. ...so check the YUI blog and update your YUI CSS include. http://yuiblog.com
  • 55. Much faster than fixing everything yourself, right?
  • 56. What if HTML is not rich enough for your needs?
  • 57. Almost all *free* and *big* JavaScript libraries come with widgets that work and are proven in the market.
  • 58. YUI is of course one of them.
  • 59. AutoComplete Layout Manager Button Menu Calendar Paginator Carousel beta Rich Text Editor Charts [experimental] Slider Color Picker TabView Container TreeView DataTable Uploader [experimental] ImageCropper beta
  • 60. http://ui.jquery.com/ http://developer.yahoo.com/yui/ http://ui.jquery.com
  • 61. Of course the other thing the YUI makes a lot easier is using JavaScript.
  • 62. Both by fixing annoying browser bugs and by offering convenience methods.
  • 63. For example:
  • 64. Wouldn’t it be cool to not know when to use which size of the grid automatically?
  • 65. You can do that using YUI DOM. http://developer.yahoo.com/yui/dom
  • 66. Using the DOM component, I can read out what happens in the browser.
  • 67. I can get the dimensions of the window, the browser and of any element in the document - regardless of its positioning.
  • 68. Thus I can create a YUI grid that works with all kind of different browsers sizes.
  • 69. http://yuiblog.com/blog/2008/06/25/autogrids
  • 70. YAHOO.example.autoGrid = function(){ var container = YAHOO.util.Dom.get('doc') || YAHOO.util.Dom.get('doc2') || YAHOO.util.Dom.get('doc4') || YAHOO.util.Dom.get('doc3') || YAHOO.util.Dom.get('doc-custom'); if(container){ var sidebar = null; var classes = container.className; if(classes.match(/yui-t[1-3]|yui-left/)){ var sidebar = 'left'; } if(classes.match(/yui-t[4-6]|yui-right/)){ var sidebar = 'right'; } function switchGrid(){ var currentWidth = YAHOO.util.Dom.getViewportWidth();
  • 71. if(currentWidth > 950){ container.id = 'doc2'; if(sidebar){ container.className = sidebar === 'left' ? 'yui-t3' : 'yui-t6'; } } if(currentWidth < 950){ container.id = 'doc'; if(sidebar){ container.className = sidebar === 'left' ? 'yui-t2' : 'yui-t5'; } } if(currentWidth < 760){ container.id = 'doc3'; if(sidebar){ container.className = sidebar === 'left' ? 'yui-t1' : 'yui-t4'; } }
  • 72. if(currentWidth < 600){ container.id = 'doc3'; container.className = ''; } }; switchGrid(); function throttle(method, scope) { clearTimeout(method._tId); method._tId= setTimeout(function(){ method.call(scope); }, 100); }; YAHOO.util.Event.on(window,'resize',function(){ throttle(YAHOO.example.autoGrid.switchGrid,window); }); }; return { switchGrid:switchGrid }; }();
  • 73. What about monitoring the size of an element?
  • 74. position:fixed is sexy!
  • 75. It can however also render your site impossible to use.
  • 76. var YD = YAHOO.util.Dom; YAHOO.util.Event.onDOMReady(toggleMenu); YAHOO.util.Event.on(window,'resize',function(){ toggleMenu(); }); function toggleMenu(){ var sidebar = YD.getRegion('sb'); var browser = YD.getViewportHeight(); YD.setStyle('sb','position', browser < sidebar.bottom ? 'static' : 'fixed' ); }
  • 77. The DOM stepchild: Region
  • 78. Using Region I can find out the dimensions of an element.
  • 79. I can also find the region that is big enough to include two regions, or the one that is the intersection of the two.
  • 80. region example
  • 81. YAHOO.util.Event.onDOMReady(function(){ var YD = YAHOO.util.Dom; var r1 = YD.getRegion('region-one'); var r2 = YD.getRegion('region-two'); var i = r1.intersect(r2); var u = r1.union(r2); var intersect = document.createElement('div'); document.body.appendChild(intersect); YD.setStyle(intersect,'position','absolute'); YD.setStyle(intersect,'background','#c0c'); YD.setStyle(intersect,'width',i.right-i.left + 'px'); YD.setStyle(intersect,'height',i.bottom-i.top + 'px'); YD.setStyle(intersect,'z-index',100); YD.setXY(intersect,i);
  • 82. var union = document.createElement('div'); document.body.appendChild(union); YD.setStyle(union,'position','absolute'); YD.setStyle(union,'background','#000'); YD.setStyle(union,'opacity',.5); YD.setStyle(union,'width',u.right-u.left + 'px'); YD.setStyle(union,'height',u.bottom-u.top + 'px'); YD.setStyle(union,'z-index',90); YD.setXY(union,u); });
  • 83. This gives me full control to avoid any overlap!
  • 84. What about things the browser does not tell me?
  • 85. Wouldn’t it be cool to find out when the font is resized?
  • 86. http://alistapart.com/articles/fontresizing
  • 87. You can detect the font size in several ways:
  • 88. Include an element with a known size in ems and read its offsetHeight and offsetWidth in an interval...
  • 89. ...or use an iframe with em sizing off-screen and subscribe to its resize event.
  • 90. Or use the YUI container module anywhere on your page... :)
  • 91. YAHOO.namespace('example.container'); YAHOO.util.Event.onDOMReady(function(){ YAHOO.example.container.module1 = new YAHOO.widget.Panel( 'module1', { close:true, draggable:true, constraintoviewport:true } ); YAHOO.example.container.module1.render(); YAHOO.widget.Module.textResizeEvent.subscribe( function(o){ console.log('Text has been resized!') } ); });
  • 92. YAHOO.namespace('example.container'); YAHOO.util.Event.onDOMReady(function(){ YAHOO.example.container.module1 = new YAHOO.widget.Panel( 'module1', { close:true, draggable:true, constraintoviewport:true } ); YAHOO.example.container.module1.render(); YAHOO.widget.Module.textResizeEvent.subscribe( function(o){ console.log('Text has been resized!') } ); });
  • 93. This works with one feature of YUI event that is very close to my heart: Custom Events.
  • 94. Custom Events allow you to notify an unknown amount of listeners about what is happening...
  • 95. ... sending information not necessarily accessible to them when it happens.
  • 96. Every single YUI component has a lot of Custom Events you can subscribe to.
  • 97. Say for example you want to make sure to securely chain animation sequences...
  • 98. //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(); });
  • 99. //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(); });
  • 100. //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;); });
  • 101. Knowing when something happens and being able to react to it is much safer than assuming it worked.
  • 102. Knowledge is power.
  • 103. This is why YUI comes with a lot of tools to gain knowledge about what is happening under the hood of your application.
  • 104. YUI Logger gives you a cross- browser console to show values.
  • 105. Death to alert()!
  • 106. All YUI components come as a debug version which log everything that is going on to the logger.
  • 107. You can even include the logger on the fly with a bookmarklet.
  • 108. http://blog.rajatpandit.com/sandbox/yuilogger/index.html
  • 109. If you need even more control, there is the YUI profiler. http://developer.yahoo.com/yui/profiler/
  • 110. And the YUI test framework for test driven development. http://developer.yahoo.com/yui/yuitest/
  • 111. On a code level, YUI comes out-of-the-box with namespacing.
  • 112. Which – if used correctly – keeps large amounts of code readable and maintainable.
  • 113. YAHOO.lang also comes with a lot of validation methods to ensure things are what they are.
  • 114. So how is YUI good for professional and easy development?
  • 115. Built on agreed standards Separated into modules each dealing with one task Constant reporting of what is going on Own Debugging environment
  • 116. Here’s another small thing I prepared earlier:
  • 117. Using Event and Dom I can control the visible part:
  • 118. function move(e){ y = YAHOO.util.Event.getXY(e); if(y[1] > size){ render(y); } }; function render(y){ var d = YAHOO.util.Dom; var real = y[1] - d.getDocumentScrollTop(); d.setStyle(top,'height',real-size+'px'); d.setStyle(bottom,'top',real+size+'px'); var h = d.getViewportHeight() - real + size; d.setStyle(bottom,'height',h + 'px'); };
  • 119. http://yuiblog.com/blog/2008/09/30/reading-blinds/
  • 120. What does the future hold?
  • 121. YUI3 http://developer.yahoo.com/yui/3/
  • 122. Include on demand Multiple sandboxed instances in a page Modularity on CSS level (per element reset) Every event is a custom event
  • 123. THANKS! Christian Heilmann http://wait-till-i.com | http://scriptingenabled.org http://twitter.com/codepo8