YUI Tidbits

1,917 views
1,877 views

Published on

A bunch of extremely simple but really useful YUI3 helpers.

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,917
On SlideShare
0
From Embeds
0
Number of Embeds
584
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • A.K,.A a big waste of time
  • Community ResourcesHelping you be successful in using Yahoo! Web Services isn't just about code and documentation. We want to make it easy for developers to get in touch with us and others who are using our services to answer and ask questions, toss around ideas, and give your feedback on what services we could offer next.ForumsYDN General BoardsDesign PatternsHotJobsSearchYOSAPTMusicWidgetsGeoPlanetOpenIDY! GroupsAddress BookAnswersFireEagleDel.icio.usTrafficFlickrMailSearchBOSSMapsJavaScriptSilverlightMerchant SolutionsSearch MarketingExceptional PerformanceYUIJava.NetFlashYDN EUAuthPHPPythonRubyPerlEventsWant your tech event appear in the YDN 'Upcoming Events' stream on developer.yahoo.com homepage? List your event on Upcoming and then add it to the Yahoo! Developer Network group on Upcoming. If you are setting up a tech event for developers or designers and would like some Yahoo! involvement, please contact us.ExpertsYahoo! Developer Network is on the lookout for experts to share knowledge and help grow our developer communities. If you are interested in applying to moderate a *group* or forum and become an official expert, please contact us for more information. Remember, we pay in hugs, link-love and schwag only.BlogThe YDN blog is where we talk about our various Yahoo! developer offerings and YDN events around the world. Your comments welcome. If you have a suggestion for the blog or a blog post you'd like to write about your experiences using our APIs or services, let us know. We are particularly interested in posts using Yahoo! APIs, tools, webservices and coverage of tech events. If you need inspiration or want to run some ideas by us, please contact us.YDN TheaterYDN Theater is chock-full of API deep dives, developer interviews, cutting- edge technologies, and recaps of tech events you wish you hadn't missed. If you have an idea for a story, please contact us.
  • YUI Tidbits

    1. 1. YUI TIDBITS Jai Santhosh @jaisanth
    2. 2. What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
    3. 3. http://yuilibrary.com/
    4. 4. What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
    5. 5. Good Architecture!!
    6. 6. Few others
    7. 7. What’s in Smart Software?• Reliability• Maintainability• Compatibility• Extensibility
    8. 8. Y U NO SIMPLE?
    9. 9. http://yuilibrary.com/yui/docs/guides/
    10. 10. http://yuilibrary.com/yui/docs/guides/
    11. 11. What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
    12. 12. Getting YUI 3// http://yuilibrary.com/yui/docs/yui/<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>Getting YUI sandbox instanceYUI().use(function (Y) { // Your code here});
    13. 13. YUI() TidbitsYUI().use(function (Y) { Y.log(); Y.later(); Y.cached(); Y.UA Y.Lang});
    14. 14. Y.log(); Y.log(message);Console WidgetYUI().use(”console”, function(Y) { var myConsole = new Y.console(); myConsole.render(); Y.log(message);});
    15. 15. Y.dump();YUI().use(”dump”, function(Y) { Y.log(Y.dump(myObj));});
    16. 16. Y.later(); var timer = Y.later(50, gizmo, gizmo.foo); timer.cancel(); var args = [10, 20]; var timer = Y.later(50, gizmo, gizmo.foo, args);
    17. 17. Y.cached(); var cachedFoo = Y.cached(foo); var result = cachedFoo(arg1, arg2);
    18. 18. Y.cached(); var cachedFoo = Y.cached(foo); var result = cachedFoo(arg1, arg2);ClassnamemanagerYUI().use(”classnamemanager”, function(Y) { var sClass = new Y.ClassNameManager.getclassname(”button”, ”hover”); // sclass = ”yui-button-hover”});
    19. 19. Y.UAY.UA.geckoY.UA.osY.UA.mobileY.UA.secureY.UA.airY.UA.caja
    20. 20. Y.LangY.Lang.isString(something);Y.Lang.type(something);Y.Lang.trim(something);
    21. 21. Y.mix();Y.mix(obj1, obj2); obj1 obj2 name name foo() bar() baz()
    22. 22. Y.mix();Y.mix(obj1, obj2); obj1 obj2 name name foo() bar() bar() baz() baz()
    23. 23. Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name foo bar foo bar baz
    24. 24. Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo bar baz
    25. 25. Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo foo bar baz
    26. 26. Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo foo bar baz bar baz
    27. 27. Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo foo bar baz bar baz
    28. 28. OOP ModuleYUI().use(”oop”, function(Y) { Y.clone(); Y.aggregate(); Y.augment();});
    29. 29. Y.clone() var obj2 = Y.clone(obj1); obj2 obj1 bing bing bong bong foo foo bar bar baz baz
    30. 30. Y.aggregate()Y.aggregate(obj2, obj1); obj2 obj1 bing bing bong bong foo foo bar bam baz
    31. 31. Y.aggregate()Y.aggregate(obj2, obj1); obj2 obj1 bing bing bong bong foo foo bar bam bam baz baz
    32. 32. Y.augment() Y.augment(Y.ModelList, Y.ArrayList); var list = new Y.ModelList({ ... }); list.each(function (item) { ... });ModelList Constructor ArrayList listPrototype Prototype Constructor create create init Prototype init each each each item item Prototype item
    33. 33. Y.augment() Y.augment(Y.ModelList, Y.ArrayList); var list = new Y.ModelList({ ... }); list.each(function (item) { ... });ModelList Constructor ArrayList listPrototype Constructor each 1. Copy create init Prototype 2. Construct each each 3. Execute item item Prototype
    34. 34. Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd);
    35. 35. Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay overlay Constructor ATTRS Attributes Attributes x x y y
    36. 36. Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay Plugin.Dra overlay overlay.dd Constructor dd Attributes g Constructor ATTRS Attributes lock x x ATTRS Attributes y y lock
    37. 37. Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay Plugin.Dra overlay overlay.dd Constructor dd Attributes g Constructor ATTRS Attributes lock x x ATTRS y y lock
    38. 38. Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd); Overlay Plugin.Dra overlay overlay.dd Constructor dd Attributes g Constructor ATTRS Attributes lock x x ATTRS y y lock
    39. 39. Y.substitute()var greeting =Y.substitute("Hello, {who}!", { who: "World" });
    40. 40. Y.bind()Y.on(submit, Y.bind(function(e){ e.halt(); this.set(businessForDirections, null);}, this), #ymap-get-directions);
    41. 41. Y.delegate()Y.one(#ymap-get-directions).delegate("keypress", function(e) { ... }, >li.input);node.delegate("myNode|keypress”, function(e) { ... }, input);node.on("myNode|keypress”, function(e) { ... }, input);node.delegate("myNode|keypress”, function(e) { ... }, input);node.delegate("myNode|keypress”, function(e) { ... }, input);
    42. 42. Y.detach()node.delegate("myNode|keypress", function(e) { ... }, input);node.on("myNode|mouseenter", function(e) { ... });node.on("myNode|mouseleave", function(e) { ... });node.on("myNode|click", function(e) { ... });Y.detach("myNode|*");
    43. 43. Y.DoYUI().use("event-custom” , function(Y) { Y.Do.before(objClass.woo, obj1, foo); Y.Do.after(objClass.wee, obj2, bar);});
    44. 44. What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
    45. 45. References• http://yuilibrary.com/• Images from Google, Flickr • YUI Theater - http://www.youtube.com/yuilibrary INDUSTRIAL STRENGTH BUILT TO LAST!!
    46. 46. Questions?• Slides at http://slideshare.net/jaisanth/• jaisanth@• IRC freenode: #yui
    47. 47. THANK YOU!

    ×