IDE

Use a good IDE to create your mxml and ActionScript code. The most obvious choice is Flex Builder from adobe. To me there is a very big disadvantage, flex builder is based on the eclipse platform. Since I am an IntelliJ user, this is a (Big) problem. Luckily flex development is becoming better in IntelliJ. I tend to use IntelliJ for my coding, but I use Flex builder for running and debugging. Also when developing Air you are completely dependent on flex builder. When I can completely use IntelliJ I’ll let you know .

Build tool

Use a build system that makes you independent from for instance flex builder. There is a pretty good maven plugin for creating flex applications. So what maven plugin am I talking about? Flex mojo’s from Velo. It is a very good set of plugins to create your swf files. You can find more information on the google code project. To be honest, I think there could be more documentation on how to start working with this plugin. There are a few things you can do to make life easier. One of them is use an existing maven archetype from FNA. Another one is using my sample application as a reference.

ActionScript and Mxml

Adobe flex comes with two main languages, an xml language called mxml. This can do a lot already, but if you need real power, you need to use the other languages called ActionScript. The mxml language is very powerful for creating a nice user interface. With just a few lines of code you can create a complete page which obtains data from a remote source (yahoo boss for instance) and presents the returned data in a table.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:VBox>
<mx:Form defaultButton="{doSearch}">
<mx:TextInput id="searchQuery" focusEnabled="true"/>
<mx:Button id="doSearch" label="Search" click="searchRequest.send()"/>
</mx:Form>
<mx:DataGrid dataProvider="{searchRequest.lastResult.ysearchresponse.resultset_web.result}" width="1000" height="500">
<mx:columns>
<mx:DataGridColumn id="linkTitle" headerText="title" dataField="title"/>
<mx:DataGridColumn id="linkUrl" headerText="url" dataField="url"/>
<mx:DataGridColumn id="linkAbstract" headerText="abstract" dataField="abstract" dataTipField="abstract"/>
<mx:DataGridColumn id="linkDate" headerText="date" dataField="date" />
</mx:columns>
</mx:DataGrid>
</mx:VBox>

<mx:HTTPService id="searchRequest"
url="http://boss.yahooapis.com/ysearch/web/v1/%E2%80%9D{searchQuery.text}%E2%80%9D?appid=xvO3DBXIkY2zZpDxKmItnM1vUC9kyxHb&format=xml"
useProxy="false"
method="GET"/>
</mx:Application>

With this great power comes a risk, without some standards and a bit of structure your code can become a mess. There are also limitations on mxml, that is when ActionScript jumps in. If we look at the previous sample, we can add a click listener that opens a returned link by clicking on it in a new window. To do this you add the following code to the DataGrid : itemClick=”clickLink(event)”. To make it work we use a script block, check the following code.

private function clickLink(event:ListEvent):void {
var url:String = String(event.currentTarget.selectedItem.url);
newWin(url);
}

private function initFocus():void {
searchQuery.setFocus();
}

private function newWin(url:String):void {
var urlRequest:URLRequest = new URLRequest(url);
navigateToURL(urlRequest, "_blank");
}

Finally we make sure the searchBox gets focus by adding this line to the Application tag: applicationComplete=”initFocus()”. The following image shows a screendump of the application.

One thing that is missing in a default implementation of the DataGrid is filtering. For my first bigger flex project I have created such a control. You can read more about it in my blog item : creating a flex 3 datagrid with back-end filtering.

The last thing I would like to mention on this topic is that everything that you can do with mxml can also be done with ActionScript. Sometimes it is more obvious to use one over the other. For me, I use mxml for the real view components, action script is used for everything else. Check out the frameworks topic for ways to help you structure you application.

Using States

