Flex 3 Beta and Eclipse 3.3 Europa on OS-X

To anyone running the Flex 3 Beta as an eclipse plugin on OS-X -

If you’re trying to install it with the latest Eclipse 3.3 Europa release, you absolutely need to run the Eclipse Classic distribution! It will not work with the Eclipse IDE for Java Developers distribution. I learned this by trying various recommendations in this Adobe Flex support forum thread. Hopefully, this post will save other folks some time.

Flex 3 Beta – so far so good!

We’re starting a new project for a client that is going to be a Flex front-end powered by web services. I have to say that I am impressed and that the development cycle is extremely fast compared to Web/CSS/Ajax development. Comparing it to Flash 8/Actionscript 2, even with the complete set of open source Flash tools, is not even a fair contest.

I can say that, having just finished a PHP-based job tracking system using Yahoo’s UI Component framework (YUI) for widgets and their cross-browser Ajax implementation. The YUI framework is nice, but the development environment is up to the individual developer to cobble together. I personally use Eclipse with the PHP plugin and the Web Toolkit Plugin which offers nice editors for Javascript and CSS.

Flex 3 won me over by doing alot of the *little* things right. This is 180 degrees from the feeling I had with Flash 8 and its V2 Component Framework, which I felt failed to live up to its promises. Some of the winning points -

Point #1: Lots of Components

My biggest gripe about component frameworks – not giving me enough components to do what I need to do! Who wants a screwdriver set that doesn’t come with both flathead *and* phillips head screwdrivers? Well thats what it was like using Flash 8’s component set – it simply lacked alot of key components. No one likes telling a customer that they need to pay alot $$ because a component that they are used to using (oh, say, sliders) doesn’t exist and will need to be custom built for a project.

Flex 2/3 has *alot* of components. After finishing the prototype demonstration for our customer, I can happily announce that the stock set of components more than satisfied the UI requirements and they functioned very nicely.

Point #2: Rich Component Behaviors – a.k.a Drag and Drop!

In Flash 8, I wrote about 500 lines of code to add *robust and reusable* drag and drop to the Tree component which took about 2 weeks to develop and debug. In Flex, drag and drop is natively supported by List components, which include DataGrids, Trees, TileLists and many more. I *enabled* drag and drop in a matter of seconds and it worked between a variety of components.

Point #3: MXML is a really good layout language

MXML is a language *designed* for component layouts. Don’t let the HTML syntax fool you into thinking its lightweight – its not. Its syntax just happens to let you do very powerful things with very little typing.

In YUI, the Yahoo engineers did a fine job of creating a hybrid world of tags that you can ‘componentize’ by properly identifying certain HTML elements and passing them to YUI’s framework functions to transform them into rich UI widgets like Trees and TabViews.In MXML, there is no developer ‘translation’ step required.

You write a tag like <mx:Tree> and you get a tree. Better yet, you add some attributes like <mx:Tree fontSize=’16′> and you have a Tree using a size 16 font.

The Adobe engineers did a great job of creating a really focused view language. Much like an HTML page, its very easy to ’see’ how things will layout based on the tag structure, which is a huge advantage over pure code UI environments like Swing, SWT or even Flash 8/Actionscript 2.

Point #4: CSS done right

The Adobe engineers also incorporated another strength from the Web development world, CSS. Unlike Flash 8, whose CSS capabilities were limited and required some effort to form a best practice around, Flex has CSS built-in as a first class citizen.

MXML uses CSS in manner very similar to a standard HTML document. Simply specify the stylesheet you want to use with the <mx:Style> tag and the imported styles will be appled to your components. Apply different stylesheet definitions and you can change how your whole Flex application looks and behaves. Very familiar and very easy to use.

Point #5: The IDE works

Yes – I can’t believe I’m saying this but I suggest paying for Adobe’s Flex IDE, either as a stand-alone eclipse distribution or as a plugin for eclipse. I’ve been running the plugin and guess what – it works really well. I do miss refactoring tools but their MXML editor is solid and its design mode helps newbies get going quickly.

I happily doled out the whopping $800 USD which also includes the Chart SDK license. Granted, I have a customer who is paying me for this, but in the time that it would take to cobble together an environment based on the Flex open source SDK, the customer would have already paid more than the cost for the license.

Wrapping up

I’ve already deployed the prototype as an Adobe Air application which is pretty slick – my prototype application now runs as ‘native’ desktop application inside Adobe’s portable runtime called Air.

I haven’t gotten through the databinding and service integration peices yet which I need to complete my Flex 3 experience. Once I get past that, I’ll post again.

All in all, a thumbs up! If you or your customers can afford the up front license cost for the Flex IDE, it’ll pay for itself in productivity within a couple of days.