Flexing for a Rich Client in Your Web Apps

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.

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.

Figure 2: Display of error messages without screen refreshes!

Even though these are basic things, these are all items that work to make a much richer interface. Remember, this is a Web application—not a desktop application! This is also not a static Java applet. It is an application-dynamic application generated on the server. One thing you are not seeing in this example is the interaction with the server that could also be occurring.

What Is Flex?

If you ran the Flex Store application, you notice that it is a relatively simple application, but it does illustrate a lot of the features that can be gained with Flex. But what is Macromedia’s Flex?

Flex is not a programming language; rather, it is a server. It does, however, contain support for an application framework. As you can see from Figure 3, the Flex framework is similar to other frameworks. There is an XML declarative language, MXML, that can be used as well as a scripting language. The programming language is ActionScript. Both of these can build off of a Flex class library. This library is broken into containers, controls, data models, and behaviors. Containers and controls are used to design the screens.

Figure 3: The Flex Framework is similar to others.

Flex is actually an application server that takes the MXML and ActionScript and converts it to a SWF (Flash) file that is sent to the client machine. Then, the Flex server brokers the data exchange between the client and the underlying business logic on the application server. Because nearly all browsers support Flash, there is wide compatibility for these applications.

Flex will run on top of other applications servers, such as J2EE and .NET. The currently released version of Flex runs on a J2EE server. This means that a server needs only to be able to run a current version of Java to support the Flex server. Flex development can be done within a simple text editor. Additionally, IBM has created a plug-in for WebSphere Studio Application Developer. Flex includes an XML schema and more. This means that IDEs such as Visual Studio, JBuilder, and others will be usable for doing Flex development as well.

Deploying and Running a Flex Application

Once you have the Flex server running, you can simply copy your Flex applications (the MXML and ActionScript files) to a directory set up on your Web Server. With that, your applications are ready to run.

As stated before, Flex applications work very similarly to JSP, ASP, and XSLT applications. The first time a browser calls an MXML file, the Flex server will compile it to a Flash (SWF) file.

This SWF file is then downloaded. Future calls to the MXML file will not require a recompile unless something changes. This means that there is a performance hit the first time an application is used, but not on future calls. Of course, it is possible to force this compile the first time. Other communications with the server from the application will occur using standards such as SOAP. If you haven’t already exposed your business logic as SOAP Web services, the Flex server can broker connections directly into the server-side objects and handle the communications with the client for you.

A Closer Look at Flex and MXML

The heart of a Flex application is MXML. This markup language contains tags for the key HTML markup features. It also contains a number of additional components and tags that can be used. Some of the components are:

  • Standard HTML tags such as
    • <mx:Button>
    • <CheckBox>
    • <ComboBox>
    • <Form>
    • <RadioButton>
  • Additional GUI Components
    • <mx:Accordion>
    • <DataGrid>
    • <Effect>
    • <SocialSecurityValidator>
    • <WipeUp>
    • <Zoom>

You can manipulate the controls and components using ActionScript. Additionally, you can use ActionScript to include other logic within your Flex applications. As mentioned earlier, ActionScript is a standardized scripting language that isn’t too different from other languages. For example, the following is a snippet of ActionScript from the Flex store application shown earlier:

Listing 1: Flex store slider control code snippet.

function slide(event) {
    var e = new mx.effects.Resize(productDetail);
    if (event.size=="medium") {
        e.heightTo=330;
        productDetail.ctrl.visible=true;
        cartView.ctrl.visible=true;
        statusTop.selected="medium";
        statusBottom.selected="medium";
    } else if (event.size=="small") {
        if (event.target==statusTop) {
            e.heightTo=32;
            productDetail.ctrl.visible=false;
            cartView.ctrl.visible=true;
            statusTop.selected="small";
            statusBottom.selected="large";
        } else {
            e.heightTo=510;
            productDetail.ctrl.visible=true;
            cartView.ctrl.visible=false;
            statusTop.selected="large";
            statusBottom.selected="small";
        }
    } else {
        if (event.target==statusTop) {
            e.heightTo=510;
            productDetail.ctrl.visible=true;
            cartView.ctrl.visible=false;
            statusTop.selected="large";
            statusBottom.selected="small";
        } else {
            e.heightTo=32;
            productDetail.ctrl.visible=false;
            cartView.ctrl.visible=true;
            statusTop.selected="small";
            statusBottom.selected="large";
        }
    }
    e.duration=1;
    e.playEffect();
}