Did you ever create an application where a click on a button changed the complete screen? Elements get reshuffled, some appear, others disappear. Than using states is going to be your thing. I was creating a screen that contained a list of elements. Clicking on one of the items moved focus to the detail pane. I wanted the overview pane to be disabled but visible when working on one of the items. In the other state where the user is looking for an item from the list, the detail pane must be invisible. I started with a function that changed properties of all items. It turns out that states are the real answer. Check the following example where we have a form that needs to be entered in three steps. During a step the other steps can be visible, but they need to be disabled.

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="initState()">
<mx:Script>
... CDATA[ // sorry I have problems posting the real CDATA tag
private function initState():void {
currentState='state1';
}
]]...
</mx:Script>
<mx:states>
<mx:State name="state1">
<mx:SetProperty target="{tareaStep1}" name="editable" value="true"/>
</mx:State>
<mx:State name="state2">
<mx:SetProperty target="{tareaStep2}" name="editable" value="true"/>
</mx:State>
<mx:State name="state3">
<mx:SetProperty target="{tareaStep3}" name="editable" value="true"/>
</mx:State>
</mx:states>
<mx:HBox>
<mx:VBox id="step1">
<mx:Label text="Step 1"/>
<mx:Button label="Done" click="currentState='state2'"/>
<mx:TextArea id="tareaStep1" width="200" height="400" editable="false"/>
</mx:VBox>
<mx:VBox id="step2">
<mx:Label text="Step 2"/>
<mx:Button label="Done" click="currentState='state3'"/>
<mx:TextArea id="tareaStep2" width="200" height="400" editable="false"/>
</mx:VBox>
<mx:VBox  id="step3">
<mx:Label text="Step 3"/>
<mx:Button label="Done" click="currentState='state1'"/>
<mx:TextArea id="tareaStep3" width="200" height="400" editable="false"/>
</mx:VBox>
</mx:HBox>
</mx:WindowedApplication>

In the sample you can edit only one box at a time, by pushing one of the buttons you go to the other box. This might be a bit strange example. You’d probably use another implementation in the real world. But it shows what you can do. You can also add color or other things like rounded corners. Wonder how? You can use the same means. Provided a default value for a styleName in the TextArea elements and use the SetProperty to change the property styleName into something else. You can do the same thing for the size of the TextArea’s. The following image gives you an idea what you can easily accomplish.

Using renderers

Using style sheets and inline style information can help you a lot in styling components. Still, sometimes you need more. In a datagrid you want to show an image depending on multiple fields of the current item, or you want to add an image to the items in the dropdown list. There is a good post about flex renderers by Peter Ent on flexdev at adobe.com. Some of the most important things to know about flex renderers are that you should use them with care. They can be pretty expensive. They are reused, be sure to take into account that they can have state from the previous use. Let’s have a look at one of the two samples I mentioned. The select box with an image in each item. An orange point means that you have not read the item yet. The grey one than means of course that you have read it before. The first code shows the ComboBox where the itemRenderer property of the ComboBox is set. The second part is the item renderer itself. The item renderer itself is placed into a separate component to make it more explicit and even re-useable.

<mx:ComboBox id="selectedPeriod" editable="false" width="110" styleName="salary"
dataProvider="{WidgetModel.getInstance().availableSalarySlips}"
selectedItem="{WidgetModel.getInstance().choosenPeriod}">
<mx:itemRenderer>
<mx:Component>
<myrenderer:PeriodComboBoxItemRenderer/>
</mx:Component>
</mx:itemRenderer>
</mx:ComboBox>

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" horizontalScrollPolicy="off">
<mx:Script>
...CDATA[
import images.EmbeddedImages;

override public function set data( value:Object ) : void {
super.data = value;
if (data.read == true) {
readIcon.source = EmbeddedImages.readSmallImage;
} else {
readIcon.source = EmbeddedImages.unreadSmallImage;
}
}
]] ...
</mx:Script>
<mx:Label text="{data.label}" width="50"/>
<mx:Image id="readIcon" source="{EmbeddedImages.unreadSmallImage}"/>
</mx:HBox>

Important about the item renderer is the override of the set data method. Here you have access to the data and can do manipulation when the data is set. In our case we change the actual image that is presented as part of the item. The item itself is generated as an HBox.

