Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
tag: v0.0.2
Fetching contributors…

Cannot retrieve contributors at this time

78 lines (60 sloc) 4.11 kB

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.

Selector

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' );

PS

And one more thing. Unobtrusive javascript is evil.

Jump to Line
Something went wrong with that request. Please try again.