uki 1.0.0

data/frameworks/uki/src/uki-view/view/scrollPane.js

@@ -0,0 +1,139 @@
+(function() {
+    var scrollWidth, widthIncludesScrollBar;
+    
+    function initScrollWidth () {
+        if (!scrollWidth) {
+            uki.dom.probe(
+                uki.createElement(
+                    'div', 
+                    'position:absolute;left:-99em;width:100px;height:100px;overflow:scroll;',
+                    '<div style="position:absolute;left:0;width:100%;"></div>'
+                ),
+                function( probe ) {
+                    scrollWidth = probe.offsetWidth - probe.clientWidth;
+                    widthIncludesScrollBar = probe.firstChild.offsetWidth == 100;
+                }
+            );
+        }
+        return scrollWidth;
+    }
+        
+    /**
+     * Scroll pane. Pane with scrollbars with content overflowing the borders.
+     * Works consistently across all supported browsers.
+     */
+    uki.view.declare('uki.view.ScrollPane', uki.view.Container, function(Base) {
+        this.typeName = function() {
+            return 'uki.view.ScrollPane';
+        };
+    
+        this._setup = function() {
+            Base._setup.call(this);
+
+            uki.extend(this, {
+                _clientRect: this.rect().clone(), // rect with scroll bars excluded
+                _rectForChild: this.rect().clone(),
+                _scrollableV: true,
+                _scrollableH: false,
+                _scrollV: false,
+                _scrollH: false
+            });
+        };
+    
+        uki.addProps(this, ['scrollableV', 'scrollableH']);
+    
+        this.rectForChild = function() { return this._rectForChild; };
+        this.clientRect = function() { return this._clientRect; };
+    
+        this.scroll = function(dx, dy) {
+            if (dx) this.scrollTop(this.scrollLeft() + dy);
+            if (dy) this.scrollTop(this.scrollTop() + dy);
+        };
+    
+        uki.each(['appendChild', 'removeChild', 'insertBefore'], function(i, name) {
+            this[name] = function(arg1, arg2) {
+                return Base[name].call(this, arg1, arg2);
+            };
+        }, this);
+    
+        uki.delegateProp(this, 'scrollTop', '_dom');
+        uki.delegateProp(this, 'scrollLeft', '_dom');
+    
+        this.visibleRect = function() {
+            var tmpRect = this._clientRect.clone();
+            tmpRect.x = this.rect().x + this.scrollLeft();
+            tmpRect.y = this.rect().y + this.scrollTop();
+            return tmpRect;
+        };
+    
+        this.rect = function(newRect) {
+            if (newRect === undefined) return this._rect;
+        
+            newRect = Rect.create(newRect);
+            var oldRect = this._rect;
+            this._parentRect = newRect;
+            if (!this._resizeSelf(newRect)) return this;
+            this._updateClientRects();
+            this._needsLayout = true;
+            this.trigger('resize', {oldRect: oldRect, newRect: this._rect, source: this});
+            return this;
+        };
+    
+        this._recalcClientRects = function() {
+            initScrollWidth();
+
+            var cw = this.contentsWidth(),
+                ch = this.contentsHeight(),
+                sh = this._scrollableH ? cw > this._rect.width : false,
+                sv = this._scrollableV ? ch > this._rect.height : false;
+            
+            this._scrollH = sh;
+            this._scrollV = sv;
+            this._clientRect = new Rect( this._rect.width +  (sv ? -1 : 0) * scrollWidth,
+                                         this._rect.height + (sh ? -1 : 0) * scrollWidth );
+            this._rectForChild = new Rect( this._rect.width +  (sv && !widthIncludesScrollBar ? -1 : 0) * scrollWidth,
+                                           this._rect.height + (sh && !widthIncludesScrollBar ? -1 : 0) * scrollWidth );
+        };
+    
+        this._updateClientRects = function() {
+            var oldClientRect = this._clientRect;
+            this._recalcClientRects();
+
+            if (oldClientRect.width != this._clientRect.width || oldClientRect.height != this._clientRect.height) {
+                this._resizeChildViews(oldClientRect);
+            }
+        };
+    
+        this._resizeChildViews = function(oldClientRect) {
+            for (var i=0, childViews = this.childViews(); i < childViews.length; i++) {
+                childViews[i].parentResized(oldClientRect, this._clientRect);
+            };
+        };
+    
+        this._layoutChildViews = function() {
+            for (var i=0, childViews = this.childViews(); i < childViews.length; i++) {
+                if (childViews[i]._needsLayout && childViews[i].visible()) {
+                    childViews[i].layout();
+                }
+            };
+        };
+        
+        this._layoutDom = function(rect) {
+            this._updateClientRects();
+        
+            if (this._layoutScrollH !== this._scrollH) {
+                this._dom.style.overflowX = this._scrollH ? 'scroll' : 'hidden';
+                this._layoutScrollH = this._scrollH;
+            }
+
+            if (this._layoutScrollV !== this._scrollV) {
+                this._dom.style.overflowY = this._scrollV ? 'scroll' : 'hidden';
+                this._layoutScrollV = this._scrollV;
+            }
+        
+            Base._layoutDom.call(this, rect);
+        };
+    });
+
+    uki.view.ScrollPane.initScrollWidth = initScrollWidth;
+})();

