Getting Started with Flex

Advertisements

In this discussion, I will focus on the basics of Flex, a web development framework based on Flash. The first section will be about the whys and wherefores of Flex. The second section will cover the steps involving the development of a Flex-based application. In the third and fourth sections, a real world application using Flex will be developed.

In today's world of interactive and responsive web applications, developers have to choose between Ajax (based on JavaScript and CSS) and Flash. And since Flash is considered a multi-media tool rather than a web UI tool, the majority of developers favor Ajax. However, Ajax has its own set of problems, the most prominent among them being browser compatibility.

The demand for a framework that is flexible as well as interactive and responsive brought forth many frameworks. Most of them were JavaScript-based. However, one of the frameworks is based on Flash. And even though it is based on Flash, its usage does not require knowledge of Flash. It makes use of tags and Action Script. The name of the framework is Flex.

Flex � the whys and wherefores

By definition, the Flex framework is "A collection of technologies released by Adobe Systems for the development and deployment of cross platform, rich Internet applications based on the Adobe Flash platform." The Flex framework is also known as Flex SDK. The keywords in the definition are "cross platform," "rich Internet applications," and "collection of technologies." Let us look at these in detail.

Cross platform: Flex is based on Flash. Therefore, Flex applications will work on all those platforms for which Flash players are available. At present, Flash players are available for Mac, Linux and Windows. Hence, Flex applications will work on all of them.

Rich Internet applications: By definition, "Rich Internet applications (RIA) are web applications that have the features and functionality of traditional desktop applications." In other words, RIA provides a paradigm that breaks away from the request-response-page refresh cycle. In RIA, only the request-response cycle exists. All the UI-based processing is shifted onto the client side. This paradigm is also known as the no-refresh paradigm. Since Flex makes use of Flash extensively, developing RIA using Flex scales down the problems associated with RIA.

Collection of technologies: The Flex framework, or SDK, is made up of different technologies. The UI and layout are defined using MXML, which is based on XML. Interaction implementation (or event handling) is done using ActionScript. ActionScript is the language used in Flash and it is based on ECMAScript, or JavaScript.

The definition provides the attributes of Flex. However, it does not tell us what its components and services are. Therefore, let's have a look at the most common components and services of Flex. The components as well as services provided by Flex can be divided into the following categories:

    * UI components
    * Charting components
    * Web and Utility services

The web and utility services provide web service and data access functionalities. Here are the details:

UI Components: This category contains components that can be used to implement the user interface of web applications. This category can be further divided into containers and controls. The former provide layouts and can contain the latter. Controls include textboxes, combo boxes, etc. All of the controls can be controlled using Action Script.

Charting Components: The charting components of Flex extend the Flex framework to provide charting functionalities, including line, bar, and pie charts. One can add drill down, roll over, and other visual effects so that data can be represented visually and dynamically.

Web and Utility Services: Using Flex, one can access Web services and display the data retrieved from the Web service. Apart from this, Flex also provides APIs to implement drag and drop, animation, effects, form validation, and application state management. These utilities are built into the core of Flex. Hence, to use them, one need not learn any third party APIs.

That brings us to the end of this section. In the next section we will discuss the steps necessary to develop an application in Flex.

Steps

The previous section provided an overview of the components supported by Flex. Now let us have a look at the steps that are required to develop an application using Flex. Typically, there are three steps involved in developing a Flex based application. They are:

   1. Create an MXML file.
   2. Calling server-side components.
   3. Compile the application into a SWF file.

Among these, the first step can be sub-divided into three more steps. Here are the details.

Create an MXML file

As stated in the previous section, MXML is used to define the UI layout and the controls. A MXML file will, generally, contain the following:

    * Containers � Containers are rectangular regions of the screen that contain controls and other containers. There can be more than one container in a MXML file.
    * Controls � Controls are form elements. They include button, labels, etc.

To create a MXML file, the steps are as follows.

Declaring the root container: The root container is the application container. It represents the entire Flash player's drawing surface. If XML terminology is used, the application container can be called the root element of the MXML document. The following statement declares an application container:


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Application>


Declaring layout containers is an optional step. The layout containers provide help in laying out the controls. VBox and HBox are the commonly used containers. VBox is used to lay out the controls vertically and HBox lays out components horizontally. For example, the following statement will lay out the controls horizontally. These containers are also known as constraints-based containers.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox">
</mx:HBox>

