Building interactive
widgets with YUI
Cyril Doussin
Yahoo! EU Front-End Summit, Dec 2007

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(\"property.package\");
/**
* YAHOO.namespace(\"YAHOO.property.package\");
* 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(\"really.long.nested.namespace\");
*/ * @property opera
* </pre>
ie:0,
* This fails because \"long\" 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(\".\");
* 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] == \"YAHOO\") ? 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

Warnings
(probably) Norm incompatible

Warnings
soz

(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

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

YUI widgets
• Autocomplete • Logger
• Button • Menu
• Calendar • Rich Text Editor
• Color Picker • Slider
• Container • TabView
• DataTable • TreeView

YUI widgets
• Autocomplete • Logger
• Button • Menu
• Calendar • Rich Text Editor
• Color Picker • Slider
• Container • TabView
• DataTable • TreeView

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.”

YUI Container
Module
Overlay
Tooltip Panel
Dialog
SimpleDialog

YUI Container
Module
Overlay Your Control
Tooltip Panel
Dialog
SimpleDialog

YAHOO.widget.Module
• Common markup structure
• Customisation through Configuration
• Custom Events
• Utility functions

Our example:
Contact List with pagination

Setting things up:
Basic Markup
<h2>Contacts</h2>
<ol>
<li>
<dl>
<dt>Name</dt>
<dd>Ed Eliot</dd>
<dt>Web site</dt>
<dd><a href=\"http://www.ejeliot.com/\">ejeliot.com</a></dd>
</dl>
</li>
<li>
<dl>
<dt>Name</dt>
<dd>Stuart Colville</dd>
<dt>Web site</dt>
<dd><a href=\"http://muffinresearch.co.uk/\">Muffin Research Labs</a></dd>
</dl>
</li>
<li>
<dl>
<dt>Name</dt>
<dd>Ben Ward</dd>
<dt>Web site</dt>
<dd><a href=\"http://ben-ward.co.uk/\">ben-ward.co.uk</a></dd>
</dl>
</li>
</ol>

Setting things up:
Structured Markup
<div id=\"contact-list\">
<div class=\"hd\">
<h2>Contacts</h2>
</div>
<div class=\"bd\">
<ol>
<li>
<dl>
<dt>Name</dt>
<dd>Ed Eliot</dd>
<dt>Web site</dt>
<dd><a href=\"http://www.ejeliot.com/\">ejeliot.com</a></dd>
</dl>
</li>
<li>
<dl>
<dt>Name</dt>
<dd>Stuart Colville</dd>
<dt>Web site</dt>
<dd><a href=\"http://muffinresearch.co.uk/\">Muffin Research Labs</a></dd>
</dl>
</li>
<li>
<!-- ... -->
</li>
</ol>
</div>
<div class=\"ft\"></div>
</div>

Setting things up:
Structured Markup
<div id=\"contact-list\">
<div class=\"hd\">
<h2>Contacts</h2>
</div>
<div class=\"bd\">
<ol>
<li>
<dl>
<dt>Name</dt>
<dd>Ed Eliot</dd>
<dt>Web site</dt>
<dd><a href=\"http://www.ejeliot.com/\">ejeliot.com</a></dd>
</dl>
</li>
<li>
<dl>
<dt>Name</dt>
<dd>Stuart Colville</dd>
<dt>Web site</dt>
<dd><a href=\"http://muffinresearch.co.uk/\">Muffin Research Labs</a></dd>
</dl>
</li>
<li>
<!-- ... -->
</li>
</ol>
</div>
<div class=\"ft\"></div>
</div>

Setting things up:
dependencies
• YAHOO
• YAHOO.util.Dom
• YAHOO.util.Event
<script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.4.0/build/yahoo-dom-event/yahoo-dom-event.js\"></
script>
• YAHOO.widget
• YAHOO.widget.Module
<script type=\"text/javascript\" src=\"http://yui.yahooapis.com/2.4.0/build/container/container-min.js\"></script>

Setting things up:
extending Module
YAHOO.namespace(YAHOO.Cyril);
YAHOO.Cyril.ContactList = function(el, userConfig) {
YAHOO.Cyril.ContactList.superclass.constructor.call(this, el, userConfig);
};
YAHOO.extend(YAHOO.Cyril.ContactList, YAHOO.widget.Module);

Done :)
YAHOO.util.Event.onDOMReady(function() {
var contact_list = new YAHOO.Cyril.ContactList('contact-list');
});
YAHOO.util.Event.onDOMReady(function() {
var contact_list = new YAHOO.Cyril.ContactList('contact-list');
YAHOO.util.Dom.batch(
[ contact_list.element, contact_list.header, contact_list.body, contact_list.footer],
function(el) {
el.style.border = '1px solid red';
}
);
});

Done :)

Configuration
YAHOO.Cyril.ContactList.prototype.initDefaultConfig = function () {
YAHOO.Cyril.ContactList.superclass.initDefaultConfig.call(this);
/**
* Maximum number of contacts to show
* @config
* @type Number
* @default 2
*/
this.cfg.addProperty('num_contacts', {
handler: this.configNumContacts,
validator: this.validateNumContacts,
suppressEvent: true,
supercedes: false,
value: 2
});
}

Configuration
YAHOO.Cyril.ContactList.prototype.validateNumContacts = function(value) {
value = parseInt(value);
return !(isNan(value) || (value < 1) || (value > 3));
};

Configuration
contact_list.config.setProperty('num_contacts', 1);
alert(contact_list.getProperty('num_contacts));

Custom Events

Custom Events

Custom Events
A structured way to make your Control play well:
• with other Controls
• with itself

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(\"beforeShowContact\", 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(\"showContact\", this);
};

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);

Init function
• called upon instantiation
• some “mandatory” things to do
• gets your widget up and running

Init function
Call YAHOO.widget.Module.prototype.init
YAHOO.Cyril.ContactList.superclass.init.call(this, el/*, userConfig*/);

Init function
Fire \"beforeInit\" and \"init\" 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

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.

Init function
Do DOM manipulations
// create/modify DOM elements (ie. previous/next links)
this.initDOMManipulations();

Init function
set up Event listeners
// initialise event delegation
this.initEventListeners();

Init function
Default behaviour
// show/hide contact elements
this.updateDisplay();

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);
};

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);
});
}
});

Teh End
Cyril Doussin (http://cyril.doussin.name)
YUI: http://developer.yahoo.com/yui/
YUI blog: http://yuiblog.com
• http://www.wat.tv/playlist/689334
• http://www.jaunted.com/files/3873/French_baguette.jpg
• http://flickr.com/photos/plasticbag/971055811/
• http://flickr.com/photos/intranation/1113203816/
• http://flickr.com/photos/intranation/1870271315/