YUI Tidbits
Upcoming SlideShare
Loading in...5
×
 

YUI Tidbits

on

  • 1,473 views

A bunch of extremely simple but really useful YUI3 helpers.

A bunch of extremely simple but really useful YUI3 helpers.

Statistics

Views

Total Views
1,473
Slideshare-icon Views on SlideShare
1,101
Embed Views
372

Actions

Likes
0
Downloads
17
Comments
0

6 Embeds 372

http://www.jaisanth.com 308
http://jaisanth.com 57
http://www.linkedin.com 4
http://us-w1.rockmelt.com 1
http://feeds.feedburner.com 1
https://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 YUI Tidbits Presentation Transcript

  • YUI TIDBITS Jai Santhosh @jaisanth
  • What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
  • http://yuilibrary.com/
  • What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
  • Good Architecture!!
  • Few others
  • What’s in Smart Software?• Reliability• Maintainability• Compatibility• Extensibility
  • Y U NO SIMPLE?
  • http://yuilibrary.com/yui/docs/guides/
  • http://yuilibrary.com/yui/docs/guides/
  • What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
  • 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});
  • YUI() TidbitsYUI().use(function (Y) { Y.log(); Y.later(); Y.cached(); Y.UA Y.Lang});
  • Y.log(); Y.log(message);Console WidgetYUI().use(”console”, function(Y) { var myConsole = new Y.console(); myConsole.render(); Y.log(message);});
  • Y.dump();YUI().use(”dump”, function(Y) { Y.log(Y.dump(myObj));});
  • 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);
  • Y.cached(); var cachedFoo = Y.cached(foo); var result = cachedFoo(arg1, arg2);
  • 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”});
  • Y.UAY.UA.geckoY.UA.osY.UA.mobileY.UA.secureY.UA.airY.UA.caja
  • Y.LangY.Lang.isString(something);Y.Lang.type(something);Y.Lang.trim(something);
  • Y.mix();Y.mix(obj1, obj2); obj1 obj2 name name foo() bar() baz()
  • Y.mix();Y.mix(obj1, obj2); obj1 obj2 name name foo() bar() bar() baz() baz()
  • Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name foo bar foo bar baz
  • Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo bar baz
  • Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo foo bar baz
  • Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo foo bar baz bar baz
  • Y.merge();var newObj = Y.merge(obj1, obj2, obj3); newObj obj1 obj2 obj3 name name foo bar foo foo bar baz bar baz
  • OOP ModuleYUI().use(”oop”, function(Y) { Y.clone(); Y.aggregate(); Y.augment();});
  • Y.clone() var obj2 = Y.clone(obj1); obj2 obj1 bing bing bong bong foo foo bar bar baz baz
  • Y.aggregate()Y.aggregate(obj2, obj1); obj2 obj1 bing bing bong bong foo foo bar bam baz
  • Y.aggregate()Y.aggregate(obj2, obj1); obj2 obj1 bing bing bong bong foo foo bar bam bam baz baz
  • 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
  • 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
  • Y.plug() var overlay = new Y.Overlay({ ... }); overlay.plug(Y.Plugin.Drag); overlay.dd.set(lock, true); overlay.unplug(dd);
  • 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
  • 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
  • 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
  • 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
  • Y.substitute()var greeting =Y.substitute("Hello, {who}!", { who: "World" });
  • Y.bind()Y.on(submit, Y.bind(function(e){ e.halt(); this.set(businessForDirections, null);}, this), #ymap-get-directions);
  • 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);
  • 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|*");
  • Y.DoYUI().use("event-custom” , function(Y) { Y.Do.before(objClass.woo, obj1, foo); Y.Do.after(objClass.wee, obj2, bar);});
  • What We’re Going to Cover• Why YUI?• YUI Tidbits• Before we are done!
  • References• http://yuilibrary.com/• Images from Google, Flickr • YUI Theater - http://www.youtube.com/yuilibrary INDUSTRIAL STRENGTH BUILT TO LAST!!
  • Questions?• Slides at http://slideshare.net/jaisanth/• jaisanth@• IRC freenode: #yui
  • THANK YOU!