</mx:Application>

In the above example, the HBox tag has the attributes x, y, width, and height, which represent the constraints.

Adding the form controls: The form controls are used to either collect data or display the result of a process. More than one control can be added to a container. For example, the following statements add two text areas to the existing container.  

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox">
<mx:TextArea id="myText" text="" width="150"/>

<mx:TextArea id="myText1" text="" width="150"/>

</mx:HBox>

</mx:Application>

Calling server-side components

A Flex application needs to call the server-side components or services to do the processing on the data gathered or the data to be displayed. To do so, one can add a web service or HTTP service. The only condition is that the service should return either a Java object or XML as a response. For example, to access a server-side component that returns an object, one can use the HTTPService tag. The following statement does the same:


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:HTTPService id="httpService"
url="http://localhost/message.php"/>

<mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox">
<mx:TextArea id="myText" text="" width="150"/>

<mx:TextArea id="myText1" text="" width="150"/>

</mx:HBox>

</mx:Application>

There will be more about processing the response in the future.

Compile the Application into a SWF file

To deploy a Flex application, the MXML file needs to be compiled to a SWF file. To compile an MXML file, a tool named mxmlc needs to be used. The following command compiles a MXML file named first.mxml


mxmlc first.mxml


That completes the basic steps for creating a Flex application. Next, let us look at a real world application that follows these steps.


The application that will be discussed in this section is an RSS feed reader. It will perform the following tasks:

    * Make a call to the RSS feed site.
    * Get the item name and description.
    * Display them in a table.

Some of the controls and services being used in this example will give you an overview of the controls that will be discussed in the future. First let us create the user interface. The preliminary step is to declare the primary container (i.e. the application container).


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

</mx:Application>


After the primary container comes the tag that makes a call to the RSS service.


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:HTTPService id="httpRSS"
url="http://apmuses.blogspot.com/feeds/posts/default"
resultFormat="object"/>

</mx:Application>


The HTTPService makes a call to the service present at the site mentioned by the URL attribute and retrieves the response in the format provided as the value for the resultFormat attribute. In this case, it is in object format.

Next comes the secondary container � the panel.


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:HTTPService id="httpRSS"
url="http://apmuses.blogspot.com/feeds/posts/default"
resultFormat="object"/>


<mx:Panel id="reader" title="RSS Reader" width="776" height="100%">

</ mx:Panel>


</mx:Application>


Next is the DataGrid control. It is useful when one needs to display tabular data.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:HTTPService id="httpRSS"
url="http://apmuses.blogspot.com/feeds/posts/default"
resultFormat="object"/>


<mx:Panel id="reader" title="RSS Reader" width="776" height="100%">

<mx:DataGrid id="entries"
dataProvider="{httpRSS.lastResult.rss.channel.item}"
width="100%">

</mx:Panel>


</mx:Application>

The DataGrid has three main properties and dataProvider is the one that links it with the data source. Next comes the column. The column of DataGrid is an array.


<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">

<mx:HTTPService id="httpRSS"
url="http://apmuses.blogspot.com/feeds/posts/default"
resultFormat="object"/>


<mx:Panel id="reader" title="RSS Reader" width="776" height="100%">

<mx:DataGrid id="entries"
dataProvider="{httpRSS.lastResult.rss.channel.item}"
width="100%">

<mx:columns>

 

<mx:Array>

 

<mx:DataGridColumn headerText="Title"
dataField="title"/>

<mx:DataGridColumn headerText="Publish Date"
dataField="pubDate"/>

</mx:Array>

</mx:columns>

</mx:DataGrid>

</mx:Panel>


</mx:Application>


The DataGridColumn has two main attributes. The headerText provides the header of the column and dataField provides the data for the column.

That completes the application. When compiling it, the application will be converted to a flash file and embedded in an HTML file. When loading the HTML file, you will be able to see the RSS feeds from http://apmuses.blogspot.com/feeds/posts/default in a tabular format.

That brings us to the end of this section as well as this discussion. This discussion has just shown you the tip of the iceberg regarding Flex. In a future discussion, each of the components and controls will be explained in detail. Till then�

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.