Friday, January 12, 2007

Building user interfaces with Flex 2

After several years in the trenches, I am very sick of building rich browser-based user interfaces using DHTML. Even relying on fancy libraries like scriptaculous or the Yahoo User Interface Library, the interface never acts quite as nice as a desktop application. Loading can be slow. Uneditable labels and components are selectable. Objects can stutter and flicker or get stuck on unexpected boundaries when dragged. Different combinations of browsers and operating systems yield different results and bugs.

The whole programming model is also tedious. Not so much because of JavaScript, but because HTML is awkward for declaring layouts and wiring together components and data sources.

Adobe Flex 2 seems to offer a very compelling alternative to DHTML for rich browser-based application interfaces. With Flex you build interfaces in three parts:

  1. XML files that declare layouts, components and other static objects. Flex includes a full set of standard interface components such as trees, lists, menus and form controls. You can also create custom components.
  2. Script files (ActionScript) for implementing event handlers and other dynamic behavior.
  3. Server-side data sources and callbacks to handle data flow to and from the client.

Besides being compelling from a programming perspective, the standard components look and feel beautiful and responsive on all browsers and platforms. This demo is my favorite since it shows off each component along with the code required to use it.

No comments: