diff --git a/src/core/h.js b/src/core/h.js
index 5ec9f5112..22326288a 100644
--- a/src/core/h.js
+++ b/src/core/h.js
@@ -39,10 +39,17 @@ BI.h = function (type, props, children) {
             right: children
         }, props);
     }
-    if (children.length === 1 && BI.isKey(children[0])) {
-        return BI.extend({
-            type: type
-        }, { text: children[0] }, props);
+    if (children.length === 1) {
+        if (BI.isKey(children[0])) {
+            return BI.extend({
+                type: type
+            }, { text: children[0] }, props);
+        }
+        if (BI.isFunction(children[0])) {
+            return BI.extend({
+                type: type
+            }, { text: children[0], items: children[0] }, props);
+        }
     }
 
     return BI.extend({
diff --git a/src/core/wrapper/layout/adapt/absolute.center.js b/src/core/wrapper/layout/adapt/absolute.center.js
index fd4881975..67d37c4bc 100644
--- a/src/core/wrapper/layout/adapt/absolute.center.js
+++ b/src/core/wrapper/layout/adapt/absolute.center.js
@@ -18,7 +18,11 @@ BI.AbsoluteCenterLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.AbsoluteCenterLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
diff --git a/src/core/wrapper/layout/adapt/adapt.table.js b/src/core/wrapper/layout/adapt/adapt.table.js
index 8c0b82590..9af2aa8cc 100644
--- a/src/core/wrapper/layout/adapt/adapt.table.js
+++ b/src/core/wrapper/layout/adapt/adapt.table.js
@@ -19,8 +19,8 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
         });
     },
     render: function () {
-        var o = this.options;
         BI.TableAdaptLayout.superclass.render.apply(this, arguments);
+        var self = this, o = this.options;
         this.$table = BI.Widget._renderEngine.createElement("<div>").css({
             position: "relative",
             display: "table",
@@ -28,7 +28,10 @@ BI.TableAdaptLayout = BI.inherit(BI.Layout, {
             height: (o.verticalAlign !== BI.VerticalAlign.Top) ? "100%" : "auto",
             "white-space": "nowrap"
         });
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {
diff --git a/src/core/wrapper/layout/adapt/auto.horizontal.js b/src/core/wrapper/layout/adapt/auto.horizontal.js
index 197b2badc..ed0f5e29c 100644
--- a/src/core/wrapper/layout/adapt/auto.horizontal.js
+++ b/src/core/wrapper/layout/adapt/auto.horizontal.js
@@ -18,7 +18,11 @@ BI.HorizontalAutoLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.HorizontalAutoLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
diff --git a/src/core/wrapper/layout/fill/float.fill.horizontal.js b/src/core/wrapper/layout/fill/float.fill.horizontal.js
index 988b8c061..d6607703b 100644
--- a/src/core/wrapper/layout/fill/float.fill.horizontal.js
+++ b/src/core/wrapper/layout/fill/float.fill.horizontal.js
@@ -16,7 +16,11 @@ BI.FloatHorizontalFillLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FloatHorizontalFillLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {
diff --git a/src/core/wrapper/layout/flex/flex.horizontal.js b/src/core/wrapper/layout/flex/flex.horizontal.js
index f1390b1f0..1d921c89f 100644
--- a/src/core/wrapper/layout/flex/flex.horizontal.js
+++ b/src/core/wrapper/layout/flex/flex.horizontal.js
@@ -23,7 +23,7 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexHorizontalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         if (o.scrollable === true || o.scrollx === true) {
             this.element.addClass("f-scroll-x");
@@ -31,7 +31,10 @@ BI.FlexHorizontalLayout = BI.inherit(BI.Layout, {
         if (o.scrollable === true || o.scrolly === true) {
             this.element.addClass("f-scroll-y");
         }
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {
diff --git a/src/core/wrapper/layout/flex/flex.vertical.js b/src/core/wrapper/layout/flex/flex.vertical.js
index f2b9aa19f..e885f5b9e 100644
--- a/src/core/wrapper/layout/flex/flex.vertical.js
+++ b/src/core/wrapper/layout/flex/flex.vertical.js
@@ -22,7 +22,7 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexVerticalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
         if (o.scrollable === true || o.scrollx === true) {
             this.element.addClass("f-scroll-x");
@@ -30,7 +30,10 @@ BI.FlexVerticalLayout = BI.inherit(BI.Layout, {
         if (o.scrollable === true || o.scrolly === true) {
             this.element.addClass("f-scroll-y");
         }
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
index 2a4c9706f..94e10fb14 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.horizontal.js
@@ -24,10 +24,13 @@ BI.FlexWrapperHorizontalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexWrapperHorizontalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-h-w v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {
diff --git a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
index 621dee46d..f9d85948f 100644
--- a/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
+++ b/src/core/wrapper/layout/flex/wrapper/flex.wrapper.vertical.js
@@ -24,10 +24,13 @@ BI.FlexWrapperVerticalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FlexWrapperVerticalLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.addClass("v-" + o.verticalAlign).addClass("h-" + o.horizontalAlign);
         this.$wrapper = BI.Widget._renderEngine.createElement("<div>").addClass("f-s-v-w h-" + o.horizontalAlign).addClass("v-" + o.verticalAlign);
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _hasFill: function () {
diff --git a/src/core/wrapper/layout/float/float.absolute.center.js b/src/core/wrapper/layout/float/float.absolute.center.js
index afe3e77b7..08cc5b326 100644
--- a/src/core/wrapper/layout/float/float.absolute.center.js
+++ b/src/core/wrapper/layout/float/float.absolute.center.js
@@ -12,7 +12,11 @@ BI.FloatAbsoluteCenterLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.FloatAbsoluteCenterLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
diff --git a/src/core/wrapper/layout/layout.absolute.js b/src/core/wrapper/layout/layout.absolute.js
index 86c7e94e1..6333b38a8 100644
--- a/src/core/wrapper/layout/layout.absolute.js
+++ b/src/core/wrapper/layout/layout.absolute.js
@@ -17,7 +17,11 @@ BI.AbsoluteLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.AbsoluteLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
diff --git a/src/core/wrapper/layout/layout.adaptive.js b/src/core/wrapper/layout/layout.adaptive.js
index fe1c6292e..20b758ef4 100644
--- a/src/core/wrapper/layout/layout.adaptive.js
+++ b/src/core/wrapper/layout/layout.adaptive.js
@@ -12,7 +12,11 @@ BI.AdaptiveLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.AdaptiveLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
diff --git a/src/core/wrapper/layout/layout.border.js b/src/core/wrapper/layout/layout.border.js
index eda061892..15d3877af 100644
--- a/src/core/wrapper/layout/layout.border.js
+++ b/src/core/wrapper/layout/layout.border.js
@@ -13,7 +13,11 @@ BI.BorderLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.BorderLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {
diff --git a/src/core/wrapper/layout/layout.card.js b/src/core/wrapper/layout/layout.card.js
index dd50a7b17..97034efba 100644
--- a/src/core/wrapper/layout/layout.card.js
+++ b/src/core/wrapper/layout/layout.card.js
@@ -16,7 +16,11 @@ BI.CardLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.CardLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     stroke: function (items) {
diff --git a/src/core/wrapper/layout/layout.default.js b/src/core/wrapper/layout/layout.default.js
index a35f99a07..90e4bf569 100644
--- a/src/core/wrapper/layout/layout.default.js
+++ b/src/core/wrapper/layout/layout.default.js
@@ -18,7 +18,11 @@ BI.DefaultLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.DefaultLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
diff --git a/src/core/wrapper/layout/layout.division.js b/src/core/wrapper/layout/layout.division.js
index 54fe3dbcc..988d118be 100644
--- a/src/core/wrapper/layout/layout.division.js
+++ b/src/core/wrapper/layout/layout.division.js
@@ -15,7 +15,11 @@ BI.DivisionLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.DivisionLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {
diff --git a/src/core/wrapper/layout/layout.flow.js b/src/core/wrapper/layout/layout.flow.js
index b3304e8c3..4efc35123 100644
--- a/src/core/wrapper/layout/layout.flow.js
+++ b/src/core/wrapper/layout/layout.flow.js
@@ -21,7 +21,7 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FloatLeftLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         if (o.innerHgap !== 0) {
             this.element.css({
                 paddingLeft: this._optimiseGap(o.innerHgap),
@@ -34,7 +34,10 @@ BI.FloatLeftLayout = BI.inherit(BI.Layout, {
                 paddingBottom: this._optimiseGap(o.innerVgap)
             })
         }
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
@@ -110,8 +113,23 @@ BI.FloatRightLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.FloatRightLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        if (o.innerHgap !== 0) {
+            this.element.css({
+                paddingLeft: this._optimiseGap(o.innerHgap),
+                paddingRight: this._optimiseGap(o.innerHgap)
+            })
+        }
+        if (o.innerVgap !== 0) {
+            this.element.css({
+                paddingTop: this._optimiseGap(o.innerVgap),
+                paddingBottom: this._optimiseGap(o.innerVgap)
+            })
+        }
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
diff --git a/src/core/wrapper/layout/layout.grid.js b/src/core/wrapper/layout/layout.grid.js
index dac59e74a..a81c31681 100644
--- a/src/core/wrapper/layout/layout.grid.js
+++ b/src/core/wrapper/layout/layout.grid.js
@@ -15,7 +15,11 @@ BI.GridLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.GridLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function () {
diff --git a/src/core/wrapper/layout/layout.inline.js b/src/core/wrapper/layout/layout.inline.js
index e90aba44d..a1d889337 100644
--- a/src/core/wrapper/layout/layout.inline.js
+++ b/src/core/wrapper/layout/layout.inline.js
@@ -27,11 +27,14 @@ BI.InlineLayout = BI.inherit(BI.Layout, {
 
     render: function () {
         BI.InlineLayout.superclass.render.apply(this, arguments);
-        var o = this.options;
+        var self = this, o = this.options;
         this.element.css({
             textAlign: o.horizontalAlign
         });
-        this.populate(o.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
diff --git a/src/core/wrapper/layout/layout.lattice.js b/src/core/wrapper/layout/layout.lattice.js
index 9b5731815..34845aa7b 100644
--- a/src/core/wrapper/layout/layout.lattice.js
+++ b/src/core/wrapper/layout/layout.lattice.js
@@ -16,7 +16,11 @@ BI.LatticeLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.LatticeLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
diff --git a/src/core/wrapper/layout/layout.table.js b/src/core/wrapper/layout/layout.table.js
index e577f822d..50f9a39f5 100644
--- a/src/core/wrapper/layout/layout.table.js
+++ b/src/core/wrapper/layout/layout.table.js
@@ -19,7 +19,11 @@ BI.TableLayout = BI.inherit(BI.Layout, {
     render: function () {
         BI.TableLayout.superclass.render.apply(this, arguments);
         this.rows = 0;
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (idx, arr) {
diff --git a/src/core/wrapper/layout/layout.tape.js b/src/core/wrapper/layout/layout.tape.js
index 3eb2acf89..27075f6e7 100644
--- a/src/core/wrapper/layout/layout.tape.js
+++ b/src/core/wrapper/layout/layout.tape.js
@@ -20,7 +20,11 @@ BI.HTapeLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.HTapeLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {
diff --git a/src/core/wrapper/layout/layout.td.js b/src/core/wrapper/layout/layout.td.js
index 340b347bf..8c9c5df73 100644
--- a/src/core/wrapper/layout/layout.td.js
+++ b/src/core/wrapper/layout/layout.td.js
@@ -32,7 +32,10 @@ BI.TdLayout = BI.inherit(BI.Layout, {
             "border-collapse": "separate"
         });
         this.rows = 0;
-        this.populate(this.options.items);
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (idx, arr) {
diff --git a/src/core/wrapper/layout/layout.vertical.js b/src/core/wrapper/layout/layout.vertical.js
index 90c78e1b7..b181b1d41 100644
--- a/src/core/wrapper/layout/layout.vertical.js
+++ b/src/core/wrapper/layout/layout.vertical.js
@@ -19,7 +19,11 @@ BI.VerticalLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.VerticalLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     _addElement: function (i, item) {
diff --git a/src/core/wrapper/layout/layout.window.js b/src/core/wrapper/layout/layout.window.js
index 95a87ba97..c7d14623c 100644
--- a/src/core/wrapper/layout/layout.window.js
+++ b/src/core/wrapper/layout/layout.window.js
@@ -22,7 +22,11 @@ BI.WindowLayout = BI.inherit(BI.Layout, {
     },
     render: function () {
         BI.WindowLayout.superclass.render.apply(this, arguments);
-        this.populate(this.options.items);
+        var self = this, o = this.options;
+        var items = BI.isFunction(o.items) ? this.__watch(o.items, function (context, newValue) {
+            self.populate(newValue);
+        }) : o.items;
+        this.populate(items);
     },
 
     addItem: function (item) {