Why you might not want to use Flex

Posted by: Joshua Partogi on: November 23, 2008

• In: Java
• 33 Comments

At the time being I am doing a Flex project for my client. Alot of people has been praising Flex for being the answer in the RIA world. In one way and the other, it’s true: Flex is really sexy, because it can bring all of the interactiveness and statefulness from desktop app world to the webapp world. But there is a but. It’s good from user’s point of view. But from developer’s point of view, it’s a different story. You might have to think again whether or not to use Flex for your next project if you are currently considering to use Flex. What I’m saying here doesn’t mean that Flex is not good, but rather I’m saying there is a consideration you might have to think about before you want to use Flex and there is consequences to get all of those sexiness.

Flex is good for a reason, but it’s not for the other reason. Doing almost everything in Flex is quite different compared to regular web development using html, css and javascript (or web 2.0 as some people say). I’ve even made a presentation about this and shared it with JUG-Indonesia several months ago. For some people there will be some pains they have to go through when entering the Flex world. And for some people these differences might not be acceptable because in one way or the other it can affect the productivity of the developers in the team. Anyway, all in all the reason you might not want to use Flex is:

With Flex you would require extra efforts to do a simple thing.

That’s it. That’s the only reason why you might not want to use Flex. Even the simplest task that does not require you a web framework to accomplish it, Flex can introduce you an extra effort to do it. Not to mention also solutions that has been made simpler with web frameworks, is not available in Flex yet. If you can live with those hurdles because you are the code ninja and you’ve got plenty of time to do deal with it, then you might not want to read the rest of this blog entry and bugger off instead.

Note: At the time of writing this blog entry, I am using Flex 3 and Actionscript 3. So as time goes by you might find this post irrelevant.

Some task that turns out would require you another extra effort in Flex compared to many other Java frameworks in general are:

1. Selecting combo box value

You know how in HTML there’s a master page where you would have result list and you click the row in that list to get into the detail page and in that detail page there is a combo box where its value is assigned based on the the result from the master page. This is not so much work in HTML right? If you are using Java web framework like Struts or Tapestry it’s even easier to assign a value to a combo box.

In Flex be prepared for some extra work since you need to make a helper code, for assigning that value to a combo box. Okay to get the idea what I’m talking about, let’s just have a look at the code.
Here’s the Flex ComboBox component look like:

<mx:ComboBox id="catCombo" dataProvider="{categories}"/>

dataProvider is a list of objects that will be displayed on the combo box, it can be an Array or ArrayCollection. Now we will use these list of objects to be selected based on the value from the master page. This ComboBox also has a selectedIndex attributes which we will use. Now we must make a helper function that I’ve told you about to get the selectedIndex of the object. Here’s how it would roughly look like:

public function changeCombo(list:Array, label:String):int{
	var i:int, index:int;
	for(i=1; i< list.length; i++){
		if(list&#91;i&#93;.label == label){
			index = i;
		}
	}
	return index;
}
&#91;/sourcecode&#93;

We pass on the Array object, in this case the categories and the String label we want to get. We then make a loop to match which object from the Array that has the same String label that we want to get. From there we can get the index and use that as the selectedIndex as such:

&#91;sourcecode lang='javascript'&#93;
catCombo.selectedIndex = changeCombo(categories, product.category);
&#91;/sourcecode&#93;

This is the simplest pain you'll get in Flex. But don't worry, it can get much worse than this as we move on. Just hold on to your seats if you still can handle it.
	<li><strong>Formating data in DataGrid</strong></li>
I have a scenario to format a data with type Number inside a data grid. In JSF I would just use the formatter component for this and nest it inside the DataTable, but in Flex it is slightly different. Instead of using an mxml component and nest it inside the DataGridColumn component you would actually make a function for it. Let's take a look at the code to get the gist of it:

<mx:DataGridColumn labelFunction="priceLabel" sortCompareFunction="sortPrice"  headerText="Price" textAlign="right"/> 	

This is the DataGridColumn component that is nested inside a DataGrid component to display a data with type Number. Now since I want to format this data with a thousand and decimal separator, I need to make a label function for it:

private function priceLabel(item:Object, column:DataGridColumn):String{
     return fNumber.format(item.basePrice); 
}

But hold on, that function need to actually call a formatter component that actually define the format of the number:

	<mx:NumberFormatter id="fNumber" 
		decimalSeparatorTo="." 
                thousandsSeparatorTo="," 
        useThousandsSeparator="true" />

Well, that’s quite a work just for the sake of formatting data huh? But are we done yet? Of course not. By default DataGrid component are able to sort data by clicking the DataGridColumn header, since we have formatted the data that is inside it, we need to make a function to sort that data. That sorter function would kinda look like this at its simplest:

private function sortNumber(item1:Object, item2:Object):int {
     	if ( Number(item1.basePrice) > Number(item2.basePrice) ) return -1;
    	else if( Number(item2.basePrice) > Number(item1.basePrice) ) return 1;
    	else return 0; 
}

Now we can relief since we are really done. It took quite a while just to format a data inside a DataGrid hey? If you have used JSF, you would know how easy it is to do this.

2. Validating data from input fields

How would you normally validate data from input fields in your framework? In Tapestry 5 I would only need to add one attribute called ‘validate‘ and use it as such:

<input t:type="TextField" t:id="firstName" t:validate="required"/>

And it is an Ajax enabled validator too.

In Flex you can achieve the same thing, by adding a Validator component. So if we want to re-write the above example in Flex, it would be as such:

	<mx:StringValidator id="vFirstName" source="{firstName}" required="true" property="text" />
	<mx:Form id="form2">
		<mx:FormItem label="firstName">
			<mx:TextInput id="firstName"/>
		</mx:FormItem>
		<mx:Button label="Submit" click="save()"/>
	</mx:Form>