data/frameworks/uki/src/uki-view/view/slider.js

@@ -0,0 +1,154 @@
+uki.view.declare('uki.view.Slider', uki.view.Base, uki.view.Focusable, function(Base, Focusable) {
+    
+    this._setup = function() {
+        Base._setup.call(this);
+        uki.extend(this, {
+            _min: 0,
+            _max: 1,
+            _value: 0,
+            _values: null,
+            _keyStep: 0.01
+        });
+    };
+    
+    uki.addProps(this, ['min', 'max', 'values', 'keyStep']);
+    
+    this.values = uki.newProp('_values', function(val) {
+        this._values = val;
+        this._min = val[0];
+        this._max = val[val.length - 1];
+    });
+    
+    /**
+     * @fires event:change
+     */
+    this.value = uki.newProp('_value', function(val) {
+        this._value = MAX(this._min, MIN(this._max, val));
+        this._position = this._val2pos(this._value);
+        this._moveHandle();
+        this.trigger('change', {source: this, value: this._value});
+    });
+    
+    this._pos2val = function(pos, cacheIndex) {
+        if (this._values) {
+            var index = Math.round(1.0 * pos / this._rect.width * (this._values.length - 1));
+            if (cacheIndex) this._cachedIndex = index;
+            return this._values[index];
+        }
+        return pos / this._rect.width * (this._max - this._min);
+    };
+    
+    this._val2pos = function(val) {
+        if (this._values) {
+            var index = this._cachedIndex !== undefined ? this._cachedIndex : uki.binarySearch(val, this._values);
+            return index / (this._values.length - 1) * this._rect.width;
+        }
+        return val / (this._max - this._min) * this._rect.width;
+    };
+    
+    this._createDom = function() {
+        this._dom = uki.createElement('div', Base.defaultCss + 'height:18px;-moz-user-select:none;-webkit-user-select:none;overflow:visible;');
+        this._handle = uki.createElement('div', Base.defaultCss + 'overflow:hidden;cursor:default;background:url(' + uki.theme.image('x').src + ')');
+        this._bg = uki.theme.image('slider-handle');
+        this._focusBg = uki.theme.image('slider-focus');
+        this._focusBg.style.cssText += this._bg.style.cssText += Base.defaultCss + 'top:0;left:0;z-index:-1;position:absolute;'; 
+        this._handle.appendChild(this._bg);
+        
+        
+        uki.theme.background('slider-bar').attachTo(this);
+        this._initFocusable();
+        
+        uki.image.load([this._bg, this._focusBg], uki.proxy(this._afterHandleLoad, this) );
+    };
+    
+    this._afterHandleLoad = function() {
+        this._focusBg.style.cssText += ';z-index:10;margin-left:-' + (this._focusBg.width) / 2 + 'px;margin-top:-' + (this._focusBg.height-(this._bg.height/2)+1)/2 + 'px;';
+        this._handle.style.cssText += ';margin-left:-' + (this._bg.width / 2) + 'px;width:' +this._bg.width + 'px;height:' + (this._bg.height / 2) + 'px;';
+        this._dom.appendChild(this._handle);
+        
+        uki.each(['mouseenter', 'mouseleave', 'draggesturestart', 'draggesture', 'draggestureend'], function(i, name) {
+            uki.dom.bind(this._handle, name, uki.proxy(this['_' + name], this));
+        }, this);
+        
+        this.bind('click', this._click);
+        this.bind('keydown', this._keydown);
+    };
+    
+    this._mouseenter = function() {
+        this._over = true;
+        this._bg.style.top = - this._bg.height / 2 + 'px';
+    };
+    
+    this._mouseleave = function() {
+        this._over = false;
+        this._bg.style.top = this._dragging ? (- this._bg.height / 2 + 'px') : 0;
+    };
+    
+    this._click = function(e) {
+        var x = e.pageX - uki.dom.offset(this._dom).x;
+        this.value(this._pos2val(x, true));
+        this._cachedIndex = undefined;
+    };
+    
+    this._keydown = function(e) {
+        if (e.which == 39) {
+            this.value(this.value() + this._keyStep * (this._max - this._min));
+        } else if (e.which == 37) {
+            this.value(this.value() - this._keyStep * (this._max - this._min));
+        }
+    };
+    
+    this._moveHandle = function() {
+        // this._focusBg.style.left = this._handle.style.left = 100.0*this._position/this._rect.width + '%';
+        this._focusBg.style.left = this._handle.style.left = this._position + 'px';
+    };
+    
+    this._draggesturestart = function(e) {
+        this._dragging = true;
+        this._initialPosition = new Point(parseInt(this._handle.style.left, 10), parseInt(this._handle.style.top, 10));
+        return true;
+    };
+    
+    /**
+     * @fires event:change
+     */
+    this._draggesture = function(e) {
+        var position = MAX(0, MIN(this._rect.width, this._initialPosition.x + e.dragOffset.x));
+        this.value(this._pos2val(position, true));
+        this._cachedIndex = undefined;
+    };
+    
+    this._draggestureend = function(e) {
+        this._dragging = false;
+        this._initialPosition = null;
+        if (!this._over) this._bg.style.top = 0;
+        this.value(this._pos2val(this._position, true));
+        this._cachedIndex = undefined;
+    };
+    
+    this._focus = function(e) {
+        this._dom.appendChild(this._focusBg);
+        this._focusBg.style.left = this._handle.style.left;
+        Focusable._focus.call(this, e);
+    };
+    
+    this._blur = function(e) {
+        this._dom.removeChild(this._focusBg);
+        Focusable._blur.call(this, e);
+    };
+    
+    this._layoutDom = function(rect) {
+        var fixedRect = rect.clone();
+        fixedRect.height = 18;
+        Base._layoutDom.call(this, fixedRect);
+        this._position = this._val2pos(this._value);
+        this._moveHandle();
+        return true;
+    };
+
+    this._bindToDom = function(name) {
+        if (name == 'change') return true;
+        return uki.view.Focusable._bindToDom.call(this, name) || Base._bindToDom.call(this, name);
+    };
+    
+});

