public
Last active

Basic YUI Widget Structure.

  • Download Gist
yui-widget-structure.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
/* global YUI */
YUI.add("my-module", function (Y) {
"use strict";
 
Y.MyWidget = Y.Base.create("my-module", Y.Widget, [], {
initializer: function () {
// publish any events
// do any instantiation that doesn't require DOM
},
renderUI: function () {
// create all DOM nodes
var title = Y.Node.create("<div></div>"),
button = Y.Node.create("<div>Click Me!</div>");
// use this.getClassName(arg1s...) to create unque classes
title.addClass(this.getClassName("title"));
button.addClass(this.getClassName("button"));
// add nodes to the page all at once
this.get("contentBox").append(Y.all([title, button]));
// store shortcuts for DOM you'll need to reference
this._titleNode = title;
this._buttonNode = button;
},
bindUI: function () {
// store references to event handlers you set on other
// objects for clean up later
this._buttonClickHandler = this._buttonNode.on("click", function (event) {
Y.log("you clicked the button!");
event.halt();
}, this);
// assign listeners to events on the instance directly
// they're cleaned up automatically
this.after("titleChange", this._afterTitleChange, this);
},
_afterTitleChange: function (event) {
this._titleNode.setContent(event.newVal);
},
syncUI: function () {
// now that the DOM is created, syncUI sets it up
// given the current state of our ATTRS
this._afterTitleChange({
newVal: this.get("title")
});
},
destructor: function () {
if (this.get("rendered")) {
// bindUI was called, clean up events
this._buttonClickHandler.detach();
this._buttonClickHandler = null;
// renderUI was called, clean up shortcuts
this._titleNode = this._buttonNode = null;
}
}
}, {
// Public attributes that broadcast change events
ATTRS: {
title: {
value: "No one gave me a title :("
}
},
// Attributes whose default values can be scraped from HTML
HTML_PARSER: {
title: function (srcNode) {
return srcNode.getAttribute("title");
}
}
});
}, "3.3.0", {
requires: [
"base-build", // provides Y.Base.create
"widget" // provides Y.Widget
],
group: "nfl", // declares the nfl group (important for skins)
skinnable: true // declares that your module is skinned
});

Backing up my comment on this post.

I recommend extending Base via Y.Base.create. See my YUIConf vid for details: http://www.youtube.com/watch?v=_zhQIfT7g58

Thanks. Updated the example to a more thorough description of Y.Widget.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.