0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

improve design patterns example

Browse source
This commit is contained in:
rolux 2012-06-26 17:33:32 +02:00
parent fdb1348b39
commit 544aa77223
1 changed files with 16 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
examples/ui/widget_design_patterns/js/example.js
View file

@ -7,7 +7,9 @@ The following examples illustrate the common design pattern for `OxJS` UI
widgets: an inheritance model that is neither classical nor prototypal, but widgets: an inheritance model that is neither classical nor prototypal, but
"parasitical" (a term coined by <a "parasitical" (a term coined by <a
href="http://www.crockford.com/javascript/inheritance.html">Douglas href="http://www.crockford.com/javascript/inheritance.html">Douglas
Crockford</a>). In a nutshell, "instances" are created by augmenting other Crockford</a>).
In a nutshell, "instances" are created by augmenting other
instances, but in addition to private members (`var foo`) and public members instances, but in addition to private members (`var foo`) and public members
(`that.bar`), they can have shared private members (`self.baz`). `self` cannot (`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 be accessed from outside, but since `self` itself is an argument of the
@ -73,7 +75,7 @@ Ox.My.Box = function(options, self) {
derived from it) provides, on its prototype, all methods of a jQuery derived from it) provides, on its prototype, all methods of a jQuery
`$('<div>')`. Chaining works too: If you have `var $d = $('<div>'), $e = `$('<div>')`. Chaining works too: If you have `var $d = $('<div>'), $e =
Ox.Element();`, then `$d.appendTo($e)` returns `$d`, and `$e.append($d)` Ox.Element();`, then `$d.appendTo($e)` returns `$d`, and `$e.append($d)`
returns `$e`. If you type Ox.Element() in the console, you will get returns `$e`. If you type `Ox.Element()` in the console, you will get
something like `[<div class="OxElement"></div>]`. Any widget's `0` something like `[<div class="OxElement"></div>]`. Any widget's `0`
property is an actual DOM element, and in case you ever need the property is an actual DOM element, and in case you ever need the
jQuery-wrapped element &mdash; that's the widget's `$element` property. jQuery-wrapped element &mdash; that's the widget's `$element` property.
@ -227,7 +229,7 @@ Ox.My.InvertibleBox = function(options, self) {
/* /*
When `setColor` is invoked as an update handler, returning `false` signals When `setColor` is invoked as an update handler, returning `false` signals
that no other handler should run. Otherwise, the original handler of that no further handlers should run. Otherwise, the original handler of
`Ox.My.Box` would run next, and revert any inversion we might have done `Ox.My.Box` would run next, and revert any inversion we might have done
here. here.
*/ */
@ -259,8 +261,7 @@ Ox.My.InvertibleBox = function(options, self) {
</pre> </pre>
*/ */
that.invert = function() { that.invert = function() {
that.options({inverted: !self.options.inverted}); that.options({inverted: !self.options.inverted}).triggerEvent('invert');
that.triggerEvent('invert');
return that; return that;
}; };
@ -371,7 +372,7 @@ Ox.My.MetaBox = function(options, self) {
self.$boxes.forEach(function(array) { self.$boxes.forEach(function(array) {
array.forEach(self.invertBox); array.forEach(self.invertBox);
}); });
that.triggerEvent('invert'); that.options({inverted: !self.options.inverted}).triggerEvent('invert');
return that; return that;
}; };
@ -482,7 +483,7 @@ Ox.My.ImageBox = function(options, self) {
var that = Ox.My.Box({}, self).displayText('Loading...'); var that = Ox.My.Box({}, self).displayText('Loading...');
/* /*
It's not required to define empty defaults &mdash; omitting them would It's not required to define empty defaults &mdash; omitting them would
simply leave them undefined). Still, to add an explicit `null` default is a simply leave them undefined. Still, to add an explicit `null` default is a
good practice, as it makes it obvious to any reader of our code that good practice, as it makes it obvious to any reader of our code that
`Ox.My.ImageBox` expects an `image` option. `Ox.My.ImageBox` expects an `image` option.
*/ */
@ -591,7 +592,7 @@ Ox.load(['Image', 'UI'], function() {
*/ */
var h = Ox.random(360), s = 1, l = 0.5; var h = Ox.random(360), s = 1, l = 0.5;
/* /*
Create a global variable, so that we can play with our widgets in the Create a global variable, so that we can interact with our widgets in the
console. console.
*/ */
window.My = {}; window.My = {};
@ -631,12 +632,15 @@ Ox.load(['Image', 'UI'], function() {
.appendTo(Ox.$body); .appendTo(Ox.$body);
/* /*
As a last step, we add a handler to the `invert` event of each widgets. It As a last step, we add a handler to the `invert` event of each widgets. It
will display the widget name inside the `Ox.My.Box`. will display the widget's name and options inside the `Ox.My.Box`.
*/ */
Ox.forEach(My, function($element, name) { Ox.forEach(My, function($box, name) {
$element.bindEvent({ $box.bindEvent({
invert: function() { invert: function() {
My.$box.displayText(name[1].toUpperCase() + name.slice(2)); My.$box.displayText(
'<b>' + name[1].toUpperCase() + name.slice(2) + '</b><br>'
+ JSON.stringify($box.options()).replace(/([,:])/g, '$1 ')
);
} }
}); });
}); });