Upload
jai-santhosh
View
1.307
Download
4
Tags:
Embed Size (px)
DESCRIPTION
A bunch of extremely simple but really useful YUI3 helpers.
Citation preview
Saurabh Sahni YDN Developer, Hacker, Evangelist
Jai Santhosh@jaisanth
YUI TIDBITS
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 instance
YUI().use(function (Y) {
// Your code here
});
YUI() Tidbits
YUI().use(function (Y) {
Y.log();Y.later();Y.cached();
Y.UAY.Lang
});
Y.log();
Y.log(message);
Console Widget
YUI().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);
Classnamemanager
YUI().use(”classnamemanager”, function(Y) {var sClass = new Y.ClassNameManager.getclassname(”button”,
”hover”);
// sclass = ”yui-button-hover”});
Y.UA
Y.UA.gecko
Y.UA.os
Y.UA.mobile
Y.UA.secure
Y.UA.air
Y.UA.caja
Y.Lang
Y.Lang.isString(something);
Y.Lang.type(something);
Y.Lang.trim(something);
Y.mix();
Y.mix(obj1, obj2);
name
foo()
name
bar()
baz()
obj1 obj2
Y.mix();
Y.mix(obj1, obj2);
name
foo()
name
bar()
baz()
obj1 obj2
bar()
baz()
Y.merge();
var newObj = Y.merge(obj1, obj2, obj3);
name
foo
foo
bar
obj1 obj2
bar
baz
obj3newObj
Y.merge();
var newObj = Y.merge(obj1, obj2, obj3);
name
foo
foo
bar
obj1 obj2
bar
baz
obj3newObj
name
Y.merge();
var newObj = Y.merge(obj1, obj2, obj3);
name
foo
foo
bar
obj1 obj2
bar
baz
obj3newObj
name
foo
Y.merge();
var newObj = Y.merge(obj1, obj2, obj3);
name
foo
foo
bar
obj1 obj2
bar
baz
obj3newObj
name
foo
bar
baz
Y.merge();
var newObj = Y.merge(obj1, obj2, obj3);
name
foo
foo
bar
obj1 obj2
bar
baz
obj3newObj
name
foo
bar
baz
OOP Module
YUI().use(”oop”, function(Y) {
Y.clone();Y.aggregate();Y.augment();
});
bingbong
var obj2 = Y.clone(obj1);
foo
bar
baz
Y.clone()
bingbong
foo
bar
baz
obj2 obj1
bingbong
Y.aggregate(obj2, obj1);
foo
bar
Y.aggregate()
bingbong
foo
bam
baz
obj2 obj1
bingbong
Y.aggregate(obj2, obj1);
foo
bar
Y.aggregate()
bingbong
foo
bam
baz
obj2 obj1
bam
baz
list
ModelList
Prototype
Constructor
create
init
each
item
Y.augment(Y.ModelList, Y.ArrayList);
var list = new Y.ModelList({ ... });
list.each(function (item) { ... });
ModelList
Prototype
Constructor
create
init
ArrayList
Prototype
each
item
Constructor
each
item
Prototype
create
init
each
itemPrototype
Constructor
Y.augment()
list
item
each
ArrayList
Prototype
each
item
Constructor
Y.augment(Y.ModelList, Y.ArrayList);
var list = new Y.ModelList({ ... });
list.each(function (item) { ... });
ModelList
Prototype
Constructor
create
init
Prototype
each
item
each
Constructoreach 1. Copy
2. Construct
3. Execute
Y.augment()
Y.plug()var overlay = new Y.Overlay({ ... });
overlay.plug(Y.Plugin.Drag);
overlay.dd.set('lock', true);
overlay.unplug('dd');
var overlay = new Y.Overlay({ ... });
overlay.plug(Y.Plugin.Drag);
overlay.dd.set('lock', true);
overlay.unplug('dd');
Overlay
Attributes
x
y
Constructor
Overlay
ATTRS
x
y
Constructoroverlay
Attributes
x
y
Constructor
Y.plug()
overlay
Attributes
x
y
var overlay = new Y.Overlay({ ... });
overlay.plug(Y.Plugin.Drag);
overlay.dd.set('lock', true);
overlay.unplug('dd');
Overlay
ATTRS
x
y
Constructor
Plugin.Drag
Attributes
lock
Constructor
Plugin.Drag
ATTRS
lock
Constructor
overlay.ddAttributes
lock Constructordd
Y.plug()
var overlay = new Y.Overlay({ ... });
overlay.plug(Y.Plugin.Drag);
overlay.dd.set('lock', true);
overlay.unplug('dd');
Overlay
ATTRS
x
y
Constructor
Plugin.Drag
ATTRS
lock
Constructor
overlay
Attributes
x
y
overlay.ddAttributes
lock
dd
Y.plug()
var overlay = new Y.Overlay({ ... });
overlay.plug(Y.Plugin.Drag);
overlay.dd.set('lock', true);
overlay.unplug('dd');
Overlay
ATTRS
x
y
Constructor
Plugin.Drag
ATTRS
lock
Constructor
overlay
Attributes
x
y
overlay.ddAttributes
lock
dd
Y.plug()
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.Do
YUI().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!