One of the newest battles for developer mind-share will be in the area of rich clients within Web-based applications. The major players of development languages and tools have set their sights on this area, and several have announced products that will be coming.
One of the benefits of building Web-based applications is that you get great reach. You can get your application to a number of different people on a number of different systems. The cost is in features. You lose many of the features you have access to with desktop applications.
Although not known for targeting application developers, Macromedia is joining this fray for the rich client and is doing so doing more than just flexing its Flash muscle. This is not just another try to get developers to create full-fledged applications with Flash. I've seen that attempted and while it was pretty, it was not practical for the average developer. Rather, Macromedia is tapping into the compatibility of Flash on the Web, but doing it with a new product—Macromedia Flex.
The Next Wave of Web Applications
Before jumping into Macromedia Flex, it makes sense to step back and look at where Web development seems to be headed. Note that I say Web Applications and not one-click or other types of applications that are really Windows or Java applications that get downloaded from the Web onto a local client machine and executed within the machine's operating system.
A Web application is generally one that executes in a browser and benefits from the standards of the Web. Additionally, a Web application doesn't have to worry about the client beyond the browser—it doesn't care if it is running on Linux, Windows, or even a Mac. It cares that Web standards such as HTML and XML are supported.
When you are writing applications for the desktop—or for an operating system rather than to general Web standards—you can take full advantage of the computer and its features. Companies such as Macromedia, Microsoft, and others have been pondering the question of what is missing in Web applications that is available in desktop applications.
Many of the items you see in regular applications are now appearing on Web pages and thus within Web applications. By using JavaScript, text can pop up, buttons can work, and forms can be created. While many of these elements mimic standard Windows-based desktop applications, they still don't step up to the complete challenge. Consider a basic slider control. This is a control that you generally don't see on a standard Web page. Smoothly reacting to changes made with a slider control generally requires constant changes to the page. Consider a second example. When have you seen Drag & Drop on a Web application? Again, while Drag & Drop is an expected feature in Windows-based desktop applications, it just isn't an item the average Web page or Web application uses.
| "Our application developers are now getting excited about rich apps because they can produce through code and what they are familiar with—animation and transitions and sliding panels and user interfaces..."
- Dave Meeker, Technical Lead deep User Experience,
WhittmanHart |
Slider controls and Drag & Drop are just two minor examples of rich client items that are generally not on Web applications. Consider an even better example—a MessageBox() routine. Want to pop up that little window with a message? MessageBox, Alert, or similar methods are available in rich clients, but are not really a Web-based application feature.
It is worth mentioning now the one requirement that is placed on running a Flex application. With Flex, there is also a requirement that the browser supports Flash; however, nearly all browsers being used today support and are running Flash.
Changing Architecture
There is another change in the industry that has an impact on Flex as well as other Web-based applications. A key push in the industry is the concept of separating an application's interface from its logic.
For example, Microsoft has presented XAML—a markup language—and .NET coding. The XAML markup will define how the interface looks and will be displayed, whereas .NET code will manipulate the interface and control the logic. XAML, however, is a part of Microsoft Longhorn. This is Microsoft's next operating system that isn't due until 2006.
Macromedia Flex provides a similar division. With Flex, the presentation is also done in a markup language based on XML. This is MXML. Additionally, a scripting language is used to handle events and logic that occur. In this case, the scripting language is ActionScript—the same scripting language used with Flash.
| ActionScript may be used with Flash, but it is based on a standard, the ECMA-262 standard. Additionally, ActionScript uses object-oriented constructs, which help to make it extensible. If you use Java, C++, or C#, you should be able to easily understand ActionScript. |
A Look at a Flex Application
Before continuing, you can take a look at a simple Flex sample application at http://www.macromedia.com/flex/samples/flexstore/flexstore.mxml This is the Flex store application that illustrates the different items I've mentioned so far. In Figure 1, you see the basic screen with an item being dragged to the shopping cart.
Click here for a larger image.
Figure 1: Dragging and dropping in the Flex store application.
You can use the slider at the bottom of the page to narrow down what is displayed based on price range. As the slider is adjusted on this page, you should note that no refreshes are needed to change the display the items as the slider moves—they are simply fading on or off. On the two panels on the right, you'll notice that you can minimize and maximize the amount of space they take.
You also can show how the products are displayed by using some of the other controls (
). Again, you should note that changing the sort or display does not cause the entire page to refresh.
Clicking Checkout on the page changes the right panel and gives you a page to capture standard information. You should again note that you didn't get the flash of a page refresh. By using the accordion control, a user can enter general, shipping, and payment information to complete the purchase. Again, watch for the standard Web application; the page refreshes as you move around the page.
You should also type in bad data or move your cursor over a text field that is empty. You'll see, as shown in Figure 2, that the page automatically displays some of the errors on the page using read highlighting and messages.
Click here for a larger image.
Figure 2: Display of error messages without screen refreshes!
IE 7
Firefox 2.0