data/frameworks/uki/src/uki-view/view/splitPane.js

@@ -0,0 +1,213 @@
+uki.view.declare('uki.view.HSplitPane', uki.view.Container, function(Base) {
+    var proto = this;
+        
+    proto._setup = function() {
+        Base._setup.call(this);
+        this._originalRect = this._rect;
+        uki.extend(this, {
+            _vertical: false,
+            _handlePosition: 200,
+            _autogrowLeft: false,
+            _autogrowRight: true,
+            _handleWidth: 7,
+            _leftMin: 100,
+            _rightMin: 100,
+            
+            _panes: []
+        });
+    };
+    
+    /**
+     * @fires event:handleMove
+     */
+    proto.handlePosition = uki.newProp('_handlePosition', function(val) {
+        this._handlePosition = this._normalizePosition(val);
+        this.trigger('handleMove', {source: this, handlePosition: this._handlePosition, dragValue: val });
+        this._resizeChildViews();
+    });
+    
+    proto.handleWidth = uki.newProp('_handleWidth', function(val) {
+        if (this._handleWidth != val) {
+            this._handleWidth = val;
+            var handle = this._createHandle();
+            this._dom.insertBefore(handle, this._handle);
+            this._removeHandle();
+            this._handle = handle;
+            this._resizeChildViews();
+        }
+    });
+    
+    
+    proto._normalizePosition = function(val) {
+        var prop = this._vertical ? 'height' : 'width';
+        return MAX(
+                this._leftMin,
+                MIN(
+                    this._rect[prop] - this._rightMin - this._handleWidth,
+                    MAX(0, MIN(this._rect ? this._rect[prop] : 1000, val * 1))
+                ));
+    };
+    
+    
+    uki.addProps(proto, ['leftMin', 'rightMin', 'autogrowLeft', 'autogrowRight']);
+    proto.topMin = proto.leftMin;
+    proto.bottomMin = proto.rightMin;
+    
+    proto._removeHandle = function() {
+        this._dom.removeChild(this._handle);
+    };
+    
+    proto._createHandle = function() {
+        var handle;
+        if (this._vertical) {
+            handle = uki.theme.dom('splitPane-vertical', {handleWidth: this._handleWidth});
+            handle.style.top = this._handlePosition + PX;
+        } else {
+            handle = uki.theme.dom('splitPane-horizontal', {handleWidth: this._handleWidth});
+            handle.style.left = this._handlePosition + PX;
+        }
+        
+        uki.each(['draggesturestart', 'draggesture', 'draggestureend'], function(i, name) {
+            uki.dom.bind(handle, name, uki.proxy(this['_' + name], this));
+        }, this);
+        
+        return handle;
+    };
+    
+    proto._createDom = function() {
+        this._dom = uki.createElement('div', Base.defaultCss);
+        for (var i=0, paneML; i < 2; i++) {
+            paneML = { view: 'Container' };
+            paneML.anchors = i == 1         ? 'left top bottom right' :
+                             this._vertical ? 'left top right' :
+                                              'left top bottom';
+            paneML.rect = i == 0 ? this._leftRect() : this._rightRect();
+            this._panes[i] = uki.build(paneML)[0];
+            this.appendChild(this._panes[i]);
+        };
+        this._dom.appendChild(this._handle = this._createHandle());
+    };
+    
+    proto._normalizeRect = function(rect) {
+        rect = Base._normalizeRect.call(this, rect);
+        var newRect = rect.clone();
+        if (this._vertical) {
+            newRect.height = MAX(newRect.height, this._leftMin + this._rightMin); // force min width
+        } else {
+            newRect.width = MAX(newRect.width, this._leftMin + this._rightMin); // force min width
+        }
+        return newRect;
+    };
+    
+    proto._resizeSelf = function(newRect) {
+        var oldRect = this._rect,
+            dx, prop = this._vertical ? 'height' : 'width';
+        if (!Base._resizeSelf.call(this, newRect)) return false;
+        if (this._autogrowLeft) {
+            dx = newRect[prop] - oldRect[prop];
+            this._handlePosition = this._normalizePosition(this._handlePosition + (this._autogrowRight ? dx / 2 : dx));
+        }
+        if (this._vertical) {
+            if (newRect.height - this._handlePosition < this._rightMin) {
+                this._handlePosition = MAX(this._leftMin, newRect.height - this._rightMin);
+            }
+        } else {
+            if (newRect.width - this._handlePosition < this._rightMin) {
+                this._handlePosition = MAX(this._leftMin, newRect.width - this._rightMin);
+            }
+        }
+        return true;
+    };
+    
+    proto._draggesturestart = function(e) {
+        var offset = uki.dom.offset(this.dom());
+        this._posWithinHandle = (e[this._vertical ? 'pageY' : 'pageX'] - offset[this._vertical ? 'y' : 'x']) - this._handlePosition;
+        return true;
+    };
+    
+    proto._draggesture = function(e) {
+        var offset = uki.dom.offset(this.dom());
+        this.handlePosition(e[this._vertical ? 'pageY' : 'pageX'] - offset[this._vertical ? 'y' : 'x'] - this._posWithinHandle);
+        e.preventDefault();
+        this.layout();
+    };
+    
+    proto._draggestureend = function(e, offset) {
+    };
+    
+    proto.topPane = proto.leftPane = function(pane) {
+        return this._paneAt(0, pane);
+    };
+    
+    proto.bottomPane = proto.rightPane = function(pane) {
+        return this._paneAt(1, pane);
+    };
+    
+    proto.topChildViews = proto.leftChildViews = function(views) {
+        return this._childViewsAt(0, views);
+    };
+    
+    proto.bottomChildViews = proto.rightChildViews = function(views) {
+        return this._childViewsAt(1, views);
+    };
+    
+    proto._childViewsAt = function(i, views) {
+        if (views === undefined) return this._panes[i].childViews();
+        this._panes[i].childViews(views);
+        return this;
+    };
+    
+    proto._paneAt = function(i, pane) {
+        if (pane === undefined) return this._panes[i];
+        uki.build.copyAttrs(this._panes[i], pane);
+        return this;
+    };
+    
+    proto._leftRect = function() {
+        if (this._vertical) {
+            return new Rect(this._rect.width, this._handlePosition);
+        } else {
+            return new Rect(this._handlePosition, this._rect.height);
+        }
+    };
+    
+    proto._rightRect = function() {
+        if (this._vertical) {
+            return new Rect(
+                0, this._handlePosition + this._handleWidth,
+                this._rect.width, this._rect.height - this._handleWidth - this._handlePosition
+            );
+        } else {
+            return new Rect(
+                this._handlePosition + this._handleWidth, 0, 
+                this._rect.width - this._handleWidth - this._handlePosition, this._rect.height
+            );
+        }
+    };
+    
+    proto._resizeChildViews = function() {
+        this._panes[0].rect(this._leftRect());
+        this._panes[1].rect(this._rightRect());
+    };
+    
+    proto._layoutDom = function(rect) {
+        Base._layoutDom.call(this, rect);
+        this._handle.style[this._vertical ? 'top' : 'left'] = this._handlePosition + 'px';
+    };
+    
+    proto._bindToDom = function(name) {
+        if (name == 'handleMove') return true;
+        return Base._bindToDom.call(this, name);
+    };
+    
+});
+
+uki.view.declare('uki.view.VSplitPane', uki.view.HSplitPane, function(Base) {
+    this._setup = function() {
+        Base._setup.call(this);
+        this._vertical = true;
+    };
+});
+
+
+uki.Collection.addAttrs(['handlePosition']);

