Flex Pasta

It has been about a year now since Adobe announced it was open sourcing the Flex SDK, BlazeDS, and the Flex Compiler.  Today on my way home, I started thinking about improvements to the Flex Open Source Adobe that I would like to see in the future.

5.  Upgrade LCDS/BlazeDS to Java 5.

I am not sure the reasoning for having BlazeDS written in Java 1.4.  Most projects using Flex are going to use Java 1.5 since they are most likely newer software.  If for whatever reason, BlazeDS to Java 5 is not viable, at least create a separate Java 5 project that extends the BlazeDS code base.  This project could use features of Java 5 to give developers more tools.  In particular, annotations with remote objects would be a huge advantage for developers.  Bean property configuration, service method security, better enum handling, code generator support, etc would all be great.

4.   Bring the Flex Compiler Source Code out from the shadows

After attending MAX last month, I heard little about improvements to the Flex Compiler for Gumbo.  I guess the compiler isn’t the sexy part of Flex so maybe that is why.  But the compiler is just as important as the Flex SDK itself, so I would love to understand how it works.  I think the community would benefit with more exposure to the compiler code base.

3.  Make it easier to set up the Flex SDK, BlazeDS, and the Flex Compiler for local builds

The most looked at code base of the three components is probably the Flex SDK, just because we can hit F3 in eclipse and go look at the source code.  However, how many people out there(other than Adobe employees) know how to check out the source code for the Flex SDK, BlazeDS, and the Flex Compiler and then be able to make changes to the code?  I have been able to do it for the Flex SDK and BlazeDS, but it took some time(I also don’t think my config was ideal).  I spent a couple of hours trying to figure out the Flex Compiler with no luck.  I am hopefull for a little documentation for those of us out on an island trying to set it up.

2.  Improve the ability to run different versions of the Flex SDK

If you go out and download Flex Eclipse plug-in site today, you will probably get Flex version 3.2.  The rest of the development team might be using another version; say version 3.0 on the project.  Figuring it might be a good idea to have the same version of Flex as your coworkers, you visit opensource.adobe.com to download version 3.0.  The nice interface in FlexBuilder lets you have multiple Flex SDK’s installed and you can easily flip the compiler between different versions of the SDK.  One problem: Charts.  When you download the plugin, you get the charts bundled with the source code, but when you download releases from the open source page, charts are left off(I’m not sure the reason).  This means a project using charts won’t compile for you without some hacking to get it to work.

1.  Avoid using mx_internal/private in the Flex SDK

There are important instances where the private keyword is usefull(when I don’t want a subclass to override it or even be able to call it).  However, and I admit to doing this as well, we tend to use the private keyword by default when we don’t want a method to be public.  The protected keyword would be a much better option for the majority of methods in the Flex SDK.  I have found it difficult at times to extend Flex components and even BlazeDS code because the methods are private or mx_internal.   Maybe it was the intent of the authors to keep these methods private to avoid future upgrade hassles, but it can be problamtic to extend them.  My latest example of one such problem involves creating a ColumnChart.  I created the chart and had a ColumnSeries.  The chart was simple and I set the properties  labelAlign=”center” labelPosition=”outside”.  I was wanting to center the labels at the top of the bars on the outside.

As you can see in the picture, the labels are left aligned.  The as-doc states that labels on the outside can only be left aligned.  I want to try and extend column series to get the labels in the middle.  I find the method:

private function renderExternalLabels

I can’t extend it since it’s private.  Ok, so I find where renderExternalLabels method is called.

mx_internal function updateLabels()

This goes on for four or five methods before there is one that can be extended.  The point is that marking methods protected more aggressively can help everyone out who is trying to extend these components.

Those are my top five wishes for Flex Open Source.  What are your wishes?

There is no compile or run time error, but executing the following code will not work.  I knew this going in but wanted to try it just to see what happened:

<mx:TabNavigator>
      <mx:Text text=”Tab 1“/>
 </mx:TabNavigator>  

The reason it doesn’t work is because a tab navigator requires its children to be of type container.   There is a simple fix, one that requires more work

<mx:TabNavigator>
<mx:Box label=”Tab 1“>
<mx:Text text=”Everything else“/>
</mx:Box>
</mx:TabNavigator>  

I don’t want to wrap a box around all ten of my tabs!  One solution is to do the following:

1. Create a new Actionscript class called BoxText.as which extends Box.
2. Make a bindable property text:String in the Box.
3. Add an event listener for FlexEvent.CREATION_COMPLETE.
4. When creation complete occurs, simply add the text to the box.

Here is the output for BoxText.as:

package
{
import mx.containers.Box;
import mx.controls.Text;
import mx.events.FlexEvent;

public class BoxText extends Box
{
public function BoxText()
{
super();
this.addEventListener(FlexEvent.CREATION_COMPLETE, creationComplete);
}

private function creationComplete(event:FlexEvent):void
{
_text.text = text;
this.addChild(_text);
}

[Bindable]
public var text:String;
public var _text:Text;

}
}

Now I just use my component in the TabNavigator. It saves time and clutter!

<mx:TabNavigator>
<local:BoxText label=”Booyah” text=”My Text to show in the Tab“/>
</mx:TabNavigator>

Adobe opened source the Flex SDK since the 3.x release. Not only does this gives Flex developers the ability to see the source code and understand how the SDK works, but it also allows the community to provide bug fixes and enhancements. Adobe has said publicly that they would like to create sub projects from the Flex SDK that the community can contribute. The open source of the Flex SDK gives the community the fire power to submit code bug fixes. Developers should try and fix bugs in the SDK when they come across them. The following tutorial shows how to set up a Flex Project and have it build against the Flex SDK source code. These steps will allow a developer to make changes to the Flex SDK and build the project to see the changes.