But unfortunately the above code doesn’t actually prevent user from submitting the form. It will just give a message that there is a validation error but the form will still be submitted. Now you must make an extra effort to prevent user submitting form. One way to do this is by disabling the button until it is validated. To achieve this, it will introduce you several lines of codes. First we must make an event listener for listening to user typing in the entry field and validate the input:

[Bindable]
public var formIsValid:Boolean = false;

private function listener(event:Event):void{
	formIsValid = true;
	focussedFormControl = event.target as DisplayObject;
}

In the listener we define the current ‘on focus’ field that is being validated. We will need the value from this flag for the next function.

private function validate(validator:Validator):Boolean{
        var validatorSource:DisplayObject = validator.source as DisplayObject;

        var suppressEvents:Boolean = (validatorSource != focussedFormControl);

        var event:ValidationResultEvent = validator.validate(null, suppressEvents); 

        var currentControlIsValid:Boolean = (event.type == ValidationResultEvent.VALID);

        formIsValid = formIsValid && currentControlIsValid;
        return currentControlIsValid;				
}

The above function is to actually call the validator to validate the source. Now we need to get the source of the validator and we match this validator’s source to the currently on focus control, if it is not the same then we will suppress the event. After that we check whether the form is valid, if it is valid we will enable to button and user will be able to continue submitting the form. For that we need to change a bit of our view code by adding the change attribute to the TextInput and the enabled attribute to the Button as such:

	<mx:Form id="form">
		<mx:FormItem label="firstName">
			<mx:TextInput id="firstName" change="listener(event); validate(vFirstName);"/>
		</mx:FormItem>				
		<mx:FormItem label="lastName">
			<mx:TextInput id="lastName" />
		</mx:FormItem>
		<mx:Button label="Save" click="save()" enabled="{formIsValid}" />
	</mx:Form>

This is where Flex differs from other web framework. It provides flexibility in the validation, but its going to cost you several lines of codes. The example I’ve given you is just the simplest example. Of course it can go wilder from there. The wilder it get, the more code you have to write.

3. File upload

The last point in this article is File uploading. So how do we do file uploading in Flex? As you may have known already, there is a fileupload input in html for uploading files and in some Java frameworks like Tapestry 5 defining a file upload component is a matter of typing one line of code:

<input t:type="upload" t:id="file" validate="required"/>

In Flex … unfortunately there isn’t any file upload component. So what if you want to upload a file with Flex then? Flex only provides you with a FileReference object which you can use with other component and massage it to be a custom file uploader component.

To make the file component first we should make the button and the textfield to be referred by the file. We’ll create a simple one as described below:

<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*" creationComplete="creationComplete()">
        <mx:Form id="form">
		<mx:FormItem label="Image" required="true">
			<mx:TextInput id="image"/>
			<mx:Button label="Browse" click="fileRef.browse(allTypes)" />
		</mx:FormItem>
	</mx:Form>
</mx:Application>

So what happens here is, a FileReference object will browse an array of file type that is allowed to be uploaded. Here’s the script for it:

/** Image uploader */
import flash.net.FileReference;
import flash.net.URLRequest;
import flash.net.URLVariables;

private var imageTypes:FileFilter = new FileFilter("Images (*.jpg, *.jpeg, *.gif, *.png)", "*.jpg; *.jpeg; *.gif; *.png");
private var textTypes:FileFilter = new FileFilter("Text Files (*.txt, *.rtf)", "*.txt; *.rtf");
private var allTypes:Array = new Array(imageTypes); 

private var fileRef:FileReference = new FileReference();

During initilization we must also tell the application to add an event handler when a file is selected and when a file has been successfully uploaded as such:

private function creationComplete():void{
       // Listener when user selects the file
	 fileRef.addEventListener( Event.SELECT, selectHandler );

	 // Listener when file is uploaded
	 fileRef.addEventListener( DataEvent.UPLOAD_COMPLETE_DATA,completeHandler );
}

Now the function for the event handler itself are as such:

private function selectHandler(event:Event):void {
	image.text = fileRef.name;

	var params:URLVariables = new URLVariables();

	var request:URLRequest = new URLRequest("/product/uploadImage.do");

	request.method = URLRequestMethod.POST;
	request.data = params;
	fileRef.upload(request, "fileName");
}

private function completeHandler(event:Event):void {
	// Do something here upon completion
}

In the file select handler I basically tell Flex to upload my file asynchronously on the background to the URL I’ve defined. That URL can be a Java controller for uploading the file, or that could be a PHP or Rails code or anything to upload your file to the server. For the ‘complete handler’, I didn’t do anything there. But you can do whatever you want there, like giving a message to the user that the file has been successfully uploaded etc.

To sum it up, let me rephrase what I have said in a simpler statement:

Flex is not agile (enough)

If you are into an agile framework that can boost up your developers productivity, Flex might not be for you and you might be happier with something else.

I can go on and on with this as there is more in the list to what I have written here. I’ve only covered some basic stuffs that turns out requiring another extra effort. But we must also remember that Flex is still relatively new, so we still have hope in the future. There just hasn’t been many frameworks that is built around it yet to solve this common issues. This is the same situation in Java when there was only Java servlets back then, but things has gotten better now right? You can even see new Java frameworks rise up to the surface everyday. Perhaps the engineers at Adobe are looking at it at different way: though you must go through those pains but on the other hands Flex is able to offer you greater flexibility and control. As they always say: No pain, no gain.

That’s why don’t just take my word for it, try it out first and see how far you can deal with it. If you’re okay with it, please don’t hesitate to use it. Cheers.

Tags: Flex