A SIMPLE INTRODUCTION TO FLEX :

What Is Adobe/Macromedia Flex?

As a web developer you've often found yourself wishing there was a way to make web applications that weren't limited to the heavy restrictions of HTML. You've used JavaScript to make your forms a little more intuitive with dynamic/context driven comboboxes, but to do anything more often requires heavy amounts of JavaScript and DHTML. Even if you are a pro at it, it's extremely time consuming to make workflow interactive and user friendly. More importantly, why would you want to be spending so much time on core UI functionality when you're getting paid to work on business logic and workflow.

Adobe/Macromedia Flex takes you to the next level of web application development with the concept of Rich Internet Applications (aka RIAs). You may have seen applications developed natively in Flash itself and realized that it offers a much more robust experience for the user where productivity is bolstered by ease of use, streamlined workflow, and real time interactivity that is impossible to accomplish in HTML itself. However developing rich applications in Flash for those who are core developers is daunting and unintuitive. The Flash development tool is geared for designers, and developing on a timeline is a strange concept. Flex removes that barrier to entry by providing a programmatic way for developing these RIAs.

 In a nutshell, Flex was designed in order to give Flash Developers an edge when developing Rich Internet Applications (RIAs). Although RIAs can be built from within Flash, there are various limitations, especially when it come to a developers time. I’m not going to get into the specifics, but as you become familiar with Flex, you’ll begin to understand why this is.

Rich Internet Applications

What is an RIA anyways? Well HTML applications are state-less. Application servers maintain state by using cookies and session variables to keep track of users, but all the logic is on the server. So while a user is looking at a page in their browser, the application is unable to do anything until the user commits an action that sends data from the page back to the server for processing. The code processes the data, and generates resulting HTML that the browser loads back in.

What makes a up a Flex Application?
A Flex application at it’s very basic level is a Flash .swf file embedded in a generated HTML file. Since Flex outputs it’s data as a .swf, this allows you to utilize everything that Flash Player is famous for; dynamic animations, sound and video handling, and of course, the Flash Drawing API. The HTML that Flex spits out has the necessary JavaScript code in order to detect whether the user has the Flash Player installed, or whether they need to update to the current player.

One of the major reasons why Flex is becoming more and more popular is because it utilizes ActionScript 3.0. In fact, developers we’re creating AS 3.0 applications in Flex even before AS 3.0 was released for Flash Developers. But, since Flash CS3 was released, AS 3.0 has become the new standard, and for me at least, is why developing in Flex has become even more exciting.

How is a Flex Application created?
One important thing to note, is that the Flex environment does not use a Timeline. This does not mean that it is limited. Rather, Flex has been developed more for programmers and less for designers. It ends up meeting somewhere in the middle, which is exactly where I found myself as a Designer/Programmer, whatever. Again, this will become apparent as you begin actually developing in Flex.

You design a Flex Application by selecting pre-defined visual components (i.e. Button, ComboBox, ListBox, DataGrid, etc) that you’re most likely familiar with from Flash. If you’ve never used components before, they’re wonderful. Although some will tell you that you can create far smaller (in size) components by developing them on your own, and while that may actually be true, the pre-defined components work well and are highly customizable – especially the latest set released with Adobe Creative Suite 3.

What's in the Flex Code?

Flex coding involves two different languages MXML and ActionScript respectively.

MXML is an extended form of XMLand is a tag based language, and therefore it is called an XML-based markup language. Program files coded with mxml language possess ‘.mxml’ extensions. MXML used along with ActionScript provide tags to devise GUI (graphical user interface) component and is also used to get access to data on servers. MXML facilitates its users with its data binding services. HTML and MXML both provide tags but the difference is that MXML consists of several new tags like TabNavigators and Accordions and many more that also enable users to get any web service connection. A MXML file is converted into a SWF file that runs on a Flash Player or on a browser which has Adobe Flash Player Plug-in installed in it.

ActionScript a flash language is an implementation of ECMAScript and is similar to OOP based JavaScript. In Adobe Flash Player this is the main programming tool. It consists of built-in objects and functions, and allows its users to build their own objects and functions. With this strong tool one can extend its competency in creating RIAs. Its coding is done inside the tag . We create ActionScript files and call them inside the main MXML file with either ’source’ attribute of tag or with ‘include’ statement inside tag by passing the relative path names of ActionScript files in these attributes. Each and every ActionScript file should be saved with ‘.as’ extension.

Where can I get Flex?

 Download the latest Flex Builder 3:
http://www.adobe.com/products/flex/

The Adobe Flex Developers Center:
http://www.adobe.com/devnet/flex/

The Official Adobe Flex Overview:
http://learn.adobe.com/wiki/display/Flex/Animated+overview