Skip to content

Instantly share code, notes, and snippets.

@gdakram
Forked from kara-ryli/yui-widget-structure.js
Created January 21, 2012 01:48
Show Gist options
  • Save gdakram/1650717 to your computer and use it in GitHub Desktop.
Save gdakram/1650717 to your computer and use it in GitHub Desktop.
Basic YUI Widget Structure, commented up to work with yuidocs.
/* global YUI */
/**
* My Module's purpose
* @module my-module
* @requires base-build, widget
*/
YUI.add("my-module", function (Y) {
"use strict";
/**
* @class Y.MyWidget
* @extends Y.Widget
* @constructor
**/
Y.MyWidget = Y.Base.create("my-module", Y.Widget, [], {
/**
* Publishing events and running
* instantiations that doesn't require DOM.
* @method initializer
*/
initializer: function () {
// publish any events
// do any instantiation that doesn't require DOM
},
/**
* The renderUI method creates the following {Y.Node}s and appends them to the {contentBox}:
* <ol>
* <li>Title Node</li>
* <li>Button Node</li>
* </ol>
* @method renderUI
*/
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;
},
/**
* Bind events listeners in widget.
* @method bindUI
*/
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);
},
/**
* The change event handler for the title attribute.
* @private
* @method _afterTitleChange
* @param {Object} event Title Change Event
*/
_afterTitleChange: function (event) {
this._titleNode.setContent(event.newVal);
},
/**
* Method's purpose
* @method syncUI
*/
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")
});
},
/**
* Detaching event handlers and nulling node references.
* @method destructor
*/
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: {
/**
* The title attribute of the widget.
*
* @attribute title
* @type String
* @default "No one gave me a title :("
*/
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
});
{
"name": "YUI Doc Test",
"description": "YUIDoc documentation tool written in Javascript",
"version": "Version 0.0.1",
"url": "",
"options": {
"linkNatives": "true",
"attributesEmit": "true",
"outdir": "out/"
}
}
@gdakram
Copy link
Author

gdakram commented Jan 21, 2012

You'll need npm (node package manager) installed in your system before yuidoc can be installed.

Clone and install yuidoc from: https://github.com/davglass/yuidocjs. Follow the steps in the project's home page.

Put the two files above into a directory and invoke "yuidoc ." and check out the "out" directory for the output.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment