oxjs/examples/widget_design_patterns/js/example.js

332 lines
10 KiB
JavaScript
Raw Normal View History

2012-05-29 10:22:06 +00:00
/*
2012-06-12 12:32:49 +00:00
The following examples explain the common design pattern for OxJS UI widgets: an
inheritance model that is neither classical nor prototypal, but "parasitical" (a
term coined by <a
2012-05-29 10:22:06 +00:00
href="http://www.crockford.com/javascript/inheritance.html">Douglas
Crockford</a>). In a nutshell, "instances" are created by augmenting other
instances, but in addition to private members (`var foo`) and public members
(`that.bar`), they can have shared private members (`self.baz`). `self` cannot
be accessed from outside, but since `self` itself is an argument of the
"constructor", an instance can inherit its parent's `self` by passing its own
`self`.
*/
2012-05-28 14:38:16 +00:00
'use strict';
/*
Load the UI module.
*/
Ox.load('UI', function() {
/*
Create our own namespace.
*/
Ox.My = {};
/*
First, lets build the most basic Box widget. A widget is a "constructor"
function that takes two (optional) arguments, `options` and `self`, and
returns a widget object. It's not a constructor in JavaScript terms though:
2012-05-29 10:22:06 +00:00
It doesn't have to be called with `new`, and doesn't return an `instanceof`
2012-05-28 14:38:16 +00:00
anything. It just enhances another widget object and returns it.
*/
Ox.My.Box = function(options, self) {
/*
This is how every widget "constructor" begins. `self` is the widget's
2012-05-29 10:22:06 +00:00
shared private object.
2012-05-28 14:38:16 +00:00
*/
self = self || {};
/*
`that` is the widget itself, its public object, or, in JavaScript terms,
2012-05-29 10:22:06 +00:00
its `this`. Every widget "inherits" from another widget by simple
2012-05-28 14:38:16 +00:00
assignment. All public properties of the "super" widget, i.e. all
properties of its `that`, will be present on our own `that`. In this
case, we use Ox.Element, the "root" widget at the end of the inheritance
chain, and pass an empty options object. But we always pass our own
`self`, which means that any property that Ox.Element (or any other
2012-05-29 10:22:06 +00:00
widget in the inheritance chain) adds to `self` will be present on our
own `self`. Then we call the public `defaults`, `options` and `update`
methods of Ox.Element. `defaults` assigns the defaults object to
`self.defaults` and copies it to `self.options`, `options` extends
`self.options` with the options object, and `update` adds one or more
callbacks that are invoked whenever, by way of calling the `options`
method, a property of `self.options` is modified or added.
2012-05-28 14:38:16 +00:00
*/
var that = Ox.Element({}, self)
.defaults({
color: [128, 128, 128],
size: 128
})
2012-05-28 16:15:16 +00:00
.options(options || {})
.update({
color: setColor,
size: setSize
});
2012-05-28 14:38:16 +00:00
/*
2012-05-29 10:22:06 +00:00
The second part of the "constructor" function can be thought of as the
"initializer", and contains everything needed to set up the "instance".
In this case, we just define a minimum and maximum size and then set the
widget's color and size. We could have used `var minSize` and `var
maxSize` here, but by using `self` for private variables that we want to
be accessible across all the widget's methods, we can be sure that
inside such methods, any local `var` is actually local to the method.
2012-05-28 14:38:16 +00:00
*/
self.minSize = 128;
self.maxSize = 384;
setColor();
setSize();
/*
2012-05-29 10:22:06 +00:00
Third, we declare the widget's private methods. These are just function
2012-05-28 14:38:16 +00:00
declarations, hoisted to the top of the "constructor".
*/
function setColor() {
/*
To interact with the DOM, Ox.Element (and any widget derived from
2012-05-29 10:22:06 +00:00
it) wraps jQuery. If you type Ox.Element() in the console, you
2012-05-28 14:38:16 +00:00
will get something like `[<div class="OxElement"></div>]`, and the
widget's prototype has all the methods of a `$('<div>')`, with
proper chaining. If you have `var $d = $('<div>'), $e =
Ox.Element();`, then `$d.appendTo($e)` returns `$d`, and
`$e.append($d)` returns `$e`.
*/
that.css({
backgroundColor: 'rgb(' + self.options.color.join(', ') + ')',
});
}
function setSize() {
/*
2012-05-29 10:22:06 +00:00
Before setting the size, we make sure the value is between `minSize`
and `maxSize`.
2012-05-28 14:38:16 +00:00
*/
self.options.size = Ox.limit(
self.options.size, self.minSize, self.maxSize
);
that.css({
height: self.options.size + 'px',
width: self.options.size + 'px'
});
}
/*
Next, we define the widgets public methods, as properties of `that`.
(Note that unlike private methods, they are not hoisted.)
*/
that.showOptions = function() {
/*
As there isn't much to do yet, this method just displays the
widget's options.
*/
that.html(JSON.stringify(self.options).replace(/([,:])/g, '$1 '));
/*
Public methods should return `that`, for chaining.
*/
return that;
};
/*
2012-05-29 10:22:06 +00:00
And finally, at the very end of the "constructor", we return `that`. And
2012-05-28 14:38:16 +00:00
that's it.
*/
return that;
};
/*
2012-05-29 10:22:06 +00:00
<pre>
Ox.My.Box({color: [255, 0, 0]})
.appendTo(Ox.$body)
.options({size: 256})
.showOptions();
</pre>
2012-05-28 14:38:16 +00:00
*/
2012-05-28 16:15:16 +00:00
Ox.My.RoundedBox = function(options, self) {
self = self || {};
var that = Ox.My.Box({}, self);
that.defaults(Ox.extend(that.defaults(), {
radius: 16
}))
.options(options || {})
.update(function(key, value) {
if (key == 'radius') {
setRadius();
}
});
setRadius();
function setRadius() {
that.css({
MozBorderRadius: self.options.radius + 'px',
OBorderRadius: self.options.radius + 'px',
WebkitBorderRadius: self.options.radius + 'px'
});
}
return that;
};
2012-05-28 14:38:16 +00:00
window.myBox = Ox.My.Box().appendTo(Ox.$body);
2012-05-28 16:15:16 +00:00
window.myRoundedBox = Ox.My.RoundedBox().appendTo(Ox.$body);
2012-05-28 14:38:16 +00:00
return;
Ox.My.Box = function(options, self) {
self = self || {};
var that = Ox.Element('<div>', self)
.defaults({
color: [128, 128, 128],
size: 128
})
.options(options || {})
.addClass('OxMyBox OxMonospace')
.css({
color: 'white',
padding: '16px',
textShadow: '1px 1px 1px black'
})
.bindEvent({
anyclick: focus,
key_0: reset,
key_equal: function() {
Ox.print('+', self.options.size)
setSize(self.options.size + 16, true);
},
key_minus: function() {
setSize(self.options.size - 16, true);
}
});
self.initialSize = self.options.size;
self.minSize = 128;
self.maxSize = 384;
setColor();
setSize(self.options.size);
showOptions();
function focus(e) {
Ox.print(e.target);
if (e.target == that.$element[0]) {
that.gainFocus();
}
}
function setColor() {
that.css({
backgroundColor: 'rgb(' + self.options.color.join(', ') + ')',
});
}
function setSize(size, animate) {
var css;
self.options.size = Ox.limit(size, self.minSize, self.maxSize);
css = {
height: self.options.size + 'px',
width: self.options.size + 'px',
};
Ox.print('SET SIZE', size, animate, self.minSize, self.maxSize, css)
if (animate) {
that.stop().animate(css, 100, showOptions);
} else {
that.css(css);
}
}
function showOptions() {
try {
that.html(JSON.stringify(self.options).replace(/([,:])/g, '$1 '));
} catch(e) {}
}
function reset() {
self.options = self.initialOptions;
showOptions();
}
self.setOption = function(key, value) {
if (key == 'color') {
setColor();
} else if (key == 'size') {
setSize(value);
}
showOptions();
};
return that;
};
Ox.My.RoundedBox = function(options, self) {
self = self || {};
var that = Ox.My.Box({}, self);
that.defaults(Ox.extend(that.defaults(), {
radius: 16
}))
.options(options || {});
setRadius();
function setRadius() {
that.css({
MozBorderRadius: self.options.radius + 'px',
OBorderRadius: self.options.radius + 'px',
WebkitBorderRadius: self.options.radius + 'px'
});
}
self.setSuperOption = self.setOption;
self.setOption = function(key, value) {
if (key == 'radius') {
setRadius();
} else {
self.setSuperOption(key, value);
}
}
return that;
};
Ox.My.MetaBox = function(options, self) {
self = self || {};
Ox.print('MB', options)
var that = Ox.My.Box({}, self);
that.defaults(Ox.extend(that.defaults(), {
boxes: []
}))
.options(options || {});
self.options.boxes.forEach(function(box) {
that.append(box);
});
return that;
};
Ox.My.MetaBox({
boxes: [
Ox.My.Box({
color: [64, 128, 255]
}),
Ox.My.RoundedBox({
color: [255, 128, 64]
})
],
size: 384
})
.appendTo(Ox.$body);
});