uki 1.1.0 → 1.1.1

data/VERSION

@@ -1 +1 @@
-1.1.0
+1.1.1

data/frameworks/uki/README.rdoc

@@ -9,9 +9,9 @@ It comes with a rich view-component library ranging from Sliders to Grids and Sp
     
 == All you have to know in 5 minutes 
 1. Uki interfaces are created from Views the same way web pages are created from DOM nodes.
-   Views even behave similar to DOM nodes. You can appendView, insertBefore, access parentView etc.
-    panel.appendView(button) 
-   Examples of views: Slider, SplitPane or Table
+   Views even behave similar to DOM nodes. You can appendChild, insertBefore, access parent etc.
+    panel.appendChild(button) 
+   Examples of views: Slider, SplitPane or Table (http://ukijs.org/examples/)
 2. View have attributes. You can read them by calling attrname() without params and write with
    attrname(newValue).
     label.text('Lorem') // set text to a label
@@ -43,7 +43,7 @@ It comes with a rich view-component library ranging from Sliders to Grids and Sp
    resources like images, styled dom nodes and backgrounds. You can find an example of one
    at http://github.com/voloko/uki/blob/master/src/uki-theme/airport.js
 9. If your adding uki to existing project then it is better to simply add
-    <script src='http://static.ukijs.org/pkg/0.1.3/uki.gz.js'></script>
+    <script src='http://static.ukijs.org/pkg/0.2.0/uki.js'></script>
    to your pages and it will work. If you start a new one you might try
    uki-tools (http://github.com/voloko/uki-tools)
 10. See the available resources in Links section and have fun
@@ -63,13 +63,9 @@ It comes with a rich view-component library ranging from Sliders to Grids and Sp
 To install development server
 1. Install ruby http://ruby-lang.org
 2. Open terminal and run
-    gem install rake sinatra
+    gem install uki
     cd PATH_TO_UKI
-3. On windows run
-    ruby run.rb 
-On *nix
-    rake start
-4. http://127.0.0.1:21119/src/uki.cjs – should be a merged version of uki 
+    uki run
 
 == Image path
 For older browsers uki loads images from server.
@@ -132,11 +128,6 @@ such as CSS selectors, events and attributes.
 If you've ever used
 jQuery, learning uki won't take long.
 
-== Specific
-Uki doesn't want to be a Jack-of-all-trades. 
-It only does layout, but it does it well.
-You won't find any AJAX or data-storage-layer code here. 
-    
 == Programmable Layout
 HTML and CSS are great technologies,
 though you can't lay everything out with them.

data/frameworks/uki/examples/core-examples/aristo/aristo.js

@@ -0,0 +1,59 @@
+/**
+@example_title Controls (aristo)
+@example_order 3100
+@example_html
+    <style>body, html { overflow: hidden; margin: 0; padding: 0; }</style>
+    <div id="test" style="width: 90%; height: 300px;"></div>
+    <script src="/src/uki-theamless.cjs"></script>
+    <script src="/src/uki-theme/aristo.cjs"></script>
+    <script src="aristo.js"></script>
+*/
+
+
+// controlls description
+function views() {
+    return [    
+        { view: 'Button',   rect: '10 10 200 24',  anchors: 'left top', text: 'focusable button!' },
+        { view: 'MultilineTextField', rect: '10 35 200 40', anchors: 'left top', value: 'textarea' },
+        
+        { view: 'Checkbox', rect: '250 10 24 24',  anchors: 'left top', name: 'probe' },
+        { view: 'Label',    rect: '275 10 100 24', anchors: 'left top', html: 'Checkbox 1', selectable: false },
+        { view: 'Checkbox', rect: '250 35 24 24',  anchors: 'left top', checked: true },
+        { view: 'Label',    rect: '275 35 100 24', anchors: 'left top', text: 'Checkbox 2', selectable: false },
+        
+        { view: 'Radio',    rect: '720 10 24 24',  anchors: 'left top', name: 'probe', group: 'radio_1' },
+        { view: 'Label',    rect: '745 10 100 24', anchors: 'left top', html: 'Radio 1', selectable: false },
+        { view: 'Radio',    rect: '720 35 24 24',  anchors: 'left top', checked: true, group: 'radio_1' },
+        { view: 'Label',    rect: '745 35 100 24', anchors: 'left top', text: 'Radio 2', selectable: false },
+        
+        { view: 'TextField',rect: '400 10 100 24', anchors: 'left top', value: "Small input", placeholder: 'text' },
+        { view: 'Button',   rect: '510 10 200 24', anchors: 'left top', text: 'button without focus!', focusable: false },
+        { view: 'TextField',rect: '820 10 100 33', anchors: 'right top', value: "Big input" },
+        { view: 'Slider',   rect: '400 65 150 24', anchors: 'right top left width' }
+    ];
+}
+
+// page layout
+uki(
+    { view: 'Box', rect: '0 0 1000 300', minSize: '980 0', anchors: 'top left right width', childViews: [
+        { view: 'Box', background: 'theme(panel)', rect: '0 0 1000 100', // controlls on panel background
+            anchors: 'top left right width', childViews: views() },
+        { view: 'Box',  rect: '0 150 1000 100', anchors: 'top left right width', // controlls on page background
+            childViews: views() }
+    ]}
+).attachTo( document.getElementById('test'), '1000 300' );
+
+// Bind alert to all buttons
+uki('Button').bind('click', function() { 
+    alert(uki('TextField').attr('value'));
+});
+
+// On slider move update last TextField
+uki('Slider').bind('change', function() {
+   uki(this.parent()).find('> TextField:last').value(this.value())
+});
+
+// Make label work as labels in browser
+uki('Label').click(function() {
+   if (this.prevView().checked) this.prevView().checked(!this.prevView().checked()).focus();
+});

data/frameworks/uki/examples/core-examples/attachment/attachment.js

@@ -0,0 +1,18 @@
+/**
+@example_title Hello world
+@example_order 1
+@example_html
+    <div id='test' style='width: 50%; height: 100px; background: #EEE'>#test</div>
+    <script src="/src/uki.cjs"></script>
+    <script src="attachment.js"></script>
+*/
+
+uki({
+    view: 'Button',
+    rect: '200 40 200 24',
+    text: 'uki is awesome!'
+}).attachTo( document.getElementById('test'), '600 100' );
+
+uki('Button[text^=uki]').bind('click', function() {
+    alert('Hello world!');
+});

data/frameworks/uki/examples/core-examples/controls/controls.js

@@ -0,0 +1,59 @@
+/**
+@example_title Controls
+@example_order 20
+@example_html
+    <style>body, html { overflow: hidden; margin: 0; padding: 0; }</style>
+    <div id="test" style="width: 90%; height: 300px;"></div>
+    <script src="/src/uki.cjs"></script>
+    <script src="controls.js"></script>
+*/
+
+
+// controlls description
+function views() {
+    return [    
+        { view: 'Button',   rect: '10 10 200 24',  anchors: 'left top', text: 'focusable button!' },
+        { view: 'MultilineTextField', rect: '10 35 200 40', anchors: 'left top', value: 'textarea' },
+        
+        { view: 'Checkbox', rect: '250 10 24 24',  anchors: 'left top', name: 'probe' },
+        { view: 'Label',    rect: '275 10 100 24', anchors: 'left top', html: 'Checkbox 1' },
+        { view: 'Checkbox', rect: '250 35 24 24',  anchors: 'left top', checked: true },
+        { view: 'Label',    rect: '275 35 100 24', anchors: 'left top', text: 'Checkbox 2' },
+        
+        { view: 'Radio',    rect: '720 10 24 24',  anchors: 'left top', name: 'probe', group: 'radio_1' },
+        { view: 'Label',    rect: '745 10 100 24', anchors: 'left top', html: 'Radio 1' },
+        { view: 'Radio',    rect: '720 35 24 24',  anchors: 'left top', checked: true, group: 'radio_1' },
+        { view: 'Label',    rect: '745 35 100 24', anchors: 'left top', text: 'Radio 2' },
+        
+        { view: 'TextField',rect: '400 10 100 24', anchors: 'left top', value: "Small input", placeholder: 'text' },
+        { view: 'PasswordTextField',rect: '400 36 100 24', anchors: 'left top', value: "Small input", placeholder: 'text' },
+        { view: 'Button',   rect: '510 10 200 24', anchors: 'left top', text: 'button without focus!', focusable: false },
+        { view: 'TextField',rect: '820 10 100 34', anchors: 'right top', value: "Big input" },
+        { view: 'Slider',   rect: '400 65 150 24', anchors: 'right top left width' }
+    ];
+}
+
+// page layout
+uki(
+    { view: 'Box', rect: '0 0 1000 300', minSize: '980 0', anchors: 'top left right width', childViews: [
+        { view: 'Box', background: 'theme(panel)', rect: '0 0 1000 100', // controlls on panel background
+            anchors: 'top left right width', childViews: views() },
+        { view: 'Box',  rect: '0 150 1000 100', anchors: 'top left right width', // controlls on page background
+            childViews: views() }
+    ]}
+).attachTo( document.getElementById('test'), '1000 300' );
+
+// Bind alert to all buttons
+uki('Button').bind('click', function() { 
+    alert(uki('TextField').attr('value'));
+});
+
+// On slider move update last TextField
+uki('Slider').bind('change', function() {
+   uki(this.parent()).find('> TextField:last').value(this.value())
+});
+
+// Make label work as labels in browser
+uki('Label').click(function() {
+   if (this.prevView().checked) this.prevView().checked(!this.prevView().checked()).focus();
+});

data/frameworks/uki/examples/core-examples/dnd/dnd.js

@@ -0,0 +1,70 @@
+/** 
+@example_title Drag and Drop
+@example_order 400 
+@example_html
+    <style>body, html { margin: 0; padding: 0; overflow: hidden };</style>
+    <div id="draggable" draggable="true"  unselectable="unselectable"
+        style="position:absolute;left:600px;top:50px;width:100px;height:100px; 
+               line-height:100px;font-size:18px;background:#CCF;font-family:sans-serif;text-align:center;
+               -webkit-user-drag:element;-webkit-user-select:none;-moz-user-select:none">
+        draggable
+    </div>
+    <script src="/src/uki.cjs"></script>
+    <script src="dnd.js"></script>
+ */
+ 
+uki([
+    { view: 'Label', rect: '350 10 100 20', anchors: 'left top', style: { fontSize: '14px' },
+        html: '&larr; Drag items from the list on the left or from &darr; the draggable div. <a href="http://github.com/voloko/ukijs.org/blob/master/examples/core-examples/dnd/dnd.js">Source</a>, <a href="http://blog.ukijs.org/2010/03/16/drag-and-drop-in-uki/">about</a> ' },
+    { view: 'ScrollableList', rect: '0 0 300 600', anchors: 'left top bottom', id: 'source', 
+        draggable: true, textSelectable: false, multiselect: true },
+    { view: 'Label', rect: '350 50 150 150', anchors: 'left top', text: 'drop target', 
+        style: { fontSize: '25px', textAlign: 'center' }, 
+        background: 'cssBox(border:2px dashed #CCC; background:#EEE)', name: 'target' },
+    { view: 'Label', rect: '350 250 150 150', anchors: 'left top', text: 'drop target', 
+        style: { fontSize: '25px', textAlign: 'center' }, 
+        background: 'cssBox(border:2px dashed #CCC; background:#EEE)', name: 'target' }
+]).attachTo(window, '1000 600');
+
+var data = [];
+for (var i=0; i < 8000; i++) {
+    data[i] = 'Row ' + Math.random();
+};
+uki('#source List')
+    .data(data)
+    .dragstart(function(e) {
+        e.dataTransfer.setDragImage(uki({ view: 'Label', rect: '100 20', anchors: 'left top', 
+            inset: '0 5', background: 'cssBox(border: 1px solid #CCC;background:#EEF)', 
+            text: this.selectedIndexes().length + ' rows' })
+            , 10, 10);
+        e.dataTransfer.effectAllowed = 'copy';
+        e.dataTransfer.setData('text/plain', this.selectedRows().join('\n'));
+    }).parent().layout();
+    
+
+uki.dom.bind(document.getElementById('draggable'), 'dragstart', function(e) {
+    e.dataTransfer.setDragImage(uki.createElement('div', 'background:blue;width:20px;height:20px'), 5, 5);
+    e.dataTransfer.effectAllowed = 'copy';
+    e.dataTransfer.setData('text/plain', 'test');
+});
+
+
+uki('[name=target]')
+    .dragover(function(e) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'copy';
+    })
+    .dragenter(function(e) {
+        this.text('over');
+    })
+    .dragleave(function(e) {
+        this.text('drop target');
+    })
+    .drop(function(e) {
+        e.preventDefault();
+        this.text('droped');
+        alert(e.dataTransfer.getData('text/plain'))
+        setTimeout(uki.proxy(function() {
+            this.text('drop target');
+        }, this), 100)
+    });

data/frameworks/uki/examples/core-examples/flow/flow.js

@@ -0,0 +1,41 @@
+/**
+@example_title Vertical and Horizontal flows
+@example_order 3062
+@example_html
+    <script src="/src/uki.cjs"></script>
+    <script src="flow.js"></script>
+*/
+
+
+// vertical flow with a single label on the left of the page
+uki({ view: 'VFlow', rect: '10 10 100 0', anchors: 'left top', background: '#CCC', className: 'flow', childViews: [
+    { view: 'Label', rect: '0 0 100 100', anchors: 'left top', inset: '1 5', html: '<a href="#">Link 1</a>' }
+]}).attachTo(window, '100 100');
+
+// horizontal flow with 2 labels at the top of the page
+uki({ view: 'HFlow', rect: '120 10 0 100', anchors: 'left top', background: '#CCC', className: 'flow', childViews: [
+    { view: 'Label', rect: '0 0 100 20', anchors: 'left top', inset: '1 5', html: '<a href="#">Link 1</a>' },
+    { view: 'Label', rect: '0 0 100 20', anchors: 'left top', inset: '1 5', html: '<a href="#">Link 2</a>' }
+]}).attachTo(window, '100 100');
+
+// append 10 labels with links to each flow
+for (var i=1; i < 11; i++) {
+    var l = uki({ view: 'Label', rect: '0 0 100 20', anchors: 'left top', inset: '1 5', html: '<a href="#">Link ' + (i+1) + '</a>' });
+    uki('VFlow').append(l);
+    l = uki({ view: 'Label', rect: '0 0 100 20', anchors: 'left top', inset: '1 5', html: '<a href="#">Link ' + (i+1) + '</a>' });
+    uki('HFlow').append(l);
+};
+
+// resize to the number of labels appended and layout
+uki('VFlow').resizeToContents('height').layout();
+uki('HFlow').resizeToContents('width').layout();
+
+// create button to remove items from vertical flow
+uki({ view: 'Button', rect: '0 0 100 22', text: 'Remove' }).attachTo(window, '100 100').click(function() {
+    uki('VFlow').removeChild(uki('VFlow').childViews()[1]).resizeToContents('height').layout();
+});
+
+// create button to remove items from horizontal flow
+uki({ view: 'Button', rect: '0 30 100 22', text: 'Remove from list 2'}).attachTo(window, '100 100').resizeToContents('width').layout().click(function() {
+    uki('HFlow').removeChild(uki('HFlow').childViews()[1]).resizeToContents('width').layout();
+})

data/frameworks/uki/examples/core-examples/list/list.js

@@ -0,0 +1,78 @@
+/**
+@example_title List
+@example_order 42
+@example_html
+    <div id='test' style='width: 80%; height: 400px;'></div>
+    <script src="/src/uki.cjs"></script>
+    <script src="list.js"></script>
+*/
+
+// pregenerate list data (30000k items)
+var data = ['this is', '30000k long', 'list'];
+for (var i=3; i < 30000; i++) {
+    data[i] = 'item #' + (i+1);
+};
+
+var p = uki(
+    { view: 'HSplitPane', rect: '1000 600', anchors: 'top left right bottom', handleWidth: 1,
+        leftMin: 200, rightMin: 400, handlePosition: 200,
+        leftChildViews: [ // scrollable list on the left
+            { view: 'ScrollPane', rect: '200 600', anchors: 'top left right bottom',
+                // with a wrapping box (test background and border)
+                childViews: { view: 'Box', rect: '10 10 180 900002', anchors: 'top left right', background: '#CCC',
+                    // with indierect child list
+                    childViews: { view: 'List', rect: '1 1 178 900000', anchors: 'top left right', 
+                            data: data, rowHeight: 30, id: 'list', throttle: 0, multiselect: true, textSelectable: false }
+                }
+            }
+        ],
+        rightChildViews: [ // other controlls on the right
+        
+            // main list controlls
+            { view: 'Box', rect: '0 0 400 100', anchors: 'left top', childViews: [
+                { view: 'Button', rect: '10 10 100 24', anchors: 'left top', text: 'Add +', id: "add", focusable: false },
+                { view: 'TextField', rect: '125 10 50 24', anchors: 'left top', placeholder: 'where', value: '7', id: 'add-n' },
+                { view: 'TextField', rect: '180 10 100 24', anchors: 'left top', placeholder: 'what', value: 'some text', id: 'add-text' },
+            
+                { view: 'Button', rect: '10 40 100 24', anchors: 'left top', text: 'Remove -', id: "remove", focusable: false },
+                { view: 'TextField', rect: '125 40 50 24', anchors: 'left top', placeholder: 'which', value: '7', id: 'remove-n' },
+            
+                { view: 'Button', rect: '10 70 100 24', anchors: 'left top', text: 'Selected Index', id: 'selectedIndex', focusable: false },
+                { view: 'TextField', rect: '125 70 50 24', anchors: 'left top', placeholder: 'index', value: '7', id: 'selectedIndex-value' }
+            ]},
+            
+            // additional list to check list + scrollPane integration
+            { view: 'Box', rect: '350 0 300 400', anchors: 'left top', childViews: [
+                { view: 'Button', rect: '0 0 100 24', anchors: 'left top', id: 'add-s', text: 'add to list 2' },
+                { view: 'Button', rect: '200 0 100 24', anchors: 'right top', id: 'remove-s', text: 'remove from list 2' },
+                { view: 'ScrollPane', rect: '0 30 300 270', anchors: 'left top', childViews: [
+                    { view: 'List', rect: '0 0 300 270', anchors: 'left top rigth', minSize: '0 270', data: ['sample #1', 'sample #2', 'sample #3', 'sample #4'], id: 'list2' }
+                ]}
+            ] }
+            
+            
+        ]
+    }
+).attachTo( document.getElementById('test'), '1000 600' )
+
+// first list controlls
+uki('#add', p).click(function() { 
+    uki('#list')[0].addRow(uki('#add-n').value() || 0, uki('#add-text').value() || 'sample')
+});
+
+uki('#remove', p).click(function() {
+    uki('#list')[0].removeRow(uki('#remove-n').value());
+});
+
+uki('#selectedIndex').click(function() {
+    uki('#list').selectedIndex(uki('#selectedIndex-value').value())
+});
+
+// second list controlls
+uki('#add-s').click(function() {
+    uki('#list2').addRow(0, 'text');
+});
+
+uki('#remove-s').resizeToContents('width').layout().click(function() {
+    uki('#list2').removeRow(0);
+});

data/frameworks/uki/examples/core-examples/popup/popup.js

@@ -0,0 +1,41 @@
+/**
+@example_title Popup
+@example_order 52
+@example_html
+    <style>body, html { overflow: hidden; margin: 0; padding: 0; }</style>
+    <div id="test" style="width: 90%; height: 300px;"></div>
+    <script src="/src/uki.cjs"></script>
+    <script src="popup.js"></script>
+*/
+
+// create 8 buttons
+uki({ view: 'Box', rect: '1000 400', anchors: 'left top', childViews: [
+    { view: 'Button', rect: '10 370 100 24', anchors: 'left top', text: 'Left Bottom', id: 'left_bottom' },
+    { view: 'Button', rect: '200 370 100 24', anchors: 'left top', text: 'Right Bottom', id: 'right_bottom' },
+    { view: 'Button', rect: '10 10 100 24', anchors: 'left top', text: 'Left Top', id: 'left_top' },
+    { view: 'Button', rect: '200 10 100 24', anchors: 'left top', text: 'Rigth Top', id: 'right_top' },
+    { view: 'Box', rect: '400 0 400 400', anchors: 'left top', childViews: [
+        { view: 'Button', rect: '70 310 100 24', anchors: 'left top', text: 'Left Bottom', id: 'h_left_bottom' },
+        { view: 'Button', rect: '200 310 100 24', anchors: 'left top', text: 'Right Bottom', id: 'h_right_bottom' },
+        { view: 'Button', rect: '70 70 100 24', anchors: 'left top', text: 'Left Top', id: 'h_left_top' },
+        { view: 'Button', rect: '200 70 100 24', anchors: 'left top', text: 'Rigth Top', id: 'h_right_top' }
+    ] }
+] }).attachTo( window, '1000 400' );
+
+// on button click
+uki('Button').click(function() {
+    var button = this;
+    // find relative popup and toggle it
+    uki('Popup').grep(function(e) { return e.relativeTo() == button; }).toggle();
+});
+
+// attach on popup per button
+uki({ view: 'Popup', rect: '120 120', anchors: 'left bottom', shadow: 'theme(shadow-big)', relativeTo: uki('#left_bottom')[0] })[0].show();
+uki({ view: 'Popup', rect: '120 120', anchors: 'left top', visible: true, relativeTo: uki('#left_top')[0] }).attachTo( window );
+uki({ view: 'Popup', rect: '120 120', anchors: 'right bottom', relativeTo: uki('#right_bottom')[0] }).show();
+uki({ view: 'Popup', rect: '120 120', anchors: 'right top', relativeTo: uki('#right_top')[0] }).show();
+
+uki({ view: 'Popup', rect: '120 120', anchors: 'left bottom', horizontal: true, relativeTo: uki('#h_left_bottom')[0] }).show();
+uki({ view: 'Popup', rect: '120 120', anchors: 'left top', horizontal: true, relativeTo: uki('#h_left_top')[0] }).show();
+uki({ view: 'Popup', rect: '120 120', anchors: 'right bottom', horizontal: true, relativeTo: uki('#h_right_bottom')[0] }).show();
+uki({ view: 'Popup', rect: '120 120', anchors: 'right top', horizontal: true, relativeTo: uki('#h_right_top')[0] }).show();

data/frameworks/uki/examples/core-examples/resizeToContents/resizeToContents.js

@@ -0,0 +1,34 @@
+/**
+@example_title Resize to contents
+@example_order 3071
+@example_html
+    <div id='test' style='width: 90%; height: 350px;'></div>
+    <script src="/src/uki.cjs"></script>
+    <script src='resizeToContents.js'></script>
+*/
+
+
+uki({
+    view: 'Box', rect: '1000 600', anchors: 'left right bottom top', background: '#CCF',
+    childViews: [
+        {view: 'Box', rect: '790 390 200 200', // container box
+            anchors: 'right bottom', // anchored to the bottom (grow up)
+            background: '#CCC', childViews: 
+            { view: 'Label', rect: '200 200',  // label with long text
+                anchors: 'top left rigth', // anchored to the top right (grow down)
+                multiline: 'true',
+                text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+                inset: '3 3', id: 'target'}
+        },
+        {view: 'Button', rect: '10 10 100 24', anchors: 'left top', text: 'resize', id: 'doIt' }
+    ]
+}).attachTo( document.getElementById('test'), '1000 600' )
+
+// on click
+uki('#doIt').click(function () {
+    uki('#target') 
+        .html(uki('#target').html() + ' Lorem ipsum dolor sit amet, consectetur adipisicing elit ') // add more text
+        .resizeToContents('height').parent().resizeToContents('height').layout(); // resize to contents and relayout
+});
+
+uki('#doIt').resizeToContents('width').layout(); // fix button size