Flex 4.x – Overview

Type of technology

Flex is a highly productive, free open source framework available for building and maintaining web applications which deploy consistently on major browsers, desktops and operating systems.

also read:

• Adobe Flex Tutorials
• Java FX Tutorials
• Charting with Flex 4.0
• New Features in Flex 4.0

Look and Feel

Drag and Drop

The support for drag and drop can be added for all Flex components. Flex includes built-in support for drag-and-drop operation for some controls such as List, Tree and DataGrid, This automates processing required to support drag and drop operation. Drag-and-drop operation has 3 main stages: initiation, dragging, and dropping. A drag-and-drop operation will either copy or move data from drag initiator to drop target. On successful drop, Flex adds the data to drop target and, optionally, deletes it in case of a move from the drag initiator.

Type of Technology

Adobe Flex is a collection of technologies based on Adobe Flash platform. Currently Adobe Flex applications are build using Flex 3 SDK. Other technologies used with it are Livecycle Data Services (J2EE application integration). Flex applications are viewed on Adobe Flash Player.

Application architecture

Most of the web applications are usually build in MVC architecture in the case of a Flex RIA. The Controller can take form of the Service (or business object) on the application server which reads and updates a Database (the Model).When it receives the requests from the Flex application and itself, represents the Database records to the user.

Environment

For render response in terms of web pages, it requires a browser having Adobe Flash plugin installed on the client machine. For deployment purpose Flex 3 SDK is required on the server machine.

Tools Availability

Flash Builder 4 is the IDE for developing a Flex application. It has end to end support for building a Flex application, component etc. It has all the components given in palettes to that the designing of front end becomes very easy. However, flex application can be written in any text based tool and executed on machine having Flex 3 SDK.

Community Support

Since Flex is a very popular framework for developing RIAs, a huge community support is available. One very popular among them is CFLEX (Community Adobe Flex). This community is dedicated to Adobe Flex.

Frameworks supported

In Flex you have several options to choose for back-end server software (ranging from JEE to Dotnet etc). Few examples are –

• Flex with Struts:

With Flex, you can provide a rich front end to your Struts applications. There are two approaches for integrating Flex with Struts application which are based on 2 different ways a Flex application communicates with remote systems i.e. By using the traditional HTTP request/response mechanism or by using SOAP to invoke methods on remote services. Basically Flex can be taken as part of the View in a distributed MVC framework.

• Flex with Spring:

This integration is done with the help of Flex Data services i.e. BlazeDS. The BlazeDS adds Remoting Service, Message Service, and Proxy Service to the Flex application. Using Remoting Service a Flex application directly invokes methods of Java objects deployed in the application server. Spring beans are Java objects and so can be accessed using the remoting service of BlazeDS. BlazeDS supports the concept of a factory to configure the Spring container for instantiating Spring beans. The role of the factory is simply to provide ready to use instances of components for BlazeDS (instead of letting BlazeDS instantiate these components).

• Flex with Ruby on Rails:

Using this we can do more with very less code. Using Flex we can create the user interface for displaying data. Then we can design this user interface using Flex components for nice look and feel. Then setup the corresponding rails application. Flex can then talk to rails by using the HTTPService to call the different methods in your Rails application.

Animation/ Multimedia support

Flex is developed by Adobe Systems and so is closely related to Flash. Both Flash and Flex Work using ActionScript 3.0, both outputs a SWF format, and both of them use Flash Player to display their content. But Flash is good in animation and Flex by contrast is best at the developing applications and things that are associated with it—charting, handling data, and such. So, Flex can focuses on animations such as transitions that place as menus expand, or items such as image scaling to different sizes and in different states. To add more animation capability we can integrate Flash and Flex in three ways: By using Flash for creating skins and component animations, by adding complex timeline animations, and by adding in Flash multimedia clips that can be controlled in Flex.

Ease of testing

Flex Builder comes with debugging tools which helps in unit testing of a Flex application. Breakpoints can be set both in ActionScript as well as in MXML code that allow application execution to pause at a specified code location. Flex 3 comes with an option of profiling the application. The profiler helps in identifying the performance bottlenecks and memory leaks in the application. It tells about Call frequency, Method duration, Call stacks, Number of instances, Object size and Garbage collection. Apart from these many external tools are available for testing flex application like FlexMonkey, FunFx, QuickTestProfessional etc

Flexibility and Scalability

Flex application is backend agnostic and can work with any kind of backend server till it sends and receive data in the format/protocol supported by Flex. Scalability of Flex application basically depends upon the underlying application server. The Flex application scales upto the level of support provided by the application server.

Browsers dependence

Flex is doesn’t directly depend on the type of browser but is dependent on the Flash Player web browser plug-in. But as per the statistics 98% of browsers available currently have Flash Player plug-in with version 7-9 installed. So, a Flex-generated code works on each client regardless of browser/platform. So, flex has a limitation in this respect that they are limited by the constraints of Flash Player and cannot display anything outside the boundaries of the player’s space embedded in the web page.

Network performance

The Flex client-side processing model and configuration ability helps in improving the network performance. For example, the network bandwidth and connections can be improved by embedding the product images within the SWF file. The SWF file would increase to 60K (or, a total size of 260K), but the application would require 15 fewer network connections to the server. A second potential improvement is to disable the Flex history management feature if it is not required; this prevents the Flex application from transmitting the history management HTML page, thereby reducing network overhead. (Source: Macromedia White Paper, Flex Performance Brief: A Comparison of Flex and Java Server Pages Applications May 2004)

Client Performance

Flex offers the ability to create Rich Internet Applications (RIAs). Misusing this power can result in areas of poor performance. Flex is like any other programming model because certain coding practices can be detrimental to the overall performance of the client. So, depending upon the coding techniques follow are affected at client side:

• Startup time
• Playing complex effects smoothly
• Performance of charting components
• Streaming of multimedia content

Client Validation Support

As we know, Flex is best used for good user interface. The data that user enters in user interface control might or might not be appropriate for our application. Adobe Flex applications, uses a validator to ensure that values in the fields of the form meet certain criteria.

Flex includes some set of validators for common types of user input datas, such as zip code, phone numbers, and credit card numbers etc. Validators are created in MXML by using a validator tag such asor. Validators uses following 2 properties to specify the item which needs to be validated:

• source: This specifies the object which contains the property to be validated .We can set this for an instance of a component or to a data model. You can use data binding syntax in MXML for specifying the value for the source property.
• property: A String that specifies the name of the source property that contains value to validate. This property support dot-delimited Strings for specifying nested properties.