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!