Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

YUI Tidbits

2,230 views

Published on

A bunch of extremely simple but really useful YUI3 helpers.

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

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!

×