JavaScript with YUI
-
Upload
rajat-pandit -
Category
Technology
-
view
3.737 -
download
1
description
Transcript of JavaScript with YUI
![Page 2: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/2.jpg)
YUI Core
2Thursday, September 24, 2009
![Page 3: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/3.jpg)
Getting Started• Remember the mantra
‘GLOBAL VARIABLES ARE EVIL!!’
• Namespace before you start
YAHOO.namespace("ipc");YAHOO.ipc.foo = function(o) { alert(o);}
3Thursday, September 24, 2009
![Page 4: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/4.jpg)
YAHOO.lang• Contains utilities functions
• YAHOO.lang.isArray([a,b])
• YAHOO.lang.isBoolean(val)
• YAHOO.lang.isNull(null) // true, false for undefined
• YAHOO.lang.isUndefined(v)
• YAHOO.lang.isFunction(function() {})
• YAHOO.lang.isNumber(o)
• YAHOO.lang.isObject(o)
• YAHOO.lang.isString(s)
4Thursday, September 24, 2009
![Page 5: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/5.jpg)
YAHOO.lang
• YAHOO.lang.hasOwnProperty(o,p)
Very useful method to check if the property available in the object is its own or inherited via prototypal inheritance
5Thursday, September 24, 2009
![Page 6: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/6.jpg)
YAHOO.lang• Extending Class is pretty straightforward
YAHOO.namespace('ipc'); // namespaceYAHOO.ipc.mc = function(info) { alert('class: ' + info);}YAHOO.ipc.mc.prototype.testMethod = function(info) { alert('class1: ' + info);}
// new classYAHOO.ipc.h2h = function(info) { YAHOO.ipc.h2h.superclass.constructor.class(this, info); alert('class2: ' + info);}
// h2h is to extend from mcYAHOO.lang.extend(YAHOO.ipc.h2h, YAHOO.ipc.mc);
6Thursday, September 24, 2009
![Page 7: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/7.jpg)
YAHOO.lang• Overriding testMethod in the inherited
class and also calling the parent method
YAHOO.ipc.h2h.prototype.testMethod = function(info) { // chain the method by calling the parent YAHOO.ipc.h2h.superclass.testMethod.class(this, info); alert('class2: ' + info);};
// creating new instancevar h2hInstance = new YAHOO.ipc.h2h("constructor");h2hInstance.testMethod("testmethod");
7Thursday, September 24, 2009
![Page 8: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/8.jpg)
YAHOO.lang• YAHOO.lang.augment allows you to
copy properties from one object to anotherYAHOO.ipc.test1 = function(){};YAHOO.ipc.test1.prototype ={ foo: 10, bar: function() { console.log('blah'); }}YAHOO.ipc.test2 = function() {};YAHOO.lang.augment(YAHOO.ipc.test2, YAHOO.ipc.test1);
now test2 object has the propertiesYAHOO.ipc.test2.foo returns 10;
8Thursday, September 24, 2009
![Page 9: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/9.jpg)
YAHOO.log• Very useful for debugging where firebug
doesn’t work
• Writing one logging/debugging solution so that it works across all browsers
YAHOO.log(‘debug msg’, ‘log level’, ‘class name’)
9Thursday, September 24, 2009
![Page 10: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/10.jpg)
YAHOO.log• Shameless Plug I
http://www.yuiblog.com/blog/2008/07/01/logger-bookmarklet/http://blog.rajatpandit.com/sandbox/yuilogger/index.html
10Thursday, September 24, 2009
![Page 11: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/11.jpg)
YAHOO.util
11Thursday, September 24, 2009
![Page 12: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/12.jpg)
YAHOO.util.Region• Useful API if you are trying to detect if objects are
overlapping or intersecting with any other elements.
• Very useful for implementing drag and drop interactions
YAHOO.util.Region.contains(region)YAHOO.util.Region.intersect(region)YAHOO.util.Region.union(region)
12Thursday, September 24, 2009
![Page 13: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/13.jpg)
YAHOO.util.Point
• In case you are looking for something more specific like a pixel on the screen
• More API details available here
http://developer.yahoo.com/yui/docs/module_dom.html
13Thursday, September 24, 2009
![Page 14: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/14.jpg)
YAHOO.util.Dom
• Very useful API that allows you to do stuff to the DOM
• You can pass an actual node object or its ID, both works
14Thursday, September 24, 2009
![Page 15: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/15.jpg)
YAHOO.util.Dom• Get positional information for elements
• YAHOO.util.Event.getXY(e) does something similar, tells you where the event happened
// get valuesYAHOO.util.Dom.getXY()YAHOO.util.Dom.getY() YAHOO.util.Dom.getX()
// set valuesYAHOO.util.Dom.setXY()YAHOO.util.Dom.setX()YAHOO.util.Dom.setY()
15Thursday, September 24, 2009
![Page 16: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/16.jpg)
YAHOO.util.Dom• Modify styles and classes of DOM nodes
YAHOO.util.Dom.setStyle(el, '<name>', '<value>');YAHOO.util.Dom.getStyle(el, '<name>');YAHOO.util.Dom.hasClass(el, '<name>');YAHOO.util.Dom.addClass(el, '<name>');YAHOO.util.Dom.removeClass(el, '<class to remove>');YAHOO.util.Dom.replaceClass(el, oldclassname, newclassname)
16Thursday, September 24, 2009
![Page 17: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/17.jpg)
YAHOO.util.Dom
• Get all nodes with a specified class name starting from a particular node of a particular type
• document.getElementsByClassName(c) Works for Firefox not for IE
YAHOO.util.Dom.getElementsByClassName(classname, tagName, rootNode)
17Thursday, September 24, 2009
![Page 18: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/18.jpg)
YAHOO.util.Dom• Provides the missing DOM API, without
messing up the actual objects
• Keeps it nice and clean
• More interesting API methods at:http://developer.yahoo.com/yui/docs/
YAHOO.util.Dom.insertAfter(newnode, refNode)YAHOO.util.Dom.isAncestor(haystack, needle)YAHOO.util.Dom.getNextSibling(node)YAHOO.util.Dom.getAncestorByClassName(node, classname)YAHOO.util.Dom.getAncestorByTagName(node, tagname)
18Thursday, September 24, 2009
![Page 19: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/19.jpg)
YUI Event
• Two components
•YAHOO.util.Event
•YAHOO.util.CustomEvent
19Thursday, September 24, 2009
![Page 20: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/20.jpg)
YAHOO.util.Event• Basic Event Handling
• Three easy steps
• Define a callback function
• Define the element (get name or actual node)
• Attach callback function to the eventYAHOO.util.Event.addListener(‘el’, ‘click’ fnCallback)YAHOO.util.Event.addListener(
[el1, el2, el3], 'click', fnCallBack
);
20Thursday, September 24, 2009
![Page 21: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/21.jpg)
YAHOO.util.Event• Points to note:
• Attach an event only after the element is available in the DOM, typically after window.onload event
• YUI does the scope correction in the event handler. Provides access to event and currentTarget more consistently
• Also allows you to pass arbitrary object to the handler, the alternate to this is passing values via a) closures b) circular references both complicated ways of doing things.
21Thursday, September 24, 2009
![Page 22: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/22.jpg)
YAHOO.util.Event• Callback Function Signature
function fnCallback(e, obj) { // do stuff here}
// passes myobj is the second parameter
YAHOO.util.Event.addListener(el, 'click', fnCallback, myobj);
// if we pass true as the final parameter, the custom // object that is passed is used for the execution scope // (so it becomes 'this' in the callback function)
YAHOO.util.Event.addListener(el, 'click', fnCallback, myobj, true);
22Thursday, September 24, 2009
![Page 23: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/23.jpg)
YAHOO.util.Event• Event handler signature continued...
// or pass a totally different mydata = obj // and myobject = this inside the callback function
YAHOO.util.Event.addListener(el, 'click', fnCallback, mydata, myobject);
23Thursday, September 24, 2009
![Page 24: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/24.jpg)
Removing Events• Remember IE6 and all its loveliness of
memory leaks??
• Ensure that you have removed all its listeners before you remove a node in DOMYAHOO.util.Event.removeListener(el, ‘click’, fnCallback)
// if reference to the callback function isn’t // available, the following will remove all // listenersYAHOO.util.Event.removeListeners(el, ‘click’)
24Thursday, September 24, 2009
![Page 25: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/25.jpg)
Removing Events• To remove all event handlers
• To recurse through all children and remove all listeners
• To remove listeners only for a particular event
YAHOO.util.Event.purgeEvent(el)
YAHOO.util.Event.purgeEvent(el, true)
YAHOO.util.Event.purgeEvent(el, false, ‘click’)
25Thursday, September 24, 2009
![Page 26: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/26.jpg)
Getting all listeners• You can get the list of all the attached
listenersvar listeners = YAHOO.util.Event.getListeners(el)
// the listener object has the following structurelistener = { type: ‘’, // the event type fn: ‘’, // function to execute, event handler obj: ‘’, // custom object that was passed adjust: ‘’// scope correction, this or custom obj}
26Thursday, September 24, 2009
![Page 27: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/27.jpg)
When to attach handlers?
• Do stuff / attach handlers only when you are sure that the DOM is now fully availablefunction init() { console.log(‘blah’);}YAHOO.util.Event.onDOMReady(init)
27Thursday, September 24, 2009
![Page 28: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/28.jpg)
Custom Events• They are awesome!!
• You might want to do multiple things when something happens
• One way is to write all the functions invocations one after the other
• Problem happens for AJAX interactions which run in the async. model
• You can create your own custom events, it uses the delegation pattern.
28Thursday, September 24, 2009
![Page 29: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/29.jpg)
Custom Events• Shameless Plug II
http://blog.rajatpandit.com/2008/02/22/yui-custom-event/
• Three easy steps:
• Step 1: Define the custom event
• Step II: Make methods subscribe to the event to be fired, when that happens
• Step III: Fire the event when you think its the right time
var onMyCustomEvent = new YAHOO.util.CustomEvent(‘onmycustomevent’)
onMyCustomEvent.subscribe(method1)onMyCustomEvent.subscribe(method2)
onMyCustomEvent.fire()
29Thursday, September 24, 2009
![Page 30: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/30.jpg)
Custom Events• You can also pass arguments to the
subscribed methods when firing the event
onMyCustomEvent.fire({action: ‘fire’});
function method1(event, arg, obj) {}
// event: returns the event object// arg: is the set of arguments passed in the fire event// obj: is the argument that is passed to the subscribe method
30Thursday, September 24, 2009
![Page 31: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/31.jpg)
YUI Components• Loads of many hidden gems, widgets etc in the library
• Spend some time at looking at the documentation, tons of examples and API docs
YUI CORE YUI Library Utilities
YUI Controls / Widgets YUI CSS Tools
31Thursday, September 24, 2009
![Page 32: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/32.jpg)
References• YUI Homepage
http://developer.yahoo.com/yui/
• YUI Theater for presentationshttp://developer.yahoo.com/yui/theater/
• API Documentationhttp://developer.yahoo.com/yui/docs/
• YUI 3 - In beta 1(as on 16th September 2009)http://developer.yahoo.com/yui/3/
32Thursday, September 24, 2009
![Page 33: JavaScript with YUI](https://reader034.fdocuments.us/reader034/viewer/2022051412/54820329b47959e20c8b468b/html5/thumbnails/33.jpg)
DEMO
33Thursday, September 24, 2009