[ICS 499] My tour de Flex!

Premise:
Considering the commotion about OpenLaszlo and all things RIA, I decided this week to also speak about my experiences with trying out Flex 3. Flex is an open source Flash development framework designed from the ground up to facilitate the creation of Rich Internet Applications (RIAs) on the Flash platform (Flash 9). The Flex 3 SDK framework utilizes a mixture of a custom XML format called "MXML" and the OOP language, called ActionScript (3). ActionScript 3 is required in the recent release of the Flex 3 platform, as well as the Flash 9 platform.
In this blog entry I'll walk through my experiences developing in Flex by building a fun looking authentication application form.

Tools and requirements:

• Java Runtime Environment
• Flex 3 SDK
• Flex Builder (IDE) - The Eclipse-based IDE for the creation of Flash RIAs. Not only does the presence of an IDE significantly aid in the creation of Flex applications, but Flex Builder also has a design view and a code view, each with its own benefits, further improving ease-of-use and application development workflow. The only downfall is a hefty price after the 60-day trial of using the product. Of course you could either pay the fee, or switch to a light weight editor, such as vim, emacs, textpad, notepad, etc..
• Flash 9
  

Optional Tools and Mentions:

• Flex Charting: Aset of charting and graphing components, capable of generating Excel-style data representations, to aid in the visualization of data through Flex RIAs.
• Live Cycle Data Services (LCDS): Aserver-side application that expedites the speed of data synchronization between your middleware and your Flex application SWF (formerly, Flex Data Services).

All of the latest Flex related downloads can be found here.

So instead of starting out with the usual "Hello World!" application, I'll just start diving into the fun stuff and we'll go from there. I'll first build a simple version of the Login form, and then we'll apply Flex magic to create a more exciting user experience. All elements below were built using Flex Builder's. I would recommend snagging a copy for yourself, but you can always resort to using any text-editor of your choosing.

Applying the basic Flex Framework:
LogMeIn.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

</mx:Application>

This code is the basic container for all your components and the basis of any Flex application. Flex Builder should also generate two important files in order to make this internet application work: first the embedded LogMeIn.swf and second, the LogMeIn.html itself. Run this in your favorite browser (Firefox for me) and you should see a blue-green colored background that fills the entire page.

Building the basic Login in form:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">
  <mx:Panel id="loginPanel" width="309" height="182" title="Login Form" horizontalAlign="center" verticalAlign="middle">
    <mx:Form verticalCenter="true">
      <mx:FormItem required="true" label="Username" width="215">
        <mx:TextInput id="loginTI"/>
      </mx:FormItem>
      <mx:FormItem required="true" label="Password" width="215">
        <mx:TextInput id="passwordTI" displayAsPassword="true"/>
      </mx:FormItem>
      <mx:FormItem horizontalAlign="right" width="215">
        <mx:Button id="loginButton" label="Login" click=""/>
      </mx:FormItem>
    </mx:Form>
  </mx:Panel>
</mx:Application>

Here, we have a basic form with a submit button contained within a labeled panel. It's starting to look good so far, but nothing exactly works yet. Lets add some functionality to this component.

Adding some authentication logic:

  
<mx:Script>
  <![CDATA[
    import mx.controls.Alert;

    private function login():void {
      if (loginTI.text == "admin" && passwordTI.text == "admin") {
        Alert.show("Hurray!", "Login Message");
      }
      else {
        Alert.show("Incorrect login and password combination.", "Login Error");
      }
    }
  ]]>
</mx:Script>

For an incorrect login info...
And a successful login message...
Now that sure is one sexy Alert message, much better than those generated by Javascript's alert prompts. I'm somewhat impressed with this so far, but the interface can be improved to test out the power of Flex's physics engine. We can make the UI much more intuitive and surprisingly different from anything else. From here on, I'll be mimicking code produced by Doug Mccune, a fellow Flex developer.
The rest of the code is beyond the scope of this blog entry and will be featured as a download. I replaced the original form components within the panel to what was indicated in Doug's demo. Also the modified text input labels are enclosed in a "PhysicsContainer" class in order to provide that feeling of falling and manipulable objects.

<panel ... >
  <containers:PhysicsContainer id="canvas" width="100%" height="100%">
  <!-- Original login form -->
  ...
  <flexlib:PromptingTextInput id="loginTI" prompt="username" x="50" y="35"/>
  <flexlib:PromptingTextInput id="passwordTI" prompt="password" x="50" y="75" displayAsPassword="true"/>
  <mx:Button label="Login" x="158" y="115" click="login()"  />
  </containers:PhysicsContainer>
</panel>

When a person attempts to login with the wrong credentials, then the components would fall from their initial position due to some applied physics. These components are also draggable objects that can be manipulated and oriented however way you want.

Overall, these RIA platforms, including Flex have proven to be the next step in building a more interactive and responsive application for simple or complicated web interfaces. Flex, for instance, is an open source framework. This means that Adobe builds a bunch of "stuff" into the structure, which you can utilize in your applications seemlessly. What makes Flex so special is that it makes things incredibly easy to assemble through its component based framework—far, far easier than authoring custom applications in the Flash authoring tools presented in Adobe's Flash Professional. Flex comes with these essential UI components (Text input, labels, buttons, etc.), as well as additional ones to assist in laying out content. Flex also makes it incredibly simple to create your own custom components out of these components and has robust CSS support, making it quite easy to style your applications and even consume the same CSS files that you might use elsewhere on your website. And of course, it's easily portable. Just see for your self below.
This week's plans...
Flex is on my good side this week, so I'll be spending some time testing a prototype interface with OVID's VistA connector. My next blog entry will further expose the technology that Flex has to offer, with regards to its support for many data source providers, including HTTPService, WebServices and Remote Objects.

Just for fun, here's the embedded app for you to play with. It sure looks like another Flash application, but it's built using Flex!


Resources:
Learn Flex in a week
Adobe AIR application: Tour de Flex
Featured download: LogMeIn.zip