Aral Balkan

Flex Builder 1.5 appears to have such a fundamental bug in it that I was actually afraid to post something about it earlier, without double-and-triple checking my results and extensively testing it out, for fear of having overlooked something very minor. Basically, Flex Builder loses the ability to preview your applications in Design View if you subclass mx.core.Application or mx.containers.Form. Although this is perfectly legal -- and actually, I would argue, a best practice (more on that later) -- and although the resulting applications run when compiled, Flex Builder's Design, Run and Debug features stop working.

I am still hoping that there is at least an undocumented way to tell Flex Builder, "Hey, I'm extending Application/Form, so you can go ahead and display it as if it was an Application/Form" but I haven't been able to find such a way as of yet (and I've looked extensively into to the extensibility layer for Dreamweaver too without any luck in locating hooks into the Flex Design View renderer.)

Thus, the following simple example renders correctly in Flex Builder:

<?xml version="1.0" encoding="utf-8"?>


<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" childrenCreated="onChildrenCreated()">


	<mx:Script>


	<![CDATA[			


		var counter:Number = 0;


 


		function click ()


		{


			counter++;


			aTextInput.text = "You've clicked "+counter+" time";


			aTextInput.text += ( counter == 1 ) ? "": "s";


			aTextInput.text += "! Good on you!";


		}


		


		function onChildrenCreated ()


		{


			aButton.addEventListener ( "click", this );


		}


		


	]]>


	</mx:Script>


  <mx:TextInput id="aTextInput" />


  <mx:Button id="aButton" label="Button"/>


</mx:Application> 

While the following does not:

<?xml version="1.0" encoding="utf-8"?>


<flexBuilderBug:ApplicationSubclass


	xmlns:flexBuilderBug="com.ariaware.flexbuilderbug.*"


	xmlns:mx="http://www.macromedia.com/2003/mxml" 


>


  <mx:TextInput id="aTextInput" />


  <mx:Button id="aButton" label="Button"/>


</flexBuilderBug:ApplicationSubclass> 

The code for the ApplicationSubclass, which you need to place in the WEB-INF\flex\user_classes\com\ariaware\flexbuilderbug folder of your Flex application, is given below:

class com.ariaware.flexbuilderbug.ApplicationSubclass extends mx.core.Application


{


	// Components


	var aButton:mx.controls.Button;


	var aTextInput:mx.controls.TextInput;


	


	// Properties	


	var counter:Number = 0;


	


	function init ():Void


	{


		super.init();


		


		addEventListener ( "childrenCreated", this );


	}


	


	//


	// Event Handlers


	//


	function childrenCreated ()


	{


		aButton.addEventListener ( "click", this );


	}


	


	function click ()


	{


		counter++;


		aTextInput.text = "You've clicked "+counter+" time";


		aTextInput.text += ( counter == 1 ) ? "": "s";


		aTextInput.text += "! Good on you!";


	}


} 

Similarly, if you were to include a Form subclass instead, Flex Builder cannot render a preview of that either.

If, indeed, there isn't a way to get the current build to display subclasses of Application/Form correctly, this is a major, fundamental bug and needs to be fixed as the first order of business. Subclassing the Application and Form classes is how Flex applications should be built. By following this methodology, you remove all code from the MXML files, making your applications easier to maintain and scale. (The currently de facto practice of including <script> tags and mixing code into your MXML are stages that we went through in the Flash world and grew out of.) ARP also supports this latter method of working and, in a series of articles that will be released this month (along with an update to ARP itself), you will see how this way of working also makes it child's play to migrate applications from Flash to Flex.

I do hope that there is a way to workaround this issue in Flex Builder currently and, if not, that it will be fixed in the next update.

The Fundamental bug in Flex Builder 1.5? article by Aral Balkan, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial 2.0 UK: England License.