blok: jQuery ui and Joose

blok: jQuery ui and Joose


Hey,
I wanted to let you guys know about a little project that might be
interesting to some of you.
http://blok.appspot.com is a simple application for collaborative
editing of user interface prototypes with live AJAX synchronization
between all clients that are looking at the same document.
blok makes heavy use of various features of jQuery UI and combines it
with a simple component framework based on Joose
(http://code.google.com/p/joose-js/).
You can find blok's source code in the examples directory of Joose's
svn repository. Shapes are customized using roles (think traits or
mixin + interface). This is an example for a role that enables a shape
to get the focus:
Module("block.ui.role", function () {
Role("Focusable", {
after: {
place: function () {
var me = this;
this.$.mousedown(function () {
document.manager.switchFocus(me)
})
},
focus: function () {
this.$.addClass("focus")
},
blur: function () {
this.$.removeClass("focus")
}
}
})
})
The source code for the shape rectangle looks like this:
Module("block.ui.shape", function (m) {
Class("Rectangle", {
isa: block.ui.Shape,
does: [
block.ui.role.Draggable,
block.ui.role.Resizable,
block.ui.role.Focusable,
block.ui.role.Editable,
block.ui.role.ShapeUI
],
has: {
_text: {
is: "rw",
init: ""
}
},
methods: {
create: function () {
return jQuery("<div class='rectangle shape'><table
width=100% height=100%><tr><td valign=center align=center
class='textField stdText'></td></tr></table></div>")
}
}
});
})
Hope this is interesting :)
Malte