nextwebgen.com

Want to show how to use your layout library? Why not mimic a well known layout and show how easy it is? That is what Volodya Kolesnikov has done with his Google Wave layout in 100 lines of code sample.

It is powered by uki (shorted from “ui kit”) and Volodya told us more about it:

UKI is a fast and simple JavaScript user interface toolkit for desktop-like web applications. It comes with rich view-component library ranging from Slider to List and SplitPane. Here are some examples:

Simple example:

PLAIN TEXT

JAVASCRIPT:

1.  
2. uki({
3.        view: ‘Button’, text: ‘Click me’,
4.        rect: ’10 10 100 24′ , anchors: ‘top left’
5. }).attachTo( document.getElementById(‘container’) );
6.  
7. uki(‘Button[text^=Click]‘).click(function() { alert(this.text()); });
8.  

Here is a more complex example:

PLAIN TEXT

JAVASCRIPT:

1.  
2. uki(
3. {   // create a split pane…
4.    view: ‘SplitPane’, rect: ’1000 600′, anchors: ‘left top right bottom’,
5.    handlePosition: 300, leftMin: 200, rightMin: 300,
6.    // …with button on the left
7.    leftChildViews: { view: ‘Button’, rect: ’10 10 280 24′, anchors: ‘top left right’, text: ‘Clear text field’ },
8.    // …and a vertical split pane on the right…
9.    rightChildViews: [
10.       { view: ‘SplitPane’, rect: ’693 600′, anchors: ‘left top right bottom’, vertical: true,
11.           // …with text field in the top part
12.           topChildViews: { view: ‘TextField’, rect: ’10 10 280 24′, anchors: ‘top left’, value: ’0′, id: ‘field’ },
13.           // …and a slider in the bottom
14.           bottomChildViews: { view: ‘Slider’, rect: ’10 10 673 24′, anchors: ‘top right left’ }
15.       }
16.   ]
17. }).attachTo( window, ’1000 600′ );
18.  
19. // on slider change update text field
20. uki(‘SplitPane Slider’).bind(‘change’, function() {
21.    uki(‘TextField’).value(this.value())
22. });
23.  
24. // on button click clear the text field
25. uki(‘Button[text~="Clear"]‘).bind(‘click’, function() {
26.    uki(‘#field’).value(”) // find by id
27. });
28.  

Uki works with IE6+, Opera 9+, FF 2+, Safari 3+, Chrome. And it looks the same on any of them.

Uki is still in its infancy. There may be bugs. No docs available. Certain features like disabled are still missing. Nevertheless it is already capable of build complex layouts in hours.