data/frameworks/uki/src/uki-view/view/table/column.js

@@ -0,0 +1,96 @@
+uki.view.table.Column = uki.newClass(uki.view.Observable, new function() {
+    var proto = this;
+    
+    proto._width = 100;
+    proto._offset = 0;
+    proto._position = 0;
+    proto._minWidth = 40;
+    proto._css = 'overflow:hidden;float:left;font-size:11px;line-height:11px;white-space:nowrap;text-overflow:ellipsis;';
+    proto._inset = new Inset(3, 5);
+
+    proto.init = function() {};
+    
+    uki.addProps(proto, ['position', 'css', 'formatter', 'label', 'resizable', 'maxWidth', 'minWidth']);
+    
+    /**
+     * @fires event:beforeResize
+     * @fires event:resize
+     */
+    proto.width = uki.newProp('_width', function(w) {
+        this._width = this._normailizeWidth(w);
+        this.trigger('beforeResize', {source: this});
+        if (this._stylesheet) {
+            var rules = this._stylesheet.styleSheet ? this._stylesheet.styleSheet.rules : this._stylesheet.sheet.cssRules;
+            rules[0].style.width = this._clientWidth() + PX;
+        }
+        this.trigger('resize', {source: this});
+    });
+    
+    proto._bindToDom = uki.F;
+    
+    proto._normailizeWidth = function(w) {
+        if (this._maxWidth) w = MIN(this._maxWidth, w);
+        if (this._minWidth) w = MAX(this._minWidth, w);
+        return w;
+    };
+    
+    proto.inset = uki.newProp('_inset', function(i) {
+        this._inset = Inset.create(i);
+    });
+    
+    proto.render = function(row, rect, i) {
+        if (!this._template) this._template = this._buildTemplate(rect);
+        this._template[1] = this._formatter ? this._formatter(row[this._position], row) : row[this._position];
+        return this._template.join('')
+    };
+    
+    proto.renderHeader = function(height) {
+        if (!this._headerTemplate) this._headerTemplate = this._buildHeaderTemplate(height);
+        var template = this._headerTemplate;
+        template[1] = this.label();
+        return template.join('');
+    };
+    
+    proto._clientWidth = function() {
+        return this._width - (uki.dom.offset.boxModel ? this._inset.width() + 1 : 0);
+    };
+    
+    proto._initStylesheet = function() {
+        uki.dom.offset.initializeBoxModel();
+        if (!this._className) {
+            this._className = 'uki-table-column-' + (++uki.dom.guid);
+            var css = '.' + this._className + ' {width:' + this._clientWidth() + 'px;}';
+            this._stylesheet = uki.dom.createStylesheet(css);
+        }
+    };
+    
+    proto._buildHeaderTemplate = function(headerHeight) {
+        this._initStylesheet();
+        var border = 'border:1px solid #CCC;border-top: none;border-left:none;',
+            inset  = this._inset,
+            padding = ['padding:', inset.top, 'px ', inset.right, 'px ', inset.bottom, 'px ', inset.left, 'px;'].join(''),
+            height = 'height:' + (headerHeight - (uki.dom.offset.boxModel ? inset.height() + 1 : 0)) + 'px;',
+            tagOpening = ['<div style="position:relative;', border, padding, height, this._css, '" class="',this._className,'">'].join('');
+        
+        return [tagOpening, '', '</div>'];
+    };
+    
+    proto._buildTemplate = function(rect) {
+        this._initStylesheet();
+        var inset = this._inset,
+            border = 'border-right:1px solid #CCC;',
+            padding = ['padding:', inset.top, 'px ', inset.right, 'px ', inset.bottom, 'px ', inset.left, 'px;'].join(''),
+            height = 'height:' + (rect.height - (uki.dom.offset.boxModel ? inset.height() : 0)) + 'px;',
+            tagOpening = ['<div style="', border, padding, height, this._css, '" class="',this._className,'">'].join('');
+        return [tagOpening, '', '</div>'];
+    };
+});
+
+uki.view.table.NumberColumn = uki.newClass(uki.view.table.Column, new function() {
+    var Base = uki.view.table.Column.prototype,
+        proto = this;
+
+    proto._css = Base._css + 'text-align:right;';
+});
+
+uki.view.table.CustomColumn = uki.view.table.Column;

