2. Warnings
Lots of code
/**
YAHOO.env.ua = function() {
* Returns the namespace specified and creates it if it doesn't exist
var o={
* <pre>
* YAHOO.namespace(quot;property.packagequot;);
/**
* YAHOO.namespace(quot;YAHOO.property.packagequot;);
* Internet Explorer version number or 0. Example: 6
* </pre>
YAHOO.env.ua = function() { * @property ie
* Either of the above would create YAHOO.property, then
var o={ * @type float
* YAHOO.property.package
*/
*
/** ie:0,
* Be careful when naming packages. Reserved words may work in some browsers
* Internet Explorer version number or 0. Example: 6
* and not others. For instance, the following will fail in Safari:
* @property ie /**
* <pre>
* @type float * Opera version number or 0. Example: 9.2
* YAHOO.namespace(quot;really.long.nested.namespacequot;);
*/ * @property opera
* </pre>
ie:0,
* This fails because quot;longquot; is a future reserved word in ECMAScript * @type float
*/
*
/** opera:0,
* @method namespace
* Opera version number or 0. Example: 9.2
* @static
* @property opera /**
* @param {String*} arguments 1-n namespaces to create
* @type float
* @return {Object} A reference to the last namespace object created * Gecko engine revision number. Will evaluate to 1 if
*/ Gecko
*/
opera:0, * is detected but the revision could not be found.
YAHOO.namespace = function() {
Other browsers
var a=arguments, o=null, i, j, d;
/** * will be 0. Example: 1.8
for (i=0; i<a.length; i=i+1) {
* Gecko engine revision number. * Will evaluate to 1 if Gecko
<pre>
d=a[i].split(quot;.quot;);
* is detected but the revision could not be found. 1.7.8 browsers
* Firefox 1.0.0.4: Other <-- Reports 1.7
o=YAHOO;
* will be 0. Example: 1.8 * Firefox 1.5.0.9: 1.8.0.9 <-- Reports 1.8
* <pre>
// YAHOO is implied, so it is ignored if it is included
for (j=(d[0] == quot;YAHOOquot;) ? 1 :*0; j<d.length; j=j+1) {
Firefox 1.0.0.4: 1.7.8 <-- Reports 1.7
* Firefox 1.5.0.9: 1.8.0.9 <-- Reports 1.8
o[d[j]]=o[d[j]] || {};
* Firefox 2.0.0.3: 1.8.1.3 <-- Reports 1.8
* Firefox 3 alpha: 1.9a4 <-- Reports 1.9
5. (some) YUI Goals
• Provide solid foundations:
• Patch up DOM API
• Do the hard work for you (CSS layouts,
browser testing etc.)
• Avoid repeating yourself (reusable
components)
• Make it simple: consistent design, good
documentation
6. Javascript widgets
• Common need: enhance page
functionality in an unobtrusive, accessible
way
• ActiveX Flash Javascript is (most often) the
appropriate way to do this
• nice to make this reusable on many pages/
sites
7. YUI widgets
• Autocomplete • Logger
• Button • Menu
• Calendar • Rich Text Editor
• Color Picker • Slider
• Container • TabView
• DataTable • TreeView
8. YUI widgets
• Autocomplete • Logger
• Button • Menu
• Calendar • Rich Text Editor
• Color Picker • Slider
• Container • TabView
• DataTable • TreeView
9. YUI Container
“The Container family of components is
designed to enable developers to create
different kinds of content-containing
modules on the web.”
“Module and Overlay are the most basic
containers, and they can be used directly or
extended to build custom containers.”
27. Custom Events
/**
* Initializes the custom events for YAHOO.Cyril.ContactList.
* This method gets called by YAHOO.widget.Module.prototype.init
* @method initEvents
*/
YAHOO.Cyril.ContactList.prototype.initEvents = function() {
// call the base class method to make sure inherited custom events get set up
YAHOO.Cyril.ContactList.superclass.initEvents.call(this);
/**
* CustomEvent fired before showing a different contact
* @event beforeUpdateContactsEvent
* @param {HTMLElement} contactElement LI HTMLElement for the contact to show
*/
this.beforeUpdateContactsEvent = new YAHOO.util.CustomEvent(quot;beforeShowContactquot;, this);
/**
* CustomEvent fired after showing a different contact
* @event updateContactsEvent
* @param {HTMLElement} contactElement LI HTMLElement for the contact now displayed
*/
this.updateContactsEvent = new YAHOO.util.CustomEvent(quot;showContactquot;, this);
};
28. Custom Events
giving control to third-party code
contact_list.updateContactsEvent.subscribe(function(type, args) {
alert(args[0].current_index);
});
var contactElement = get a reference to the new contact element here;
if (this.beforeUpdateContactsEvent.fire(contactElement)) {
// ... change the contact displayed to contactElement here
}
this.updateContactsEvent.fire(contactElement);
29. Init function
• called upon instantiation
• some “mandatory” things to do
• gets your widget up and running
31. Init function
Fire quot;beforeInitquot; and quot;initquot; events when appropriate
this.beforeInitEvent.fire(YAHOO.Cyril.ContactList);
// .. rest of the init function
this.initEvent.fire(YAHOO.Cyril.ContactList);
Note there is no need to call this.initEvents(...) to
initialise Custom Events
32. Init function
Cache DOM references
// cache element reference
this.some_element = document.getElementById('some_element_id');
No need for the main widget’s element + header, body,
and footer child elements.
33. Init function
Do DOM manipulations
// create/modify DOM elements (ie. previous/next links)
this.initDOMManipulations();
34. Init function
set up Event listeners
// initialise event delegation
this.initEventListeners();
35. Init function
Default behaviour
// show/hide contact elements
this.updateDisplay();
36. Init function
YAHOO.Cyril.ContactList.prototype.init = function(el, userConfig) {
// Note that we don't pass the user config in here yet because we only want it processed once, at
the lowest subclass level (by calling this.cfg.applyConfig later on)
// this also calls this.initEvents
YAHOO.Cyril.ContactList.superclass.init.call(this, el/*, userConfig*/);
// fire event saying we are about to start the initialisation
this.beforeInitEvent.fire(YAHOO.Cyril.ContactList);
if (userConfig) {
this.cfg.applyConfig(userConfig, true);
}
this.contact_elements = this.body.getElementsByTagName('li');
if (this.contact_elements.length == 0) {
return;
}
this.current_index = 0;
// create/modify DOM elements (ie. previous/next links)
this.initDOMManipulations();
// show/hide contact elements
this.updateDisplay();
// initialise event delegation
this.initEventListeners();
// fire event saying initialisation of the Control is done
this.initEvent.fire(YAHOO.Cyril.ContactList);
};
37. Multiple instances
• store instance in an Array
• Custom Events don’t get in the way
YAHOO.util.Event.onDOMReady(function() {
// grab all contact lists by their classes and instanciate them.
var contact_lists = YAHOO.util.Dom.getElementsByClassName('contact-list');
for (var i = 0, contact_list; contact_list = contact_lists[i]; i ++) {
var control = new YAHOO.Cyril.ContactList(contact_list);
// store a reference to the instance
YAHOO.Cyril.contactLists = [ control ]
control.updateContactsEvent.subscribe(function(type, args) {
alert('Current index: ' + args[0].current_index);
});
}
});
![Warnings
Lots of code
/**
YAHOO.env.ua = function() {
* Returns the namespace specified and creates it if it doesn't exist
var o={
* <pre>
* YAHOO.namespace(quot;property.packagequot;);
/**
* YAHOO.namespace(quot;YAHOO.property.packagequot;);
* Internet Explorer version number or 0. Example: 6
* </pre>
YAHOO.env.ua = function() { * @property ie
* Either of the above would create YAHOO.property, then
var o={ * @type float
* YAHOO.property.package
*/
*
/** ie:0,
* Be careful when naming packages. Reserved words may work in some browsers
* Internet Explorer version number or 0. Example: 6
* and not others. For instance, the following will fail in Safari:
* @property ie /**
* <pre>
* @type float * Opera version number or 0. Example: 9.2
* YAHOO.namespace(quot;really.long.nested.namespacequot;);
*/ * @property opera
* </pre>
ie:0,
* This fails because quot;longquot; is a future reserved word in ECMAScript * @type float
*/
*
/** opera:0,
* @method namespace
* Opera version number or 0. Example: 9.2
* @static
* @property opera /**
* @param {String*} arguments 1-n namespaces to create
* @type float
* @return {Object} A reference to the last namespace object created * Gecko engine revision number. Will evaluate to 1 if
*/ Gecko
*/
opera:0, * is detected but the revision could not be found.
YAHOO.namespace = function() {
Other browsers
var a=arguments, o=null, i, j, d;
/** * will be 0. Example: 1.8
for (i=0; i<a.length; i=i+1) {
* Gecko engine revision number. * Will evaluate to 1 if Gecko
<pre>
d=a[i].split(quot;.quot;);
* is detected but the revision could not be found. 1.7.8 browsers
* Firefox 1.0.0.4: Other <-- Reports 1.7
o=YAHOO;
* will be 0. Example: 1.8 * Firefox 1.5.0.9: 1.8.0.9 <-- Reports 1.8
* <pre>
// YAHOO is implied, so it is ignored if it is included
for (j=(d[0] == quot;YAHOOquot;) ? 1 :*0; j<d.length; j=j+1) {
Firefox 1.0.0.4: 1.7.8 <-- Reports 1.7
* Firefox 1.5.0.9: 1.8.0.9 <-- Reports 1.8
o[d[j]]=o[d[j]] || {};
* Firefox 2.0.0.3: 1.8.1.3 <-- Reports 1.8
* Firefox 3 alpha: 1.9a4 <-- Reports 1.9](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)