Flex maven template - getting started

In Per´s lession 1 of his flex development tutorial he showed us a build setup - it is a bit outdated by now as the israfil plugin moved to google code and the sateh repository doesn't exist anymore. It also only contained the flex module and no war sample showing how easy it is to deploy the flex application.

I took the liberty to create my own template consisting of a multimodule build:

• Flex module - looking prettymuch the same as Per´s.
• War module - depending on the flex module wrapping the swf file into a war ready to deploy.

I would have created a maven archetype, but considering mavens lack of support for archetypes containing multimodules I just created a zip.

I find the template useful when starting a flexproject from scratch and maybe you will too?

Download
Download the flex-template

For more information about the israfil plugin click here

Sharing flex code examples

Developing flash front ends with flex is really getting to me.
I don't have Flex Builder but find no problem with developing using another IDE combined with maven and the israfil mojo.

From time to time I blog about some nifty actionscript 3/flex code but I am missing a simple way to distribute the sourcecode.
Unfortunately my IDE - Intellij IDEA - doesn't contain a feature making it easy to distribute the flex sample code, neither have I found a maven plugin capable of packaging the sourcecode for distribution.

Adobe added the ViewSource capable of linking to some arbitrary URL where the source is located.

import com.adobe.viewsource.ViewSource;
...
ViewSource.addMeneuItem(this,"srcview/index.html");

But then again you have to have the source code distributed :-)

I am considering developing a maven plugin that can do the job, but it would be waste of time if a solution is somewhere "out there".

So please let me know!

Advanced inputfiltering with flex

All the time I have been developing web applications in Java I have build my UI upon some framework like Struts, Tapestry or JSF. All of these frameworks encourage serverside validation and to some extend clientside validation.
I haven't seen a web framework facilitating a prober way to do input filtering. The few times I have implemented an inputfilter I have cooked up some javascript to do the job - normally not that reusable.
I don´t see filtering as a substitution of server side validation, but more as an extension of the user experience where the user gets immediate feedback on her use of an application.

At my current project we build the UI on the flash runtime in flex - and the flex framework really brings some interesting opportunities.

Basic
For basic filtering a restrict property can be set on the TextInput component only allowing a subset of characters as input.
But as soon as your inputfilter depends on already entered text the filtering gets a bit more sophisticated :-)

Advanced
On the TextInput you can listen for a TextEvent that contains the data the user is entering as input but react upon it before it actually hits the input field. That gives you the opportunity to prevent the input from reaching the Textinput component by calling the preventDefault() method on the event if the data isn't allowed for some business rule that you apply.

public class FilterTextInput extends TextInput {

 public function FilterTextInput() {
     addEventListener(TextEvent.TEXT_INPUT, validateInput);
 }

 private function validateInput(event : TextEvent) : void {
     var actualInput : String = EventUtil.getActualText(event);
     trace(actualInput);
     //sample filtering securing that all input characters are unique
     if (! StringUtil.containsUniqueChars(actualInput)) {
         event.preventDefault();
     }
 }
}

Unfortunately the event only contains the data the user is about to enter. So if you would like to validate the entire input as it would be after when the input is combined with the already entered text, you have to do some work yourself.


EventUtil
I implemented an EventUtil class capable of extracting the actual input as it would look like when the already entered text is combined with the incoming input (the method used in the sample above). The tricky part is to take notice of where in the existing text the new input is about to be entered. The input could replace some existing text and at the same time be pasted into the middle of an existing text.

My utility method looks like this:

public static function getActualText(event : TextEvent) : String {
    var input : TextInput = TextInput(event.currentTarget);
    var text : String = input.text;
    var b : int = input.selectionBeginIndex;
    var e : int = input.selectionEndIndex;

    var before : String = "";
    var after : String = "";
    if (e > 0) {
        before = text.substring(0, b);
    }
    if (b < text.length) {
        after = text.substring(e, text.length);
    }
    return before + event.text + after;
}

A simple example illustrating the use of function getActualInput(). The filter prevents the user from entering the same character twice: