use uki tools as a server

README.rdoc

@@ -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.

Rakefile

@@ -2,42 +2,15 @@ require 'fileutils'
 require 'rubygems'
 require 'yaml'
 
-def process_path(path, included = {})
-  code = File.read(path)
-  base = File.dirname(path)
-  code.gsub(%r{include\s*\(\s*['"]([^"']+)["']\s*\)\s*;?\s*\n?}) {
-    include_path = File.expand_path(File.join(base, $1))
-    unless included[include_path]
-      included[include_path] = true
-      process_path(include_path, included)
-    else
-      ''
-    end
-  }
-end
-
 def read_version
   base = File.dirname(__FILE__)
   File.read(File.join(base, 'src', 'uki-core', 'uki.js')).match(%r{uki.version\s*=\s*'([^']+)'})[1]
 end
 
-desc "Run thin"
-task :start do
-  sh "thin -s 1 -C thin.yaml -R uki.ru start"
-end
-
-desc "Run thin"
-task :restart do
-  sh "thin -s 1 -C thin.yaml -R uki.ru restart"
-end
-
-desc "Stop thin"
-task :stop do
-  sh "thin -s 1 -C thin.yaml -R uki.ru stop"
-end
-
 desc "Build scripts"
 task :build_scripts do
+  require 'uki/include_js'
+
   base = File.dirname(__FILE__)
   version = read_version
   compiler_path = File.join(base, 'compiler.jar')
@@ -96,10 +69,4 @@ task :push_version do
       :access => :public_read, 'Cache-Control' => 'max-age=315360000'
     )
   end
-end
-
-# ['width', 'height', 'minX', 'maxX', 'minY', 'maxY', 'left', 'top'].each { |name|
-#     print "/** @function
-#     @name uki.view.Base##{name} */
-#     "
-# }
+end

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();
+});

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!');
+});

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();
+});

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)
+    });

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();
+})