YUI()An Introduction to YUI 3

Jenny Han Donnelly

YUI Library

YUI Library Overview

Core

Utilities

Widgets

CSS

Introducing YUI 3

Lighter

Easier

Faster

The Sandbox Model

The Sandbox Model

<script src="yui-min.js">

<script>

YUI().use("anim", function(Y) {

...

});

</script>

Optimized Loading

<script src="yui-min.js">

<script>YUI().use("anim", function(Y) {

});</script>

<script src="http://yui.yahooapis.com/combo?oop-min.js&event-min.js..">

<script src="oop-min.js">

<script src="event-min.js">

<script src="attribute-min.js">

<script src="base-min.js">

<script src="dom-min.js">

<script src="node-min.js">

<script src="anim-min.js">

var a = new Y.Anim({...});

a.run();

Protection from Other Modules

<script src="http://yui.yahooapis.com/3.4/build/yui/yui-min.js">

<script> YUI().use("financeapp", function(Y) { ... }); </script>

<script src="http://yui.yahooapis.com/3.0/build/yui/yui-min.js">

<script> YUI().use("moviesapp", function(Y) {

... }); </script>

The YUI Buffet

Sub-Module Architecture

io : All IO functionality (7.4K)

– io-base : Core XHR functionality (3.3K)

– io-form : Form mining support (1K)

– io-queue : Transaction Queuing support (0.7K)

– io-upload : File upload support (1.7K)

– io-xdr : Cross domain support (0.7K)

YUI().use("io-base", function(Y) {…})YUI().use("io-form", "io-xdr", function(Y) {…})YUI().use("io", function(Y) {…})

IO's K-Weight Profile

0

1

2

3

4

5

6

7

8

K-W

eig

ht

(min

ifie

d,

no

n-g

zip

)

IO Component

io-xdr

io-upload

io-queue

io-form

io-base

connection

Extension and Plugin Architecture

Overlay

Tooltip

myOverlay

Positioning

Adv. Positioning

Shimming/Stacking

Header/Body/Footer

Animation

IO Binding

Widget

The Node Wrapper

Working with DOM Elements in YUI 3

var node = Y.get(".actions li.task.selected");

node.addClass("current");

node.on("click", handler);

Y.get(…).addClass("current").on("click", handler);

Supports

node.appendChild(aNode)

node.cloneNode(boolean)

node.scrollIntoView()

node.focus()

node.get("parentNode")

node.set("innerHTML","Foo")

Normalizes

node.getAttribute("href")

node.contains(aNode)

node.getStyle("paddingTop")

node.previous()

Enhances

node.addClass("selectable")

node.toggleClass("enabled")

node.getXY()

node.get("region")

node.on("srcChange", fn)

node.after("innerHTMLChange", fn)

Extendable

node.plug(IOPlugin);

node.io.getContent("http://foo/bar");

node.plug(DragDropPlugin);

node.dd.set("handle", ".title");

Constrainable

Node is the single point of access to the DOM.

Makes YUI 3 ideal as a trusted source for"constrained" environments like Caja andAd-safe.

NodeList

* The Costco to Node’s Kwik-E Mart

var items = Y.all(".actions li");items.addClass("disabled");items.set("title", "Item Disabled");

items.each(function(node) { node.addClass("disabled); node.set("title", "Item Disabled");});

YUI 3 Node API

SupportsNormalizesEnhancesExtendableConstrainable

The Event System

Event Listeners & Event Facades

// Dom EventmyElement.on("click", function(e) { if (!e.target.hasClass("disabled")) { e.preventDefault(); }});

// Custom EventmyWidget.on("select", function(e) { if (e.newVal < 200) { e.preventDefault(); }});

Detaching Listeners

// YUI 3var handle = overlay.on("show", myShowHandler);handle.detach();

// Oroverlay.on("myapp|show", myShowHandler);overlay.on("myapp|hide", myHideHandler);

overlay.detach("myapp|show");

overlay.detach("myapp|*");

Custom Event Flow: On/Default/After

On

On

Default Behavior

After

After

After

this.fire("select");

e.stopImmediatePropagation();

e.preventDefault();

e.stopImmediatePropagation();

DOM Event Delegation

Y.on("delegate", function(e) { e.target.addClass("selected")}, "ul", "click", "li");

MenuMenuItem

Custom Event Delegation

On

On

Def. Behavior

After

After

After

this.fire("menuitem:select")

On

Def. Behavior

After

After

e.stopPropagation()

YUI 3 Event Model

Event Listening

Event Facades

Detaching

Built-in "on" and "after" moments

Prevent default behavior

Event bubbling

YUI Library Overview

Documentation

Community

Thanks!

Read http://developer.yahoo.com/yui/3

Discuss http://yuilibrary.com/forum/viewforum.php?f=15

Or just jump in headfirst…

http://github.com/yui/yui3/tree/master