Building a Simple Application

When I encounter a new programming paradigm, I create a standard, simple application. This application offers a little more than the average “hello world” application. Simply put, I create a form with a text box, a label, and a button. Clicking the button copies the text from the text box to the label. The MXML markup for this form is presented in Listing 2.

Listing 2: The Hello Flex World! Code.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns_mx="http://www.macromedia.com/2003/mxml">

   <mx:Label id="disp" width="200" />
   <mx:TextInput id="inputname" width="200" />
   <mx:Button label="Do It!" click="disp.text = inputname.text" />

</mx:Application>

As you can see by looking at Listing 2, MXML looks like standard XML markup. This listing can be entered into a standard text editor and saved within a directory accessible to your Web server. This is MXML code, so the file should be saved with an MXML extension. A good name for the above program is helloflex.mxml. You can download a copy of that file at the bottom of this article.

Deploying and Running a Flex Application

Running a Flex application is similar to running applications from other dynamic programming models. For a Flex application, you need to also have the Flex server running. If you are using Macromedia products, you can run the Flex server along with JRun.

With the server running, you have what you need to run your Flex application. As mentioned before, your MXML file and any corresponding ActionScript files should be simply copied into an area accessible to your server. Once there, you can simply call your program from the address line in the server.

If you were running the helloflex.mxml file from a local server, this could be as simple as typing http:://localhost:8700/helloflex.mxml. This should result in the program loading and displaying as shown in Figure 4:

If you run this application and enter some text, you will see a form like Figure 4:

Figure 4: The HelloFlex Flex application.

It is worth digressing and considering what is happening with this application.

Like most Web pages, a request is made to the server for the Web page files. In this case, it is the helloflex.mxml file.

On the server, when the request is made, the Flex server converts the MXML file (and any ActionScript files) to a SWF. An HTML page that uses this Flash file is then returned to the browser. This page is displayed like any other HTML page with a Flash object.

If this page is called again, the server is smart enough to know that there is no need to re-create the SWF file because nothing has changed. This means the second and future calls can be faster than the initial call.

Obtaining Flex

Macromedia Flex can be obtained from Macromedia. Unlike many development products for developers, you cannot simply download a trial version. You can, however, obtain a copy. You have to send money to cover the cost of shipping and handling ($8.99 when this article was written) and then wait for the CD to be shipped. You can order a CD from:

http://www.macromedia.com/cfusion/entitlement/index.cfm?e=flexcd

If you decide to publish a Flex application, you will need to license a full copy of Flex. The cost of licensing is around $12,000 US dollars for a dual CPU license. You can find more information on licensing at http://www.macromedia.com/flex.

Conclusion

Macromedia is definitely in touch with the experiences clients are wanting and has proven this with Flash and now with Flex. It also has tapped into the future by working to separate the interface from some of the other logic. Incorporating standards by using an XML-based markup as well as ECMA standard scripting languages also shows that they are aware of larger concerns of organizations.

Where I see the challenge is in proving that Flex is ready for prime time by proving it can hold up to large-scale applications. This is a test I couldn’t do for this review. There are also other smaller issues, such as being compatible with search engines. This compatibility is in the form of having site pages that can be found and indexed by the search engines. If this isn’t fully available, then the visibility of a site using Flex will be greatly diminished.

Right now, it is easy for the average developer to confuse Flex with Flash and thus not give it a second thought; or worse, they will think of it as just another designer’s tool. This leads to the biggest challenge I see, yet it is one of the easier challenges to overcome. It is getting the product into the hands of developers. This is the first step in building developer awareness. If developers are not aware of the product, they obviously won’t use it. Even if they are aware of the product, they need to be able to easily obtain it as well as information on what it can do.

If this product is to succeed on a large scale, it will require a strong push into the developer community. It will take getting the products into the hands of developers—something that won’t happen if they have to send in $8.99 and wait a week.

This is an exciting enough product that I do believe it is worth getting your hands on a copy!

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read