The next generation of web application UI layout

User interface layout has been one of the main challenges that has held web applications back (desktop integration is another one). Especially vertical arrangements such as the following used to be next to impossible: Bars at the top and at the bottom contain widgets that take up minimal height, while the content is displayed at the center and takes up the remaining vertical space. Note that this is trivial to do in desktop GUI frameworks such as Java Swing. Recently, Ajax frameworks have made progress in this regard. Now you can implement the above mentioned scenario, but you have to specify fixed heights for the bars (the screen shot shows this kind of bar at the top of the window and above the email message). A small price to pay, especially as those frameworks do it in pure CSS (=fast). I am aware of three frameworks that perform this kind of magic:
  • Sproutcore: Looks great, JavaScript-centric, borrows patterns from Ruby on Rails (project layout, models) and Cocoa (binding, properties). Sproutcore has a Ruby-based generator for code that makes it easy to get started and is itself easy to install, thanks to Ruby’s Gem packaging mechanism. Sproutcore is used by Apple for MobileMe. Current disadvantages: sparsely documented, relatively slow development turn-around (it takes a while to reload after changes). Demos.
  • Google Web Toolkit (GWT): Java-centric, having a single code base on client and server is priceless, great tooling (Eclipse), fast development turn-around, well documented. The new kind of layout is a feature called “Layout Panels”. GWT is used by Google for Google Wave. Demos.
  • Cappuccino: I have not tried this one out. I’m not sure that having a custom language (Objective-J) on top of JavaScript is the way to go, especially as Sproutcore does most (all?) of what Objective-J is capable of in pure JavaScript. Cappuccino has a cool browser-based IDE and GUI builder called Atlas.
So this makes full-featured web GUIs possible today. Regarding the future, I’ve written a blog post about what CSS might be capable of, one day.

Update 2010-12-13: I’ve heard good things about how Qooxdoo performs layout. Apparently they layout programmatically via JavaScript. This allows them to do more sophisticated things, but it makes layouting a bit slower.

Update 2011-01-24: The ultimate CSS layout spec for webapps


LaTeX, PDF slides, and dual displays

Presentation programs such as Microsoft PowerPoint or Apple Keynote make clever use of the secondary monitor in a dual display setting: For example, if you are using your notebook with a projector, the projector will show the slides, but the notebook will function as a kind of teleprompter, showing the slides plus additional information. This additional information can be notes, the current time, the remaining time (when you specify the maximum duration of a talk), the next slide, etc. This is obviously helps with time management and smooth transitions between slides.
And then there are those of us who use LaTeX to produce PDF files with their slides. I like the fact that I can have a pure PDF work flow (especially handy on Mac OS X with its native PDF support) and that LaTeX is cross-platform (I use Linux at work, Mac OS X at home). The latest TeX Live distributions already come with the Beamer Class which is easy to use, well-documented, and includes several themes. I have yet to discover a program that has as many features as PowerPoint or Keynote, but at least I have found two options for showing the notes in a PDF file on the secondary monitor:
Let me know if there are any other programs.


OpenOffice’s auto-correction madness and how to fix it

I do appreciate having OpenOffice as a free and fairly capable cross-platform alternative to Microsoft Office. But one of its features is a perfect example of why the adjective “intelligent” is mainly used in quotes when writing about office software: auto-correction. It bothers me in two cases:
  • Automatic URL formatting: Type a URL and OpenOffice turns it into a hard-to-edit underlined hyperlink. Fix: Menu command “Tools → AutoCorrect Options...”, tab “Options” lets you switch off “URL Recognition”.
  • Automatic date formatting (in Calc): Type a date as 2010-02-18 and OpenOffice turns it into 02/18/2010. There are two solutions: If you like having a common format for dates, you select the column in question, invoke “Format Cells...” via the context menu, use the “Category” called “Date” and change the format. If you want to input anything without constantly being corrected, use the “Category” called “Text”.