Adobe Flex 3 – What is it and why is it my new side project to join the other side projects?

In a previous blog entry (see “Adobe – Could a major software studio do the right thing?“), I mentioned how Adobe seem to doing the right thing with tools such as Air and Flex. Since then I’ve talked to some folks who’ve been using Flex 3 in anger and they reported how cool it was.

Today I fired up a copy of Flex Builder 3 – an IDE’ified version of the free Flex 3 SDK – as I have a feeling Flex will be the next big thing with web development. Flex comes in two flavours – Builder and SDK. Builder is the commercial offering whilst the SDK is free. That move itself is a clever one on Adobe’s part – Microsoft tried a similar effort with their Express line, however the difference is you can actually deploy compiled projects with the Adobe SDK.

So what is Flex?

“Flex is a free, open source framework for building … web applications that deploy consistently on all major browsers, desktops, and operating systems. It provides a modern, standards-based language and programming model that supports common design patterns. MXML, a declarative XML-based language, is used to describe UI layout and behaviors, and ActionScript™ 3, a powerful object-oriented programming language, is used to create client logic.” (source: Adobe.com)

Basically it allows you to create modular code that you can create great web based user interfaces and applications with. It generates SWF (Flash) files once the project is compiled, so any system that can run Flash can run Flex Apps. It can also be used as part of an Adobe Air application.

What is MXML?

As the name implies, it’s XML with Adobe specific tags. I suspect the “M” stands for Macromedia, the company that Adobe took over and encorporated products such as the excellent Dreamweaver.

First let’s look at a regular XML document

<?xml version=’1.0′ encoding=’utf-8′ ?>
<MovieCatalog>
<movie>
<title>The Matrix</title>
<actors>
<actor>Keanu Reeves</actor>
<actor>Laurence Fishburne</actor>
<actor>Carrie Ann Moss</actor>
</actors>
<director>Wachowski Brothers</director>
</movie>
</MovieCatalog>

And now a MXML document

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml&#8221; backgroundGradientColors=”[0xFFFFFF,0xAAAAAA]”
horizontalAlign=”left” verticalGap=”15″ horizontalGap=”15″>
<mx:HBox width=”100%”>
<mx:Label text=”This is a label”/>
<mx:TextInput/>
<mx:Button label=”Search” click=”submitRequest()”/>
</mx:HBox>
</mx:Application>

Looks reasonably similar – except MXML is recognised through the <mx:> tags. What the MXML does in the above example is place a horizontal container with a label, text box and input button inside it.

flex1.jpg

The great thing about Flex Builder is you can drag and drop UI components onto the “form” like you can in VB, or .NET (for example) – Builder will then do all the work of creating the MXML for you.

Once you have completed your project in the IDE, Flex builder will then compile all the MXML and convert it to a SWF file (a flash file that runs on the local browser). Neat eh?

Why should I care about Flex?

This presentation gives best illustration why I think it’s important. There’s also an article on RIA Wars about the difference between Flex and Silverlight (Microsoft’s offering in the RIA arena). You can achieve many things with HTML, Javascript, Ajax but there are limitations to what is really achievable for a proper user interface. RIAs take that step forward and give the ability to have engaging UI’s all within the space of your browser.

Flex *can* be used in isolation, with no requirements on the webserver, however if you want to start doing things with data manipulation (e.g. returning data from a SQL Server) then you do need to use either .NET, PHP, Java or Ruby.

Show us yer apps!

Take a look at the showcase for how it’s really being used.

Last Thoughts for now

One consideration amongst all this is how that RIA gets indexed by search engines and the challenge of getting those apps/sites ranked so that the output/content of the RIA gets indexed….

Something also to check out – PaperVision3D – a 3D engine for Flash which looks pretty damn good

Advertisements

5 thoughts on “Adobe Flex 3 – What is it and why is it my new side project to join the other side projects?

  1. It’s an interesting point – that would certainly make life easier in some ways… that being said, there are some designers out there who do not appreciate the way that developers have to adapt their design to make it real word; equally some developers are prone to awful implementations of good designs… I think that consideration is more important

  2. Just want to say thanks, great stuff, and ask if you have any update on your opinion of Flex?

    After many years working close to the hardware in the embedded world I find myself not quite ready to retire at 58, looking for some fun/work, and so began investigating Flex. I also started playing around with Linux distro’s and ended up loading Ubuntu on an old clunker I had laying around. Next step is getting the Flex SDK going on Ubuntu and that’s how I ended up at your site.

    Thanks again!

  3. First, thanks for the comment and feedback – glad the post was useful!

    Secondly, yes I do believe Flex is increasingly being recognised within the industry; I have worked on a couple of projects where Flex was the end technology due to the way it integrates, it’s platform capability, how easy it is to implement complex functionality through good looking functionality – usually also reducing time to market. I would actually say if you’re going to learn a language then Flex is a good target – however you will also need to know about support techs such as HTML, Javascript, XML, XSL and webservices.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s