Home arrow Web Services arrow Page 2 - Getting Started with Flex
WEB SERVICES

Getting Started with Flex


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.

Author Info:
By: A.P.Rajshekhar
Rating: 3 stars3 stars3 stars3 stars3 stars / 5
June 10, 2008
TABLE OF CONTENTS:
  1. · Getting Started with Flex
  2. · Developing a Flex Application
  3. · Flex in the Real World
  4. · DataGrid

print this article
SEARCH DEVARTICLES

Getting Started with Flex - Developing a Flex Application
(Page 2 of 4 )

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.


blog comments powered by Disqus
WEB SERVICES ARTICLES

- Dealing with Loose Coupling in a Service-Ori...
- Loose Coupling in a Service-Oriented Archite...
- Safety, Idempotence, and the Resource-Orient...
- The Resource-Oriented Architecture in Action
- Features of the Resource-Oriented Architectu...
- The Resource-Oriented Architecture
- Getting Started with Flex
- Automated Billing and Faxing for the Web
- An Introduction to Web Services
- The Foundations of Web Services: From Novice...
- Web Services Reengineering: Finishing Touches
- Fault Handling with Web Services
- Flow and Web Services
- Process Lifecycles and Web Services
- Business Processes and Web Services

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials