YUI Tidbits

YUI TIDBITS

Jai Santhosh
@jaisanth

What We’re Going to Cover
• Why YUI?

• YUI Tidbits

• Before we are done!

http://yuilibrary.com/

What’s in Smart Software?

• Reliability

• Maintainability

• Compatibility

• Extensibility

http://yuilibrary.com/yui/docs/guides/

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.UA
Y.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);

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();


name name foo bar

foo bar baz

Y.merge();


name name foo bar
foo foo bar baz

Y.merge();


name name foo bar
foo foo bar baz
bar

baz

OOP Module
YUI().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 list
Prototype 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 list
Prototype
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()




Overlay
overlay
Constructor

ATTRS
Attributes Attributes
x x

y y

Y.plug()




Overlay
Plugin.Dra
overlay overlay.dd
Constructor
dd Attributes g
Constructor
ATTRS Attributes lock

x x ATTRS
Attributes
y y lock

Y.plug()




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');

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');

});

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

YUI Tidbits

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to YUI Tidbits (20)

Recently uploaded (20)

YUI Tidbits

Editor's Notes