YDN Tech Talk - YUI
-
date post
30-May-2018 -
Category
Documents
-
view
223 -
download
0
Transcript of YDN Tech Talk - YUI
-
8/14/2019 YDN Tech Talk - YUI
1/29
YUI()An Introduction to YUI 3
Jenny Han Donnelly
YUI Library
-
8/14/2019 YDN Tech Talk - YUI
2/29
YUI Library Overview
Core
Utilities
Widgets
CSS
-
8/14/2019 YDN Tech Talk - YUI
3/29
Introducing YUI 3
Lighter
Easier
Faster
-
8/14/2019 YDN Tech Talk - YUI
4/29
-
8/14/2019 YDN Tech Talk - YUI
5/29
The Sandbox Model
YUI().use("anim", function(Y) {
...
});
-
8/14/2019 YDN Tech Talk - YUI
6/29
Optimized Loading
YUI().use("anim", function(Y) {
});
var a = new Y.Anim({...});
a.run();
-
8/14/2019 YDN Tech Talk - YUI
7/29
-
8/14/2019 YDN Tech Talk - YUI
8/29
The YUI Buffet
-
8/14/2019 YDN Tech Talk - YUI
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) {})
-
8/14/2019 YDN Tech Talk - YUI
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
-
8/14/2019 YDN Tech Talk - YUI
11/29
Extension and Plugin Architecture
Overlay
Tooltip
myOverlay
Positioning
Adv. Positioning
Shimming/Stacking
Header/Body/Footer
Animation
IO Binding
Widget
-
8/14/2019 YDN Tech Talk - YUI
12/29
-
8/14/2019 YDN Tech Talk - YUI
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);
-
8/14/2019 YDN Tech Talk - YUI
14/29
Supports
node.appendChild(aNode)
node.cloneNode(boolean)
node.scrollIntoView()
node.focus()
node.get("parentNode")node.set("innerHTML","Foo")
-
8/14/2019 YDN Tech Talk - YUI
15/29
-
8/14/2019 YDN Tech Talk - YUI
16/29
Enhances
node.addClass("selectable")
node.toggleClass("enabled")
node.getXY()
node.get("region")
node.on("srcChange", fn)
node.after("innerHTMLChange", fn)
-
8/14/2019 YDN Tech Talk - YUI
17/29
Extendable
node.plug(IOPlugin);
node.io.getContent("http://foo/bar");
node.plug(DragDropPlugin);
node.dd.set("handle", ".title");
-
8/14/2019 YDN Tech Talk - YUI
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.
-
8/14/2019 YDN Tech Talk - YUI
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");
});
-
8/14/2019 YDN Tech Talk - YUI
20/29
YUI 3 Node API
Supports
Normalizes
EnhancesExtendable
Constrainable
-
8/14/2019 YDN Tech Talk - YUI
21/29
The Event System
-
8/14/2019 YDN Tech Talk - YUI
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();
}
});
-
8/14/2019 YDN Tech Talk - YUI
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|*");
-
8/14/2019 YDN Tech Talk - YUI
24/29
Custom Event Flow: On/Default/After
On
On
Default Behavior
After
After
After
this.fire("select");
e.stopImmediatePropagation();
e.preventDefault();
e.stopImmediatePropagation();
-
8/14/2019 YDN Tech Talk - YUI
25/29
-
8/14/2019 YDN Tech Talk - YUI
26/29
MenuMenuItem
Custom Event Delegation
On
On
Def. Behavior
After
After
After
this.fire("menuitem:select")
On
Def. Behavior
After
After
e.stopPropagation()
-
8/14/2019 YDN Tech Talk - YUI
27/29
YUI 3 Event Model
Event Listening
Event Facades
Detaching
Built-in "on" and "after" moments
Prevent default behavior
Event bubbling
-
8/14/2019 YDN Tech Talk - YUI
28/29
YUI Library Overview
Documentation
Community
-
8/14/2019 YDN Tech Talk - YUI
29/29