Get started with YUI

5,575 views

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,575
On SlideShare
0
From Embeds
0
Number of Embeds
3,291
Actions
Shares
0
Downloads
46
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Get started with YUI

  1. 1. Get Started with YUI Adam Lu http://adamlu.com/ @adamlu Frontend Engineer
  2. 2. What is YUI?YUI = Yahoo! User Interface Library http://yuilibrary.com/
  3. 3. YUI Library Project• JavaScript library• CSS foundation• Documentation tools• Build tools• Testing tools• Server side delivery tools• Developer education
  4. 4. http://www.mindmeister.com/149577110/yui-library-project
  5. 5. YUI Core & Utilities• Event • Anim• Node • History• YUI Global Object • IO • Transition • …
  6. 6. 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) {});
  7. 7. 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
  8. 8. Y.Array• dudupe • map• each • numericSort• every • partition• filter • reduce• find • reject• grep • some• hashindexOf • test• Invoke • unique• lastIndexOf • zip
  9. 9. 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);};
  10. 10. 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;};
  11. 11. 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
  12. 12. 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(); };}());
  13. 13. 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}
  14. 14. 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);
  15. 15. 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.
  16. 16. 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 }); });
  17. 17. Event• Dom Events• Custom Events• Event API• Custom Events more DOM like• “After” subscriptions• Unified subscription
  18. 18. 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);
  19. 19. 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);
  20. 20. 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/
  21. 21. 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);
  22. 22. 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/
  23. 23. YUI Infrastructurehttp://yuilibrary.com/yui/infrastructure/
  24. 24. YUI Infrastructure
  25. 25. 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], {});
  26. 26. 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!”)
  27. 27. 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
  28. 28. Widget
  29. 29. 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
  30. 30. /* 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’);
  31. 31. 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
  32. 32. 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/
  33. 33. YUI Gallery
  34. 34. 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
  35. 35. http://www.amazon.com/YUI-3-Cookbook-Evan-Goer/dp/1449304192

×