To create a widget class, you inherit from require('skyview') or from another view.

var SkyView =require('skyview')

, inherits =require('util').inherits

functionDialog(opts){

SkyView.call(this, opts)

this.clicks =0

}

inherits(Dialog, SkyView)

Define the template. Substitutions are {field}, in this case {title}
and {body}. :title indicates that that element should be attached
to the Dialog – it will be available as this.title once the
element is rendered.

Dialog.prototype.View

('<div class="dialog">'

+'<button class="dialog-close">close</button>'

+'<div:title class="dialog-title">{title}</div>'

+'<div class="dialog-body">{body}</div>'

+'</div>')

Attach events using event delegation. For example, when an element matching
.dialog-close within this.el is clicked, this.onClick will be called
with the event.

.on(

{".dialog-close click":"onClick"

,".dialog-close mousedown":

function(){

console.log("closing soon")

}

,"dblclick":"onDoubleClick"

})

The given function will be called when the Dialog is destroyed.

.destroy(function(){

console.log("destroying",this)

})

Every SkyView needs a render() method, which attaches this.el to the DOM.

Dialog.prototype.render=function(){

document.body.appendChild(this.el)

}

Implement the event handlers.

Dialog.prototype.onClick=function(event){

console.log("you clicked the close button",event)

this.destroy()

}

Dialog.prototype.onDoubleClick=function(){

console.log("you double-clicked on the dialog",++this.clicks,"times")

}

When a Dialog is initialized, the template is filled, an element is created,
render is called to add it to the DOM, and appropriate the event listeners
are attached (using event delegation).

var dialog =newDialog(

{ title:"<h1>The title</h1>"

, body:"some content"

})

dialog.el // div.dialog

dialog.title// div.dialog-title

SkyView#destroy removes the element and cleans up, calling the destroy() listeners.
Alternatively, there is a remove() method that only detaches the element from the DOM.

dialog.destroy()

Views can inherit from one another.

functionLoudDialog(label){

Dialog.call(this,

{ title:"loud dialog title"

, label: label

})

}

inherits(LoudDialog, Dialog)

Fill the body field of the Dialog template with a new template.

Any event handlers or destroy() listeners added here will be in addition to
the ones defined on Dialog.