Monday, May 28, 2007

Flash for Java Programmers: Lesson 2 - Using UI Components

Steps on learning to develop Flash, with a Java developer focus...

This is lesson 2 in my series of posts on what I learn about developing filthy rich flash apps using flex2. The first lesson can be found in a previous post, where I showed how to setup a maven build using flex2 command-line compilers.

In this post, I will show off some of the build-in UI components that you get, simply by using flex2.

Containers and Controls
There are two kinds of UI components in flex: Containers and controls. This is not much different from other UI toolkits.

Containers define an area in which other containers and controls can be layed out. As such, the containers define hierarchical structure.

Controls are stuff like buttons, input fields, checkboxes, ...

A simple example
Just to show a little bit (and it really is a little bit compared to what is in the UI component library), I will give a small example. There should be a flash just below here:





And below is the mxml source, which produces the above UI:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Fade id="fader"/>
<mx:TabNavigator borderStyle="solid" width="100%" height="100%">
<mx:VBox label="Tab 1" showEffect="fader">
<mx:HBox>
<mx:TextInput id="data" text="Enter data here"/>
<mx:Button label="Click me" click="mx.controls.Alert.show('You entered: ' + data.text)"/>
</mx:HBox>
</mx:VBox>
<mx:VBox label="Tab 2" showEffect="fader">
<mx:RichTextEditor />
</mx:VBox>
</mx:TabNavigator>
</mx:Application>
As you can see, we have a tabbed pane with two tabs. A TabNavigator components is a tabbed pane, where each pane is simply a VBox with anything in it. Entering text and clicking the button on tab 1 opens an alert with information about what you entered. On tab 2, there is a full Rich Text Editor component. Notice how there is a nice fading effect when shifting tab.

Now, this is all very nice in itself, but I would like to emphasize a couple of points here:
  • The fading effect is simple defined and applied. No special coding needed.
  • When the Alert pops up, all the below UI is grayed out and made inaccessible--flex is implementing the alert popup as a modal dialog. No special coding needed.
  • The Rich Text Editor talks for itself. We know how hard this is to get right in HTML/JS on many browsers and OS.
Static vs. Dynamic UI construction
In this lesson we were using mxml to statically define the UI components in the application. You can also use ActionScript to dynamically construct and layout your UI. This is done by instantiating instances of the classes behind the mx:xxx tags and adding them into the UI tree. A later post might look at this.

Downloading the source
I have zipped up the sources. It can be downloaded from here. Ready to be build with maven.

No comments: