Skip to content
This repository
tag: v0.1.0.1
Fetching contributors…

Cannot retrieve contributors at this time

file 179 lines (154 sloc) 6.328 kb

UKI – simple UiKit for complex Web apps

Uki is a JavaScript user interface toolkit for desktop-like web applications. It comes with a rich view-component library ranging from Sliders to Grids and SplitPanes.

uki({ view: 'Button', text: 'Click me', rect: '10 10 100 24' }).attachTo( window );

uki('Button[text^=Click]').click(function() { alert(this.text()); });

Links

* API docs at http://ukijs.org/docs/
* Google group http://groups.google.com/group/ukijs
* Code examples at http://github.com/voloko/uki/tree/master/app/functional/
* Development docs and tutorial at http://wiki.github.com/voloko/uki/
* Google wave in 100 lines of code example: http://ukijs.org/examples/core-examples/wave

Contribute

To install development server

  1. Install ruby ruby-lang.org

  2. Open terminal and run

    gem install rake sinatra
    cd PATH_TO_UKI
  3. On windows run

    ruby run.rb

On *nix

rake start
  1. 127.0.0.1:21119/src/uki.cjs – should be a merged version of uki

Image path

For older browsers uki loads images from server. By default development version loads them from uki.theme.airport.imagePath. To point it to your development server do

uki.theme.airport.imagePath = 'http://127.0.0.1:21119//src/uki-theme/airport/i/'

Simple

The Web should be simple. Adding a new library to your app should not require using a specific build process or learning a new language. It should be as simple as adding a <script> tag to your HTML. That's exactly the way uki works. No frameworks to install, no dependencies to manage, no CSS to include. Simple.

Cross-Browser

I can imagine living in a fairy-tale world where any browser supports HTML 5 and there's no such thing as IE6 :) Unfortunately, reality is different. I have to support all the browser flavors available, even the dinosaurs. That's why uki works with IE6+, Opera 9+, FF 2+, Safari 3+, and Chrome. And it looks exactly the same on any of them.

Fast

One of the reasons uki appeared is that I had to create a 4000-row complex client-side-searchable table. Just rendering the table made any version of IE unresponsive for half a minute. Uki uses progressive rendering and can render 30k+-row lists and tables mostly instantly.

Small

With all the images packed into it (not supported in IE6 and IE7), a gzipped uki build is under 30kb, and it's a single HTTP request.

Extensible

Creating a new component requires only one function to redeclare.

Embeddable

It's great when you start building your whole app with uki. But sometimes you have to add a desktop-like experience to a working site. Say, adding a widget or a table to an existing design. While uki can occupy the whole browser window, it works perfectly well in a small <div> in your sidebar. Just use attachTo( myDiv ) for any widget you want to add.

You already know it

Uki is written in plain JavaScript. It leverages well-known DOM and JS idioms 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. There are things that require programmable layout calculations. Think of a toolbar, which should show a popup when some of the buttons don't fit. Or a split pane. Or moving a slider bar on window resize. That's the reason uki calculates view positions and sizes with JavaScript. Unfortunately, resizing everything with pure JS will make your layout slow as a turtle. So uki uses as much native browser layout as possible.

Longer example

uki(
{   // create a split pane...
    view: 'SplitPane', rect: '1000 600', anchors: 'left top right bottom',
    handlePosition: 300, leftMin: 200, rightMin: 300,
    // ...with button on the left
    leftChildViews: { view: 'Button', rect: '10 10 280 24', anchors: 'top left right', text: 'Clear text field' },
    // ...and a vertical split pane on the right...
    rightChildViews: [
       { view: 'VSplitPane', rect: '693 600', anchors: 'left top right bottom', vertical: true,
           // ...with text field in the top part
           topChildViews: { view: 'TextField', rect: '10 10 280 24', anchors: 'top left', value: '0', id: 'field' },
           // ...and a slider in the bottom
           bottomChildViews: { view: 'Slider', rect: '10 10 673 24', anchors: 'top right left' }
       }
   ]
}).attachTo( window, '1000 600' );

// on slider change update text field
uki('SplitPane Slider').bind('change', function() {
    uki('TextField').value(this.value())
});

// on button click clear the text field
uki('Button[text~="Clear"]').bind('click', function() {
    uki('#field').value('') // find by id
});

results in ukijs.org/functional/splitPaneEx.html

Builder

uki({
    view: 'Button',
    rect: '400 40 200 24',
    text: 'uki is awesome!'
}).attachTo( document.getElementById('test'), '1000 100' );

uki('Button[text^=uki]').click(function() {
    alert('Hello world!');
});

uki(
  { view: "Button", text: "Click me", rect: "10 10 100 24" }
).attachTo( document.getElementById("test") );

uki("Button[text^=Click]").click(
  function() { alert(this.text()); }
);

uki({ view: 'SplitPane', rect: '1000 600', anchors: 'left top right bottom', 
    handlePosition: 300, autogrowLeft: false, leftMin: 300, rightMin: 300,
    leftChildViews: { view: 'Button', rect: '10 10 280 24', anchors: 'top left right', text: 'left pane' },
    rightChildViews: [
        { view: 'SplitPane', rect: '693 600', anchors: 'left top right bottom', vertical: true,
            topChildViews: { view: 'Button', rect: '10 10 280 24', anchors: 'top left', text: 'top pane' },
            bottomChildViews: { view: 'Slider', rect: '10 10 673 24', anchors: 'top right left' }
        }
    ]
}).attachTo( window, '1000 600' );

Tests

cd tests
narwhal runner.js

P.S.

And one more thing. Unobtrusive JavaScript is evil.

Something went wrong with that request. Please try again.