Get started with YUI
Upcoming SlideShare
Loading in...5
×
 

Get started with YUI

on

  • 5,560 views

 

Statistics

Views

Total Views
5,560
Views on SlideShare
2,318
Embed Views
3,242

Actions

Likes
4
Downloads
44
Comments
0

10 Embeds 3,242

http://adamlu.com 3113
http://www.marcosomo.com 93
http://feed.feedsky.com 24
http://www.f2e.org 3
http://cache.baidu.com 3
http://f2e.org 2
http://www.itfeed.cn 1
http://www.chengxuyuans.com 1
http://adamlu.com HTTP 1
http://www.itfeed.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Get started with YUI Get started with YUI Presentation Transcript

  • Get Started with YUI Adam Lu http://adamlu.com/ @adamlu Frontend Engineer
  • What is YUI?YUI = Yahoo! User Interface Library http://yuilibrary.com/
  • YUI Library Project• JavaScript library• CSS foundation• Documentation tools• Build tools• Testing tools• Server side delivery tools• Developer education
  • http://www.mindmeister.com/149577110/yui-library-project
  • YUI Core & Utilities• Event • Anim• Node • History• YUI Global Object • IO • Transition • …
  • YUIGlobalObject• YUI.add• YUI(config).use()• YUI_config• YUI.GlobalConfig• YUI.applyConfig• Instance Config YUI({ debug: true, combine: true, comboBase: http://mydomain.com/combo?, root: yui3/ }).use(node, function (Y) {});
  • YUIGlobalObject• Y.Lang • Y.UA Y.Lang.isArray Y.UA.android Y.Lang.isBoolean Y.UA.ie Y.Lang.isFunction Y.UA.ios Y.Lang.isNumber Y.UA.ipad Y.Lang.isObject Y.UA.iphone Y.Lang.isString Y.UA.ipod Y.Lang.now Y.UA.mobile Y.Lang.sub Y.UA.opera Y.Lang.trim Y.UA.os Y.UA.safari Y.UA.webkit
  • Y.Array• dudupe • map• each • numericSort• every • partition• filter • reduce• find • reject• grep • some• hashindexOf • test• Invoke • unique• lastIndexOf • zip
  • Y.mixmix ( receiver supplier [overwrite=false] [whitelist] [mode=0] [merge=false] ) Mixes suppliers properties into receiver. 0: Default. Object to object. 1: Prototype to prototype. 2: Prototype to prototype and object to object. 3: Prototype to object. 4: Object to prototype.Y.mix(AttributeEvents, EventTarget, false, null, 1);Y.mix(Attribute, Y.AttributeEvents, true, null, 1);Y.mix(Base, Attribute, false, null, 1);Y.aggregate = function(r, s, ov, wl) { return Y.mix(r, s, ov, wl, 0, true);};
  • Y.extendCreate Class Hierarchies with extendY.extend = function(r, s, px, sx) { function Bird(name) {var sp = s.prototype, rp = Y.Object(sp); this.name = name;r.prototype = rp; }rp.constructor = r;r.superclass = sp; Bird.prototype.flighted = true; // // add prototype overrides Default for all Birds if (px) {Y.mix(rp, px, true);} function Chicken(name) { // add object overrides Chicken.superclass.constructor.call if (sx) { (this, name);Y.mix(r, sx, true); }} Y.extend(Chicken, Bird); return r; Chicken.prototype.flighted = false;};
  • Y.augmentaugment ( receiver supplier [overwrite=false] [whitelist] [args] )Augments the receiver with prototype properties from the supplier.The receiver may be a constructor function or an object. Thesupplier must be a constructor function.Y.augment(TreeNode, Y.EventTarg function Foo() {}et, true, null, { Foo.prototype.doSomething = function () {};emitFacade: true, function Bar() {} prefix: tree Y.augment(Bar, Foo);}); varb = new Bar(); if (binstanceof Bar) {} // true if (binstanceofFoo) {} //false
  • Y.ObjectPrototype inheritanceY.Object = Lang._isNative(Object.create) ? function (obj) { return Object.create(obj);} : (function () { function F() {} return function (obj) {F.prototype= obj; return new F(); };}());
  • Y.mergeReturns a new object containing all of the properties of all the supplied objects. Theproperties from later objects will overwrite those in earlier objects. var set1 = { foo : "foo" }; var set2 = { foo : "BAR", bar : "bar" }; var set3 = { foo : "FOO", baz : "BAZ" }; var merged = Y.merge(set1, set2, set3); //{foo => FOO, bar => bar, baz => BAZ}
  • Y.cloneclone ( o safe fc owner cloned )Deep object/array copy.yeach(o, function(v, k) {if (k == prototype) { // skip the prototype // } else if (o[k] === o) { // this[k] = this; } else {this[k] =Y.clone(v, safe, f, c, owner || o, marked); }}, o2);
  • ModuleYUI.add("mywidget", function(Y) { function MyWidget(){}Y.namespace(‘MyWidget’) = MyWidget;}, "1.0.0", {requires:["widget", "substitute"]});YUI.use(‘mywidget’, function(Y){ new Y.MyWidget();});A modules add() callback isnt executed until that module is attached to aYUI instance via use(). Each time a module is attached via use(), the modulesadd() callback will be executed, and will receive as an argument the same YUIinstance that will later be passed to the use() callback.
  • Loader• Built into YUI Global Object• Self-aware dependency management• Asynchronous combo-loaded from CDN• Sandboxed Code• Dynamic Loading withuse() method YUI().use(calendar, function (Y) { Y.use(autocomplete, function () { // The autocomplete module is available here, and the calendar module }); });
  • Event• Dom Events• Custom Events• Event API• Custom Events more DOM like• “After” subscriptions• Unified subscription
  • DOM Eventsbutton.on(click, function (e) {e.target.get(id); // => readygoe.preventDefault();e.stopPropagation();});button.detach("click", handleClick);Y.one(#items).delegate(click, handleClick, button.remove’, context);Y.Event.define("tripleclick", {});button.on(tripleclick, omgYayCantClickEnough);
  • Custom EventsY.augment(MyClass, Y.EventTarget);var instance = new MyClass();instance.on(addItem, function (e) {alert("Yay, Im adding " + e.item);});instance.add(a new item);Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = { on: function (type, fn, ctx) {var progress = {}, handlers = {}, keys = [38,38,40,40,37,39,37,39,66,65], ...node.on("keydown", _checkProgress); return detachHandle;}node.on(konami, addUnicorns);
  • Node// Use Y.one( [css selector string] )var node = Y.one(#main);node.one(".hello").setContent("<h1>Hello, <em>World</em>!</h1>");node.addClass(highlight);vardoneTasks = Y.all(#tasklist .completed);doneTasks.each(function (taskNode) {taskNode.transition({ opacity: 0 }, function () {completedTasklist.appendChild(this); });});http://jsfiddle.net/adamlu/zKSZq/
  • IO• io-base: base class used for standard XHR• io-xdr: extension for cross-domain requests• …… varcfg, request; cfg = { method: POST, arguments: { start : bar }, on: { start: function(o){}, complete: function(o){ console.log(o.responseText); } } }; request = Y.io(uri, cfg);
  • TransitionYUI().use(transition, function (Y) {Y.one(#demo).transition({ duration: 1, height:0, width: { delay: 1, duration: 0.5, value: 0 }}, function() {Y.log(end);});}); http://jsfiddle.net/adamlu/RE6dF/
  • YUI Infrastructurehttp://yuilibrary.com/yui/infrastructure/
  • YUI Infrastructure
  • Basefunction MyClass(config) { // Invoke Base constructor, passing through argumentsMyClass.superclass.constructor.apply(this, arguments);}MyClass.NAME = "myClass";MyClass.ATTRS = { A:{ // Attribute "A" configuration }, };Y.extend(MyClass, Y.Base, {initializer: function(cfg) {},destructor : function() {}, ... });App = Y.Base.create(app, Y.Base, [View, Router, PjaxBase], {});
  • Attributes function MyClass(userValues) {varattributeConfig = {attrA : { // ... Configuration for attribute "attrA" ... },attrB : { // ... Configuration for attribute "attrB" ... } };this.addAttrs(attributeConfig, userValues); };Y.augment(MyClass, Y.Attribute);varo = new MyClass({ attrA:5 });o.set("attrB", "Hello World!”)
  • Plugin function AnchorPlugin(config) {this._node = config.host;}AnchorPlugin.NS = "anchors"AnchorPlugin.prototype = { disable: function() {} };var container = Y.one("div.actions");container.plug(AnchorPlugin);container.anchors.disable();Y.extend(WidgetAnimPlugin, Y.Plugin.Base, {initializer: function(config) {this.afterHostEvent(render, this.insertCornerElements);this.beforeHostMethod("_uiSetVisible", this._uiAnimSetVisible); }, _uiAnimSetVisible : function(show) { return new Y.Do.Prevent(); } }) http://yuilibrary.com/yui/docs/overlay/overlay-anim-plugin.html
  • Widget
  • Widget• Basic Attributes: boudingBox, contentBox, focused…• Rendering Methods: init, destroy, render, renderUI, bindUI, syncUI• Plugins and Extensions Extensions - A Class Level Concept Plugins - An Instance Level Concept
  • /* MyWidget class constructor */ function MyWidget(config) {MyWidget.superclass.constructor.apply(this, arguments);}MyWidget.NAME = "myWidget";MyWidget.ATTRS = {attrA : { value: "A” }}Y.extend(MyWidget, Y.Widget, {renderUI: function() {},bindUI: function() {},syncUI: function() {},};varmywidget = new MyWidget();mywidget.render(‘#container’);
  • App Framework• MVC-style framework var router = new Y.Router(); router.route(/library/:lib/, function (req) {• Y.Model var lib = req.params.lib; if (lib === yui) {• Y.ModelList Y.log(YUI Library is awesome!); }• Y.View });• Y.Router router.save(/library/yui/);// => YUI Library is awesome!• Y.App• Templating: Y.Handlebars http://yuilibrary.com/yui/docs/app/app-todo.html
  • App FrameworkvarusersApp = new Y.App({ views: { users: { type : Y.UsersView, preserve: true }, user: { type : Y.UserView, parent: ‘users’ } }});var users = new Y.UsersList();usersApp.route(/user/, function () {this.showView(users, {modelList: users});});usersApp.route(/user/:id/, function (req) {var user = users.getById(req.params.id);this.showView(user, {model: user}, function (view) {});}); http://photosnear.me/
  • YUI Gallery
  • Learn More• http://yuilibrary.com/yui/docs/tutorials• http://yuilibrary.com/theater/• http://yuilibrary.com/gallery/• https://github.com/yui/yui3• http://www.slideshare.net/drprolix/yui-3- quick-overview• http://www.slideshare.net/eferraiuolo/app- framework-youve-been-wanting-this
  • http://www.amazon.com/YUI-3-Cookbook-Evan-Goer/dp/1449304192