OpenLaszlo 4.0.3 Released… stretches, and mini-me!

Last week, OpenLaszlo 4.0.3 was released (without much fanfair, since it’s a bugfix release). One little-noticed bug that I’m happy to see fixed is the stretches attribute.

The stretches attribute lets you stretch a resource to fit the view it’s attached to. The thing is, that stretches was always supposed to adjust the view’s entire coordinate space relative to the size of the image.

To see what I mean, play around with the larger window below:

Notice how the contents of that window - the resource and the smaller window - all resize simultaneously. I'm not sure of the practical applications of this yet, but it makes for a nice effect.

You can download the source for the above application if you like. Remember to compile in OpenLaszlo 4.0.3.

San Francisco Meet Up Update

Last Thursday Laszlo sponsored a developer meet up at Cellspace in San Francisco, CA. Laszlo Systems pays for the space, pizza and beer at these events, but the real content is provided by developers from the OpenLaszlo Community.

  • Gordon Tian, from myDecide presented DecisionStreet, an application that helps seniors and their families make important life decisions. There will be a publicly-available demo on the company’s site soon. Gordon took my Laszlo Training classes some time ago. By the time the classes were over, he had completed a fully-functional prototype of their application. It was impressive to see Gordon’s progress each morning at the start of class (he’d work on his application in the evenings), and I was thrilled to see the completed application now.
  • Vandana and Manoj Gunwani from Technizant presented Tuhee and Koolvite. Tuhee is an e-greeting application, with a full drag-and-drop UI. Tuhee lets the user create and send greeting cards using standard templates, clip art, text and user-uploaded images. It integrates with Flickr/Yahoo photos too. Koolvite is an e-invite application that’s built with OpenLaszlo. It uses the same drag-and-drop interface as Tuhee for creating custom invitations, so the user has more control over their appearance than they do with, say, Evite. You need to create an account in order to use Koolvite, but you can create and send cards with Tuhee just by browsing to the site.
  • Michael Hayden from genAcode demonstrated LZadmin, a database management product that uses OpenLaszlo with Ruby-on-Rails to design databases. OpenLaszlo provides the administrative interface. There’s a generally-available demo on genAcode’s web site.
  • Eugene Ciurana from LeapFrog gave an excellent presentation on why his previous employer (a very large e-commerce web site) decided on OpenLaszlo as their RIA technology of choice. Unfortunately, Eugene wasn’t allowed to disclose the name said employer, but I suspect that it’s Walmart.com, since they’re a very large e-commerce web site, who have deployed OpenLaszlo applications across their site.
  • Jon Carlo Gueco from Saven Technologies showed off an impressive set of financial charting components that he built in OpenLaszlo. The charts are loaded with features: stock-comparison overlays, draggable time-axes, plot options, zooming, etc. There isn’t a live demo, but I’ve posted a screenshot of the zooming interface below:
Charting Components

From the Laszlo side, Max Carlson demoed various runtimes of OpenLaszlo 4.0, including a peek at LZPix running inside of J2SE. This is part of Project Orbit, a Sun and Laszlo collaboration to enable OpenLaszlo applications to run on the J2ME runtime. David Temkin presented Laszlo Webtop, which I’ll write more about soon.
Stay tuned for details of the next meet up!

ClickShirt – an OpenLaszlo Application

ClickShirt is an OpenLaszlo application that has been live for a few months. So this isn’t a newsflash announcing it; instead I’m going to analyze some of the highlights of the application, and how well they demonstrate what we call the “Cinematic User Experience”: continuous transitions, efficient use of space and ambient education. ClickShirt allows users to design T-Shirts and order them through CafePress. The application provides WYSIWYG editing of a T-Shirt design. Users can select from existing design templates, start from scratch, upload artwork, and modify colors, fonts and text.

Continuous Transitions

Continuous transitions between different states of an application comfortably guide the user smoothly from one part of the application to another. This is not to make the application “flashy”. Smooth transitions help the user understand where they are in the flow of the application. They also prevent the user from searching for a back-button.

Continuous Transitions

The ClickShirt application uses continuous transitions throughout. When you select a shirt on the welcome screen, the shirts slide off-screen, and the new screen replaces it.

Efficient Use of Space

Even with today’s high-resolution monitors, screen real estate is expensive. Just because there’s more available room on-screen, users don’t necessarily want to have the application in their browser use it all up. It’s also hard to learn to use an application that consumes the entire monitor with moving parts. Ideally, an application should show the user the information they need at that particular step, and show/hide subsequent steps as the user proceeds through the application’s flow.

Efficient Use of Space

ClickShirt uses custom floating components to display custom selection options. This happens at a couple of points in the application: when the user selects a T-Shirt design element to edit and when selecting which T-Shirt to order.

Ambient Education

The unconstrained development capabilities of Rich Internet Applications allow an application to educate the user while he/she is using the application. This can take many forms: tooltips, inline documentation, etc.

Ambient Education

The ClickShirt application goes further. It has animated instructional movies between (continuous) transitions that tell the user how they can customize T-Shirts.

In addition to being a posterchild for the Cinematic User Experience, ClickShirt has many truly impressive features: editing history, authentication, user-saved designs, a full drag-and-drop environment and a very clean and custom appearance.