Technoracle’s Top-10 reasons for using Flash Builder 4 for Flex 3 Projects.

I write this after only being half way through my itinerary for speaking about Flash Builder 4 to Adobe Flex User Groups. Having a chance to hang with many developers made me realize that we (Adobe) understated a major benefit of Flash Builder 4. Specifically, it seems we could have done a better job of explaining some of the key benefits for using Flash Builder 4 for Flex 3 projects. Many Flex developers I have talked to seem to be holding off on upgrading to Flash Builder 4 based on a perception that they also have to also update all projects from Flex 3 to Flex 4. This is simply not true. One of the top requests for the next version of Flex Builder was the ability to use multiple Flex SDKs within one IDE. You can import your Flex 3.X projects into Flash Builder 4 today and they will simply work. Check out this cool feature on the new project creation wizard shown below:



The top ten reasons are presented in random order (I’m a pretty random guy). Also note that this article does not get in to the compelling reasons why someone would want to use Flex 4 instead of Flex 3. The reality is that many of the developers I have spoken to work on large scale, long term enterprise Flex projects and rewriting them in Flex 4 is not something up for negotiation. If you are one of those, this article caters to you. I could write another ten pages on the beauty of Flex 4 and the new Spark component architecture but I am a lazy Adobe employee and this is probably the only blog post I will write this week. Here is my list.


1. Enhancements to ASDoc integration. By far, my most favorite feature of Flash Builder 4 is the tighter integration with the ASDocs and the enhanced information available during the development process. Any time you hover the cursor over a reference to a component, ASDoc information is available as both a popup menu (can be disabled) or via the ASDocs tab.



This is so powerful for developers for a number of reasons. One is that you instantly have access to the information about that component/class without having to migrate to another screen or window. This includes full inheritance and a plain text description of what it does (brief version). The second is that there are embedded hyperlinks to the documentation of related classes so you can get a feel for whether or not you are using the right component or class. The new addition of information about which language version of the Flex SDK the functionality appeared in as well as which Flash Player and AIR runtimes is also very useful.

2. The ability to use multiple SDKs. As mentioned above, Flash Builder 4 lets you start new projects in Flex 4 but also finish up existing projects in Flex 3 with the aide of all the enhanced developer tooling. Even if you’re just going to do Flex 3 for the short term future, this is the IDE you want to be on.

3. Pair code highlighting. Whenever you hover over a component declaration or named object, Flash Builder highlights all instances of it. This even works across both MXML and AS as shown below.



This one feature alone has saved my sorry developer behind so many times when I’ve made typos.

4. The Network Monitor. This is another one of my favorites and, if you will indulge me, a totally kickass addition to the IDE. As an SOA guy, I spend a lot of my coding time working on remote calls to services. The Flex Builder 3 IDE hid most of the details from the developer making it difficult to debug an application when something went wrong. The Network Monitor gives you the raw messages in both a logical and raw data view. You can easily spot malformed headers, get direct access to SOAP fault messages, and see HTTP, AMF, and raw text results in real time. Below is a typical HTTP request.



And here is the accompanying response.



This tool makes it so easy to debug both simple and complex message exchanges in a variety of protocols.

5. Enhanced Data Centric Development features. My record for setting up a new project, using the Web Service wizard to inspect a WSDL instance, generate the stub code, generate a form for the service call, optimize it, save it, compile and run it is 26 seconds! Do I need to say more? Not really but I will. The Flash Builder team also answered the biggest developer request which was access to the generated code to inspect and modify. For example, here is the generated code for the service call above. Note that the parameters for all the details of the call are clearly spelled out in plain ActionScript for you to inspect.



But wait! That is not all you get. This code is from the super-class. If you want to modify this, there is a sub-class stubbed out with the starter code, which allows you to override permissible operations or functions without messing up the generated code! IMO this is a very cool feature.


6. Fix Code Indentation. OK – this blows the SAP “pretty printer” away. If you are like me, code is art. I see beauty in well written and properly indented code. If you are fine with code that is indented like a drunken lemur had access to a random number generator that controlled lead in spaces on each character, you might not use this feature. If you want to create code that can be displayed in the Louvre, check this feature out. Here is the art-less heathen coding style that multiple quick fixes can create just before the “Correct Indentation” is used.



and here is the work of art that results:



Beauty is in the eye of the developer (since it all gets compiled into a SWF anyways).

7. Fiber Plugin. The Fiber (a code name for a data model driven methodology for development) is one of the coolest client and server-side technologies ever made. When you use the Data Model plugin with Flash Builder 4 and a supported application server like LiveCycle Data Services 3.1 running on JBoss, there is simply nothing better for developing a client with full CRUD capabilities with the Flash Builder 4 IDE. This one feature alone should be the holy grail for many J2EE developers looking to cap a great enterprise application with an awesome GUI written in Flex. Flash Builder 4 gives the developer a “view” into the servers’ data capabilities via HSQLDB running on port 9002 (default).



What is awesome is that these tables can be simply dragged directly into an existing project, which then creates service calls for all major CRUD operations. Generating a graphical user interface is as easy as dragging and dropping a service call onto a datagrid or right-clicking and selecting “Generate Form”. Rather than repeat everything in this blog post, I would direct you to the tutorial posted at http://www.adobe.com/devnet/livecycle/articles/lcdses2_mdd_quickstart.html.

8. Easier FlexPMD Integration. If you are a Flex Developer and have not tried FlexPMD yet, do yourself a huge favor and try it out. FlexPMD is an open source tool that helps to improve code quality by auditing any AS3/Flex source directory and detecting common bad practices, such as:

* Unused code (functions, variables, constants, etc.)
* Inefficient code (misuse of dynamic filters, heavy constructors, etc.)
* Over-complex code (nested loops, too many conditionals, etc.)
* Over-long code (classes, methods, etc.)
* Incorrect use of the Flex component lifecycle (commit Properties, etc.)

Flex PMD can be easily installed and run on any Flex project to find out how well ( or not ) your coding practices align with industry conventions. Of course my own code generates very few exceptions (if you believe the last sentence I have a bridge to sell you).



9. Automatic Event Handler Generation. One of the top things I get errors with is catching an event and passing an event object to the event handler. Flash Builder 4 has a very cool feature whereby in the code complete, the IDE offers to create an event handler for you automatically.


This now makes me also want a new feature in the future. I would love to have the ability to have this generate the click handler as an ActionScript class inside of one of my packages in my project.

10. Automatic Getter/Setter code generation. This is a feature I haven’t personally used but am looking forward to trying on larger projects. When following enterprise Flex coding practices and conventions related to OO methodologies, developers often find themselves performing the same basic patterns over and over. By automating some of these patterns, developers can free their time from the more mundane programming tasks. When you create a variable in Flash Builder 4, you can right click and select “generate getter/setter” and Flash Builder will build the code for you. Below is the result from such an operation.


Even though I only listed ten, there are tons of other new features you can use within Flash Builder 4 for Flex 3 projects. So what are you sitting there reading this for? Download and try Flash Builder 4 trial already!