Thursday, December 31st, 2009

How would you layout Wave?

Category: JavaScript, Library

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:


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

Here is a more complex example:


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

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.

Posted by Dion Almaer at 6:38 am

3.2 rating from 35 votes


Comments feed TrackBack URI

I was also playing with wave layout and built some month ago this one (tested only in Firefox 3.5.5):

This is built using jQuery, some plugins for jQuery and micro templating (John Resig).

All classes used for panels are based on my the classical inheritance implementation

Comment by Kof — December 31, 2009

very nice, well done.

Comment by igaenssley — December 31, 2009

And it is faster than Wave, too. :P

Comment by ialexi — December 31, 2009

And it works in IE6, unlike wave :)
[dodges tomatoes]

Comment by pianoroy — December 31, 2009

Actually, doesn’t have any functionality, Kof’s layout has more functionality and lesser code. Wave UI isn’t even special, it is what drives it what makes it special. Doing Wave UI in GWT is a breeze.

Comment by MohamedMansour — December 31, 2009

It looks like a fairly extensive piece of work – hats off.

But the styling implementation is a mess; css strings entangled in javascript? Applied directly to each element individually? It almost seems as if everything has been done to look as little like Extjs as possible (I’m not a fan of Extjs’s classname spamming either – but of the two I think classnames/css is the sane choice).

Comment by rasmusfl0e — January 1, 2010

Here’s my attempt for a slightly different application:

Using jquery and jquery.layout. Still an early work in progress but you get the idea.

Comment by hackeron — January 2, 2010

I think one of the features of uki that people are missing is that (most of) the layout is handled through some clever absolute positioning that alleviates the need to set styles on elements on window.onresize. This is clearly visible in firefox when resizing the window (because firefox doesn’t fire window.onresize as fast/fluently as other browsers) – look for elements suddenly having their width/height set.
The perfect layout-framework for me would use this kind of positioning, classnames on elements and a separate stylesheet ;)

Comment by rasmusfl0e — January 2, 2010

2 rasmusfl0e: Uki supports class names. Just set className property on any view. Like { view: 'Button', className: 'my-fancy-button', rect: '100 20' }. I don’t use them mostly for simplicity reasons. Css is yet another resource to mange.

2 pianoroy: Doing something in GWT is a breeze when you know it. But installing, configuring, deploying, building and learning a complex framework is still something that you can’t do in an evening. The same goes for Cappuccino and partly for SproutCore.

What I’m trying to do with uki is to provide a simple solution that one can take out from the shelf, add to existing site and it will work in a matter of half an hour. Without any configuration or deployment.

Comment by voloko — January 3, 2010

Leave a comment

You must be logged in to post a comment.