As an alternative to an ItemRenderer you can use a labelFunction. You cannot create complete Hbox components, still you can do a lot of formatting. Often that is enough to do. A good example is always to format a date. The following code block gives an example of a DataGrid where one column uses a formatter to format a date.

<mx:Canvas>
<mx:Script>
... CDATA[
private function formatCreatedate(rowItem:Object, column:DataGridColumn):String {
return longDateFormatter.format(rowItem.createdate);
}

]] ...
</mx:Script>
<mx:DateFormatter id="longDateFormatter" formatString="DD/MMM/YY J:NN"/>
<mx:DataGrid>
<mx:DataGridColumn dataField="createdate" headerText="Datum" labelFunction="formatCreatedate"/>
</mx:DataGrid>
</mx:Canvas>

Styling and effects

Styling your application is very easy, oke, the basic styling. You will find out that the styling details can be very hard to accomplish. Still some things like these perfectly rounded corners, are so damn easy. I already used this technique in the sample with the different states. The following piece of code shows the code for the example.

<mx:Style>
.active {
corner-radius:10px;
border-color:yellow;
border-thickness:2px;
}
.inactive {
corner-radius:0px;
background-color:#dddddd;
}
</mx:Style>

I am not going into great details about all the other possible things. What I do want to mention are effects. When you are moving from one state to another, you can use effects to make it look very nice. There are a lot of resources to be found on the web. I have extended my three step form with a nice state transition effect. The following code block shows the transition.

<mx:transitions>
<mx:Transition fromState="state1" toState="state2">
<mx:Parallel>
<mx:Resize widthTo="200" widthFrom="100" target="{tareaStep2}"/>
<mx:Resize widthTo="100" widthFrom="200" target="{tareaStep1}"/>
</mx:Parallel>
</mx:Transition>
<mx:Transition fromState="state2" toState="state3">
<mx:Parallel>
<mx:Resize widthTo="200" widthFrom="100" target="{tareaStep3}"/>
<mx:Resize widthTo="100" widthFrom="200" target="{tareaStep2}"/>
</mx:Parallel>
</mx:Transition>
<mx:Transition fromState="state3" toState="state1">
<mx:Parallel>
<mx:Resize widthTo="200" widthFrom="100" target="{tareaStep1}"/>
<mx:Resize widthTo="100" widthFrom="200" target="{tareaStep3}"/>
</mx:Parallel>
</mx:Transition>
</mx:transitions>

With the use of ActionScript you might be able to make this more generic. But now you can easily follow what happens. Converting it to ActionScript is something I leave up to you guys to resolve. If you really want to see this work, you can download the air version. By the way, you do need the air player to run it . If you only want the source, you can download it as well

Frameworks and libraries

Just like with any technology, flex has a lot of libraries that you can use. There are some very well known libraries and some lesser known. At the moment I use Mate for my biggest project. This is a tag-based, event-driven Flex framework. I like the way you can do decoupling and dependency injection. It feels good. I am beginning to learn about Cairgorm. To be honest, for now I like Mate better. But you should not take this as an advise to look only at Mate. Try it out yourself. I am planning on rewriting the books-overview sample with Mate, more on that in posts to come.

Another component I use is the auto complete manager from yahoo’s project astra-flex. Since the project comes with excellent documentation, I am not going to explain how to use it. So far I have not used other components, feel free to comment on this blog post with good examples.

Security, BLazeDS and spring integration

I am keeping this short, read my other posts about flex for more details on these topics.

Concluding

This post has become long enough. Time to end with some thoughts and some references. Compared to important java frameworks I am missing documentation and good examples. Adobe has documented the sdk pretty thorough though. As a very positive point, there is a very active and helpful community. The maven plugin from velo and the Mate framework are good examples of how people help you when you are stuck. If you are beginning with flex, or you are looking for very specific knowledge you should definitely check out the adobe videos.

I hope this post was helpful, questions and comments are welcome.

References

• http://www.adobe.com/devnet/flex/articles/flex_security.html
• http://www.adobe.com/devnet/flex/videotraining/
• http://mate.asfusion.com/