1. Download and install Tortoise SVN. Tortoise is an open source subversion client that is needed to download the Flex SDK from the adobe repository.
2. Right click on a folder and click Checkout from the context menu.
3. The Toroise SVN screen should appear. Enter the URL of the repository. At the time of this being published, the URL is http://opensource.adobe.com/svn/opensource/flex/sdk/trunk.
4. Once the download of the source has completed(it takes a while!), open Eclipse.
5. Import the framework project. File > Import.
6. Press Next. Find the root directory where trunk is checked out, and enter this plus development\eclipse in the Select root directory box. This will show all of the Flex SDK projects.
7. Leave all of the projects selected and click finish.
8. Setup a linked resource variable in eclipse called FLEX_SDK and which points to the root directory of the SDK. Window > Preferences > General > Workspace > Linked Resources.
9. Enter FLEX_SDK as the name and the location where the Flex SDK is checked out. Press OK and then close the preferences window.
10. Right now the focus will be on only building the framework project. Go ahead and close the other ones. Right click on them and select close project.
11. At this point there should be no errors or warnings in the problems window. A clean might be required. Select Window > Clean and select the framework project.
12. Create a blank Flex Project. File > New Project > New Flex Project
13. Enter a project name and press Finish.
14. Now the FlexSDKTest project is setup, however, it is running against the compiled and installed version of the Flex SDK. To be able to make changes to the SDK source, the FlexSDKTest project must use the framework library project as its parent. To do this, right click on the FlexSDKTest Project and select properties, then select Flex Build Path > Library path tab.
15. Select the Flex 3 library and remove it. Click Add Project and select the framework project from the list. 16. Press the Add SWC button. Find the playerglobal.swc for the version using. The path usually is ${FLEX_SDK}/frameworks/libs/player/9/playerglobal.swc.
17. Press the OK button to close the properties window. Everything is set up to run code directly against the framework source. Just to make sure, run a simple test. Add a button to the FlexSDKTest application.
18. Open Button.as in the framework project. In the set label function, add code to the label’s value that modifies it: value = ‘I can change the SDK source code! BOOYAH!!!!’;
19. Save the file and build the projects. Run the FlexSDKTest application. The button’s label should read “I can change the SDK source code! BOOYAH!!!!”.

That’s it!! It’s off to the races for submitting enhancements and bug fixes to the Flex SDK repository. The flex bug tracking database can be found at http://bugs.adobe.com/flex/

mx:DataGrid and mx:DataGridColumn can sometimes pack powerfully picky precision.  Anyone who has ever tried using the word wrap feature knows just the pain.  Take a look at the following code and resulting output.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical” creationComplete=”cc()”>

<mx:Script>

<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]public var arrayColl:ArrayCollection = new ArrayCollection();
private function cc():void
{
arrayColl.addItem([“Poem 1″, “Sally sells seashells by the seashore.  She sells seashells on the seashell shore.  The seashells she sells are seashore shells, Of that I’m sure. She hopes she will sell all her seashells soon. If neither he sells seashells Nor she sells seashells, Who shall sell seashells? Shall seashells be sold?”]);
arrayColl.addItem([“Poem 2″, “Shelly sells seashells by the seashore.  She sells seashells on the seashell shore.  The seashells she sells are seashore shells”]);
}
]]>

</mx:Script>
<mx:DataGrid dataProvider=”{arrayColl}” width=”500″ height=”200″ wordWrap=”true” fontFamily=”Verdana” fontSize=”12″/>

</mx:Application>

Despite specifying wordWrap=”true”, my text doesn’t wrap!  After searching through the mx:DataGrid and mx:DataGridColumn properties, I came across
variableRowHeight=true.  Within seconds, text was wrapping nicely.  How great would it be if this was mentioned in the wordWrap asdoc?  Here is the resulting output:

With the explosion of Flex leading the way in web 2.0, I often wonder, 5 years from now, will Flex dominate the RIA landscape?

What Flex has going for it: A great looking UI out of the box Adobe: A big corporate name investing money in its promotion. While free ajax frameworks are great as well, there are a lot of options out there that clutter the picture of a front runner against Flex. BlazeDS - AMF. It is proven to be the fastest web 2.0 transfer and rendering framework out. It also makes coding easy for Java developers. It is open source! Yes, Flex Builder does cost money, but for corporations wanting an enterprise RIA, this is nothing. The important thing is that the code is available for the community to improve.

Where Flex struggles:

• Marketing: Nobody knows about Flex! While this is improving, many people, developers, managers, CEOs, etc have never heard of it! If they hear about it, they would probably be using it. Adobe should run a Super Bowl commercial. Flex doesn’t apply to the general audience, but hey, GoDaddy has Danica Patrick doing Super Bowl Ads. If the general audience registers websites then their next step would be making the website. Maybe Pinky and The Brain could be the spokesmice?
• The Google Effect. It is why this blog and every other blog is NOT written in Flex. Google and other search engines can’t read them! They can’t read the text or the cool drag and drop features they might do. AJAX sites are limited web crawlers as well, but not as much as Flex.

Great Points, but I’m a little scared by this Pinky and the Brain stuff. What is it?

Pinky and the Brain is an emmy winning cartoon with the following theme:

Pinky: “Gee Brain, what do you want to do tonight?”
The Brain: “The same thing we do every night, Pinky- try to take over the world.”

Check out the intro on youtube: