Pages

May 26, 2008

Flex Overview

Posted by Jeremy Mitchell
Flex is a collection of resources packaged into an SDK (software development kit consisting of the Flex class library (ActionScript classes), the Flex compilers, the debugger, the MXML and ActionScript programming languages, and other utilities) provided by Adobe for use in building expressive and interactive rich internet applications (RIA). By leveraging the Flex SDK and Flex Builder (an Eclipse plugin), developers can create feature-rich, web-based and cross-browser compatible (thanks to Flash Player) applications.

Most applications of any merit consist of client-side functionality and server-side functionality. Traditional web applications utilize Javascript on the client side and a host of scripting languages (ColdFusion, PHP, JSP, .NET, etc) on the server side. Flex applications follow the same model. In fact, the Flex portion of an application (delivered as a SWF file) closely resembles the HTML / Javascript portion of a traditional web application. Flex takes care of the user interface (UI) or the client-side functionality of a web application. Server-side functionality (database interaction, for example) is still dependent on server-side components written in a traditional scripting language (ColdFusion, PHP, JSP, .NET, etc). However, you'll notice that many functions typically handled on the server (i.e. web service consumption) are now handled in the client thanks to Flex.

Web applications that depend too heavily on the server have a negative impact on user experience - specifically applications that require a full-page refresh to interact with the server. As the technology has become available, web applications are shifting a significant amount of work from the server to the client. The result is a highly responsive application providing instant user feedback which results in happier users. Flex-based applications and AJAX-based applications are leading the way.

As developers, one of our goals is to create the files that compose an application. As a whole, these files dictate the layout, structure, style and business logic of an application. In Flex, these files consist primarily of MXML files and ActionScript files (although CSS files play their typical role as stylesheets and Javascript is also available to your Flex app for additional client-side functionality, if necessary).

Best practices suggest the seperation of layout (or structure), style and business logic when developing web-based applications. The same holds true for Flex apps.

A properly-defined Flex app might look like the following*:

- Layout / structure: MXML files and/or ActionScript files
- Style: CSS files
- Client-side business logic: ActionScript files

However, there are exceptions to every rule, and many scenarios justify the use of inline ActionScript inside MXML (layout/structure) files. Similar to the use of inline Javascript inside HTML files, inline ActionScript can be used to provide client-side functionality such as event handling (event handlers) and data binding. However, it is probably best to limit your use of inline ActionScript to simple statements such as method calls or property assignment rather than complex logic. For example:

<mx:Button id="myButton" click="myObject.myFunction()" />
<mx:Button id="myButton" click="currentState='myState'" />
In the first example, a click event dispatched by the myButton instance of the Button class triggers a call to the myFunction method of the myObject instance. In other words, when you click myButton, myFunction is called. The MXML only maps the event to the method. The body of the method may be stored in a separate AS file and, therefore, business logic is successfully separated from layout / structure.

In the second example, a click event dispatched from myButton triggers a simple property assignment (currentState) required to alter the layout / structure using application states. Since this ActionScript statement impacts the layout / structure of the application, one could argue that it's place belongs in the MXML file used to define layout / structure.

When our development is complete, the Flex compiler that ships with Flex Builder generates one or more SWF files based on our MXML files and Actionscript files.

MXML + AS = SWF

Deploying a Flex application involves the delivery of the SWF file(s) plus an HTML wrapper, the CSS file(s) and any server-side script files (i.e. .CFM, .PHP, etc) to the server. Like traditional web applications, these resources are delivered from the server to the client browser using the customary HTTP request / response fashion.

Check out the animated overview of the Flex development life cycle for a nifty visual of the process.

*Don't forget a complete application usually requires server-side functionality (i.e. database interaction) implemented in the form of server-side scripts (ColdFusion, PHP, JSP, .NET, etc.).

1 comment:

Name said...

Good start for Flex beginners