Obscene Art

I was demoing our product for a couple of pretty smart guys last week. One of them pointed out that it would be greatly improved by having better web design. I believe the phrase was something along the lines of “technologists aren’t necessarily the best designers”. So, when I went home, I took another look at things with fresh perspective. And I didn’t like what I saw. The problem is that I’ve been incrementally improving the appearance of Webmin for seven years or so, via icon replacement and mild CSS theming. Another round of that resulted in the current version of the theme, which has some reasonably functional improvements: a left-hand menu with JavaScript expansion, great icons by David Vignoni, and a lot of CSS styling to make it all seem less clunky and old-fashioned. Jamie was so enthusiastic about some of the changes that Webmin now has a version of it as the default theme (this doesn’t happen very often, as Jamie is relatively slow to adopt new client-side technologies in Webmin because they can prevent folks from using it).

Here’s a picture of the current version:

Pretty stark and white, huh? Not really much to get excited about. But so much better than the old standard Webmin themes that it always seemed pretty good. It’s all about perspective…I just had to look around at other web-based interfaces to see that I had been shooting for the wrong target, “better than it is now”. Instead, the only sane thing to do is shoot for “as good as the best on the web”.

To do that we’ll need AJAX, obviously. New stylesheets. And a lot of grunt work to transform Webmin’s table-based layouts into a pretty, clean, and style-able form.

AJAX

In the past, when we needed some dynamic elements on the page, I wrote it myself. Since I didn’t speak JavaScript very well, this meant almost no JavaScript was used. We had collapsing menus and elements, and Jamie wrote a few form validation elements. But mostly, we were living in an AJAX-free zone. No more.

I’ve looked at JavaScript libraries in the past, and marveled at how far the little language has come, but as of this past weekend, I’ve drunk the Kool-aid. I’ve added the Yahoo! UI library and the yui-ext libraries by Jack Slocum to our pages. Every element on every page is getting a makeover. No page, no UI component, no input field, no database display, no address box, nothing in our UI will be left unturned. First step was to convert the front page to make use of Jack’s layout functions in yui-ext.

Here’s the code for the layout:

   Layout = function(){
          return {
              init : function(){
                 var layout = new YAHOO.ext.BorderLayout(document.body, {
                      north: {
                          split:false,
                          initialSize: 35
                      },
                      west: {
                          split:true,
                          initialSize: 200,
                          titlebar: true,
                          collapsible: true,
                          minSize: 100,
                          maxSize: 400,
                          tabPosition: top
                      },
                      center: {
                          autoScroll: true
                      },
                      south: {
                          split:false,
                          initialSize: 24
                      } 
                  });
                  layout.beginUpdate();
                  layout.add('north', new YAHOO.ext.ContentPanel('header', {fitToFrame:true}));
                  layout.add('west', new YAHOO.ext.ContentPanel('wmnav', {title: 'Webmin', fitToFrame:true, closable:false, autoScroll:true}));
                  layout.add('west', new YAHOO.ext.ContentPanel('vmnav', {title: 'Virtualmin', fitToFrame:true, closable:false, autoScroll:true}));
                  layout.add('south', new YAHOO.ext.ContentPanel('statusBar', {fitToFrame:true}));
                  center = layout.getRegion('center');
                  center.add(new YAHOO.ext.ContentPanel('right', {fitToFrame:true}));
                  layout.endUpdate();
             }
       }
 
  }();

And here’s what it looks like:

Pretty slick, huh? Of course, there’s also a big bundle of style sheet changes in the right hand content pane, and you’re also seeing a conversion of the menu in the left hand pane to a yui-ext tree (which needs new images), but the layout alone is a miraculous change in the feel of the app.

Over the next week or two I’ll be covering each of the steps I make in transforming our rather large application from a traditional CGI web app to a wholly AJAX-ified, interactive, rich user interface…stay tuned.

BTW-If you’re learning JavaScript, I found the videos by Douglas Crockford at the YUI Theater absolutely priceless. In about four or five hours, I learned enough about JavaScript to begin writing my own extensions to yui-ext. I’m a JavaScript slinger extraordinaire now, all thanks to Doug’s videos.