data/frameworks/uki/src/uki-view/view/table/header.js

@@ -0,0 +1,53 @@
+include('../label.js');
+
+uki.view.table.Header = uki.newClass(uki.view.Label, new function() {
+    var Base = uki.view.Label.prototype,
+        proto = this;
+        
+    proto._setup = function() {
+        Base._setup.call(this);
+        this._multiline = true;
+    };
+    
+    proto.typeName = function() { return 'uki.view.table.Header'; };
+    
+    proto.columns = uki.newProp('_columns', function(v) {
+        this._columns = v;
+        this.html(this._createColumns());
+        this._createResizers();
+    });
+    
+    proto._createColumns = function() {
+        var html = [];
+        for(var i = 0, offset = 0, columns = this._columns, l = columns.length; i < l; i++) {
+            html[html.length] = columns[i].renderHeader(this.rect().height);
+        }
+        return html.join('')
+    };
+    
+    proto._createResizers = function() {
+        for (var i=0, column, resizer, offset = 0; i < this._columns.length; i++) {
+            column = this._columns[i];
+            if (column.resizable()) {
+                resizer = uki.theme.dom('resizer', {height: this.rect().height});
+                resizer.style.right = -2 + PX;
+                // resizer.style.background = 'red';
+                this._label.childNodes[i].appendChild(resizer);
+                this._bindResizerDrag(resizer, i);
+            }
+        };
+    };
+    
+    proto._bindResizerDrag = function(resizer, columnIndex) {
+        uki.dom.bind(resizer, 'draggesture', uki.proxy(function(e) {
+            var headerOffset = uki.dom.offset(this.dom()),
+                offsetWithinHeader = e.pageX - headerOffset.x,
+                columnOffset = 0, i, column = this._columns[columnIndex];
+            for (i=0; i < columnIndex; i++) {
+                columnOffset += this._columns[i].width();
+            };
+            column.width(offsetWithinHeader - columnOffset);
+        }, this));
+    };
+    
+});

data/frameworks/uki/src/uki-view/view/table/render.js

@@ -0,0 +1,25 @@
+include('../list/render.js');
+
+uki.view.table.Render = uki.newClass(uki.view.list.Render, new function() {
+    
+    var proto = this;
+    
+    proto.init = function(table) {
+        this._table = table;
+    };
+    
+    proto.render = function(row, rect, i) {
+        if (!this._template) this._template = this._buildTemplate(rect);
+        var table = this._table,
+            columns = table.columns();
+        this._template[1] = uki.map(columns, function(val, j) {
+            return columns[j].render(row, rect, i);
+        }).join('');
+        return this._template.join('');
+    };
+    
+    proto._buildTemplate = function(rect) {
+        var tagOpening = ['<div style="position:relwidth:100%;height:', rect.height, 'px">'].join(',');
+        return ['', '', '']
+    };
+});