Skip to content
This repository

Simple UiKit for complex web apps

tag: v0.0.3

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.rdoc

UKI – simple UiKit for complex web apps

Uki is a javascript user interface toolkit for desktop-like web applications. It comes with rich view-component library ranging from Slider 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()); });

Simple

Web should be simple. Adding a new library to your app should not require using 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 leaving in a fairy-tail world where any browser support HTML 5 and there's no such a thing as IE6 :) Unfortunately reality is different. I have to support all the browser spices available. Even the dinosaurs. Thats why uki works with IE6+, Opera 9+, FF 2+, Safari 3+, 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 rows, complex, client side searchable table. Just rendering the table made any IE busy for half a minute. Uki uses progressive rendering and can render 30k+ lists and tables mostly instantly.

Small

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

Extensible

Creating a new component requires only one function to redeclare.

Embedable

It's great when you start building your whole app with uki. But sometimes you have to add desktop-like experience to a working site. Say adding a widget, or a table to existing design. While uki can occupy the whole browser window it feels perfectly OK in 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 known DOM and JS idioms such as css selectors, events or attributes. If you 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 layout everything 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 JS only will make you 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: 'VerticalSplitPane', 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: '400px 40px 200px 24px',
    text: 'uki is awesome!'
}).attachTo( document.getElementById('test'), '1000px 100px' );

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', autosize: 'width height', 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', autosize: 'width' },
    rightChildViews: [
        { view: 'SplitPane', rect: '693 600', autosize: 'width height', 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', autosize: 'width' }
        }
    ]
}).attachTo( window, '1000 600' );

Tests

cd tests
narwhal runner.js

PS

And one more thing. Unobtrusive javascript is evil.

Something went wrong with that request. Please try again.