Introduction to Flex - for PHP Developers

I’ve been working with web related technologies since the late ‘90s, and my first server side technology was PHP. Later on, I did ColdFusion and Java development, but I always considered myself a PHP developer. When AJAX came along, I started working with frameworks like Prototype and script.aculo.us, and I began building my own frameworks.

At the end of 2006, I had my first taste of Flex development. It was kind of a crash course, because I had about 4-6 weeks to create a demo application for the upcoming version of FDS (Flex Data Services, now called LiveCycle Data Services). Although I was new to Flex and FDS, the project went well, and I really enjoyed the development and learning process.

However, enjoyable as it was, it was different. I mean that when I did ColdFusion or Java web development, it didn’t feel different compared to PHP; it was more a question of finding the right APIs and getting acclimated with the specifics of the language. Later on, when I started doing AJAX on top of DHTML, it wasn’t that different either. You still create most of the website using the same techniques with the help of a server-side language, and you just throw in some spices here and there (in this case, some AJAX widgets).

When I did my first web project using Flex, boy oh boy, it was quite a switch! The clean separation between the client and the server, (the business logic on the client side in addition to business logic on the server side), client-side technology that is compiled instead of interpreted, two languages on the client, all these required a different mind-set from traditional web development.

And this is my reason for writing this article. I want to share with you some of the things that are specific to Flex in relation to PHP. At the same time I want to introduce Flex by comparing it with PHP whenever this comparison makes sense. Thus this article is for:

• PHP developers that want to learn more about Flex and Action Script 3 than a simple definition can provide
• PHP developers that have already made their first attempt at coding a Flex application and want a broader, deeper understanding

What is not in this article? It is not my intent to convert you, or to convince you that Flex is better than X or Y. I strongly believe that there are different types of projects and that they can and should be done with different tools. And when performance, maximizing return on investment, and usability are top priorities there is no such thing as a universal tool.

At the same time, this article does not completely document Flex or ActionScript 3. There are dozens of books out there that cover this subject in hundreds of pages. There are thousands of articles on Flex. My intent is to give you enough information on the most important topics, and, whenever it makes sense to relate the concepts to similar concepts from PHP. In order to keep the article useful I structured it and tried not to go into too much details. At the end of this article, I provide a brief introduction to Adobe AIR and some additional resources if you want additional details on this topic.

Finally, I chose to use Flex 3 for most of the examples. There are a couple of reasons for making this choice. First, at the time of writing this article, Flex 4 is still in beta. Second, Flex 4 is mainly an evolution of Flex 3 thus most things I cover here can be applied to Flex 4 with minimum changes, if any. In some cases, I’ll point out these differences. Regarding PHP, I chose to use PHP 5.3 as a reference. Having said that, let’s see the table of contents and then, let’s dig in!

What is Flex?

The simplest answer is: Flex is just another way of creating a Flash application. A Flex application gets compiled into a SWF file, which is played inside of the browser by Flash Player. Why did we need another way of creating Flash applications? Traditionally Flash applications were created using the Flash authoring tool. If you take a look at this tool, you’ll notice that it is oriented primarily for designers. There is a stage, a timeline, drawing tools, and so on.

When you are developing applications and you care about productivity, you want components, you want to be able to streamline development as much as possible by reusing code, and not last but not least, you want a modern IDE.

Thus a revised answer could be: Flex is an open source framework that helps developers to quickly create Rich Internet Applications that run inside Flash Player. The framework was shaped pretty much as it is today in 2006 with the arrival of Flex 2, Flash Player 9, and ActionScript 3. The current version is Flex 3, and early in 2010 the next version, Flex 4, will be out.

 

Flex: two languages, one framework to bind them

Under the umbrella of Flex, you’ll actually find the following:

• Two languages: MXML and ActionScript 3. Flex offers two languages to lay down a Flex application. In the next chapters, I will go deep into each language.
• A rich library of components
• Compilers and debugger
• Command-line tools for compiling and debugging a Flex application

Since Flex is an open source framework, I encourage you to go to the project home page at http://opensource.adobe.com/flex and download the SDK. You can see the source code of all the components from the library, you can check the open bugs and features database (http://bugs.adobe.com/flex), and you can see the wiki pages for the specifications.

Part of the productivity boost provided by Flex is due to the extensive components library. There are all the UI components you might think of (input boxes, panels, windows, sliders, data grids, combo boxes, accordions, tab sets, …). There are layout containers and form elements. Below, you can see a screenshot of the available UI components from Flex 3 (click to enlarge).

 

And if these are not enough, because you are able to access the source code, you can extend these to build your own components or you can create new components from scratch.

Attachment	Size
flex_php_0_thumb.png	7.68 KB
flex_php_1_thumb.png	39.28 KB
flex_php_2_thumb.png	14.72 KB
flex_php_3_thumb.png	15.37 KB
flex_php_4_thumb.png	6.57 KB
flex_php_5_thumb.png	24.07 KB
flex_php_10_thumb.png	12.97 KB
flex_php_11_thumb.png	24.55 KB
flex_php_12_thumb.png	20.03 KB
flex_php_6_thumb.png	38.54 KB
flex_php_7_thumb.png	35.8 KB
flex_php_8_thumb.png	84.57 KB
flex_php_9_thumb.png	19.63 KB