ydn tech talk - yui

8/14/2019 YDN Tech Talk - YUI

1/29

YUI()An Introduction to YUI 3

Jenny Han Donnelly

YUI Library


2/29

YUI Library Overview

Core

Utilities

Widgets

CSS


3/29

Introducing YUI 3

Lighter

Easier

Faster


4/29


5/29

The Sandbox Model

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

...

});


6/29

Optimized Loading

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

});

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

a.run();


7/29


8/29

The YUI Buffet


9/29

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) {})


10/29

IO's K-Weight Profile

0

1

2

3

4

5

6

7

8

K-Weight(minified,no

n-gzip

IO Component

io-xdr

io-upload

io-queue

io-form

io-base

connection


11/29

Extension and Plugin Architecture

Overlay

Tooltip

myOverlay

Positioning

Adv. Positioning

Shimming/Stacking

Header/Body/Footer

Animation

IO Binding

Widget


12/29


13/29

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


14/29

Supports

node.appendChild(aNode)

node.cloneNode(boolean)

node.scrollIntoView()

node.focus()

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


15/29


16/29

Enhances

node.addClass("selectable")

node.toggleClass("enabled")

node.getXY()

node.get("region")

node.on("srcChange", fn)

node.after("innerHTMLChange", fn)


17/29

Extendable

node.plug(IOPlugin);

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

node.plug(DragDropPlugin);

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


18/29

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.


19/29

NodeList

* The Costco to Nodes 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");

});


20/29

YUI 3 Node API

Supports

Normalizes

EnhancesExtendable

Constrainable


21/29

The Event System


22/29

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

}

});


23/29

Detaching Listeners

// YUI 3

varhandle= overlay.on("show", myShowHandler);

handle.detach();

// Or

overlay.on("myapp|show", myShowHandler);

overlay.on("myapp|hide", myHideHandler);

overlay.detach("myapp|show");

overlay.detach("myapp|*");


24/29

Custom Event Flow: On/Default/After

On

On

Default Behavior

After

After

After

this.fire("select");

e.stopImmediatePropagation();

e.preventDefault();

e.stopImmediatePropagation();


25/29


26/29

MenuMenuItem

Custom Event Delegation

On

On

Def. Behavior

After

After

After

this.fire("menuitem:select")

On

Def. Behavior

After

After

e.stopPropagation()


27/29

YUI 3 Event Model

Event Listening

Event Facades

Detaching

Built-in "on" and "after" moments

Prevent default behavior

Event bubbling


28/29

YUI Library Overview

Documentation

Community


29/29

ydn tech talk - yui

Documents