update example

examples/widget_design_patterns/js/example.js

@@ -45,7 +45,11 @@ Ox.load('UI', function() {
                 color: [128, 128, 128],
                 size: 128
             })
-            .options(options || {});
+            .options(options || {})
+            .update({
+                color: setColor,
+                size: setSize
+            });
 
         /*
         Ox.Element, and every widget that inherits from it, has a private
@@ -55,13 +59,6 @@ Ox.load('UI', function() {
         `self.setOption` untouched. In this case though, we want to update color
         and size, so we just overwrite `self.setOption`.
         */
-        self.setOption = function(key, value) {
-            if (key == 'color') {
-                setColor();
-            } else if (key == 'size') {
-                setSize();
-            }
-        };
 
         /*
         The following part of the "constructor" function can be thought of as
@@ -141,7 +138,37 @@ Ox.load('UI', function() {
     `Ox.My.Box({size: 256}).appendTo(Ox.$body).showOptions()`
     */
 
+    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;
+
+    };
+
+
     window.myBox = Ox.My.Box().appendTo(Ox.$body);
+    window.myRoundedBox = Ox.My.RoundedBox().appendTo(Ox.$body);
     return;
 
     Ox.My.Box = function(options, self) {