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 src="http://yui.yahooapis.com/combo?oop-min.js&event-min.js..">
<script>src="oop-min.js">
<script
YUI().use("anim", function(Y) {
<script src="event-min.js">
var a = new Y.Anim({...});
<script src="attribute-min.js">
a.run();
<script
}); src="base-min.js">
</script>
<script src="dom-min.js">
<script src="node-min.js">
<script src="anim-min.js">
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

8
K-Weight (minified, non-gzip)

7 io-xdr

6 io-upload

io-queue
5

io-form
4
io-base
3
connection
2

IO Component
Extension and Plugin Architecture

Positioning Overlay
Adv. Positioning

Shimming/Stacking
myOverlay
Header/Body/Footer
Widget
Animation

IO Binding

Tooltip
The Node Wrapper
Working with DOM Elements in YUI 3
var node = Y.get(".actions li.task.selected");
Y.get(…).addClass("current").on("click", handler);
node.addClass("current");
node.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 and
Ad-safe.
NodeList

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");
});

* The Costco to Node’s Kwik-E Mart

YUI 3 Node API

Supports
Normalizes
Enhances
Extendable
Constrainable
The Event System
Event Listeners & Event Facades

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

// Custom Event
myWidget.on("select", function(e) {
if (e.newVal < 200) {
e.preventDefault();
}
});
Detaching Listeners

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

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

overlay.detach("myapp|show");

overlay.detach("myapp|*");
Custom Event Flow: On/Default/After

this.fire("select");

On e.stopImmediatePropagation();

On e.preventDefault();

Default Behavior
After
After e.stopImmediatePropagation();

After
DOM Event Delegation

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

this.fire("menuitem:select")
Menu
MenuItem

On On
On e.stopPropagation() Def. Behavior
Def. Behavior After
After After
After
After
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