JavaScript with YUI

2,649 views

Published on

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

No Downloads
Views
Total views
2,649
On SlideShare
0
From Embeds
0
Number of Embeds
84
Actions
Shares
0
Downloads
23
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JavaScript with YUI

  1. 1. Hacking With YUI Rajat Pandit (rajat_pandit@ipcmedia.com) Thursday, September 24, 2009 1
  2. 2. YUI Core Thursday, September 24, 2009 2
  3. 3. Getting Started • Remember the mantra ‘GLOBAL VARIABLES ARE EVIL!!’ • Namespace before you start YAHOO.namespace("ipc"); YAHOO.ipc.foo = function(o) { alert(o); } Thursday, September 24, 2009 3
  4. 4. 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) Thursday, September 24, 2009 4
  5. 5. 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 Thursday, September 24, 2009 5
  6. 6. YAHOO.lang • Extending Class is pretty straightforward YAHOO.namespace('ipc'); // namespace YAHOO.ipc.mc = function(info) { alert('class: ' + info); } YAHOO.ipc.mc.prototype.testMethod = function(info) { alert('class1: ' + info); } // new class YAHOO.ipc.h2h = function(info) { YAHOO.ipc.h2h.superclass.constructor.class(this, info); alert('class2: ' + info); } // h2h is to extend from mc YAHOO.lang.extend(YAHOO.ipc.h2h, YAHOO.ipc.mc); Thursday, September 24, 2009 6
  7. 7. 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 instance var h2hInstance = new YAHOO.ipc.h2h("constructor"); h2hInstance.testMethod("testmethod"); Thursday, September 24, 2009 7
  8. 8. YAHOO.lang • YAHOO.lang.augment allows you to copy properties from one object to another YAHOO.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 properties YAHOO.ipc.test2.foo returns 10; Thursday, September 24, 2009 8
  9. 9. 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’) Thursday, September 24, 2009 9
  10. 10. YAHOO.log • Shameless Plug I http://www.yuiblog.com/blog/2008/07/01/logger-bookmarklet/ http://blog.rajatpandit.com/sandbox/yuilogger/index.html Thursday, September 24, 2009 10
  11. 11. YAHOO.util Thursday, September 24, 2009 11
  12. 12. 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) Thursday, September 24, 2009 12
  13. 13. 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 Thursday, September 24, 2009 13
  14. 14. 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 Thursday, September 24, 2009 14
  15. 15. YAHOO.util.Dom • Get positional information for elements • YAHOO.util.Event.getXY(e) does something similar, tells you where the event happened // get values YAHOO.util.Dom.getXY() YAHOO.util.Dom.getY() YAHOO.util.Dom.getX() // set values YAHOO.util.Dom.setXY() YAHOO.util.Dom.setX() YAHOO.util.Dom.setY() Thursday, September 24, 2009 15
  16. 16. 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 ) Thursday, September 24, 2009 16
  17. 17. 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) Thursday, September 24, 2009 17
  18. 18. YAHOO.util.Dom • Provides the missing DOM API, without messing up the actual objects • Keeps it nice and clean 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) • More interesting API methods at: http://developer.yahoo.com/yui/docs/ Thursday, September 24, 2009 18
  19. 19. YUI Event • Two components •YAHOO.util.Event •YAHOO.util.CustomEvent Thursday, September 24, 2009 19
  20. 20. 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 event YAHOO.util.Event.addListener(‘el’, ‘click’ fnCallback) YAHOO.util.Event.addListener( [el1, el2, el3], 'click', fnCallBack ); Thursday, September 24, 2009 20
  21. 21. 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. Thursday, September 24, 2009 21
  22. 22. 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); Thursday, September 24, 2009 22
  23. 23. 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); Thursday, September 24, 2009 23
  24. 24. 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 DOM YAHOO.util.Event.removeListener(el, ‘click’, fnCallback) // if reference to the callback function isn’t // available, the following will remove all // listeners YAHOO.util.Event.removeListeners(el, ‘click’) Thursday, September 24, 2009 24
  25. 25. Removing Events • To remove all event handlers YAHOO.util.Event.purgeEvent(el) • To recurse through all children and remove all listeners YAHOO.util.Event.purgeEvent(el, true) • To remove listeners only for a particular event YAHOO.util.Event.purgeEvent(el, false, ‘click’) Thursday, September 24, 2009 25
  26. 26. Getting all listeners • You can get the list of all the attached listeners var listeners = YAHOO.util.Event.getListeners(el) // the listener object has the following structure listener = { type: ‘’, // the event type fn: ‘’, // function to execute, event handler obj: ‘’, // custom object that was passed adjust: ‘’// scope correction, this or custom obj } Thursday, September 24, 2009 26
  27. 27. When to attach handlers? • Do stuff / attach handlers only when you are sure that the DOM is now fully available function init() { console.log(‘blah’); } YAHOO.util.Event.onDOMReady(init) Thursday, September 24, 2009 27
  28. 28. 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. Thursday, September 24, 2009 28
  29. 29. Custom Events • Shameless Plug II http://blog.rajatpandit.com/2008/02/22/yui-custom-event/ • Three easy steps: • Step 1: Define the custom event var onMyCustomEvent = new YAHOO.util.CustomEvent(‘onmycustomevent’) • Step II: Make methods subscribe to the event to be fired, when that happens onMyCustomEvent.subscribe(method1) onMyCustomEvent.subscribe(method2) • Step III: Fire the event when you think its the right time onMyCustomEvent.fire() Thursday, September 24, 2009 29
  30. 30. 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 Thursday, September 24, 2009 30
  31. 31. 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 Thursday, September 24, 2009 31
  32. 32. References • YUI Homepage http://developer.yahoo.com/yui/ • YUI Theater for presentations http://developer.yahoo.com/yui/theater/ • API Documentation http://developer.yahoo.com/yui/docs/ • YUI 3 - In beta 1(as on 16th September 2009) http://developer.yahoo.com/yui/3/ Thursday, September 24, 2009 32
  33. 33. DEMO Thursday, September 24, 2009 33

×