by Amila Chathuranga Mendis

So far I explained to you about the Rich Internet Applications where we can experience the desktops application experience in the browser. There are several technologies that can be used to develop Rich Internet Applications. But here I like to give you some basic knowledge about the Flex.

Flex takes you to the next level of web application development with the concept of Rich Internet Applications based on the flash platform. MXML, an XML-based markup language, offers a way to build and lay out graphic user interfaces. Interactivity is achieved through the use of Action Script, the core language of Flash Player. With the latest version of the Flex, the action script 3.0 is used, which comes with the object oriented concepts.

Developing Flex Applications

Adobe has developed an IDE for flex developments called “Flex Builder” which is developed on Eclipse. You can download a trial version of the Flex Builder by clicking here. When you open the flex Builder You will see an interface as follows.  

Figure 01: Flex Builder Interface

Since it has been developed on Eclipse, it has got the all the features that should be in a good IDE.

Developing the first Flex Application

Let’s start to develop our first flex application using Flex Builder. Before that we have to create a new project. When you navigate to “file > new“ in there you can find what kind of new component you want to create. Let’s get a new project. When you select a new project you get a window as follows.

Figure 02: Creating a new project

You have to give a name to your project and there is an option to select the application type for now let’s selects web application. And you have an option to select the application server type. Because flex can interact with server side application developed by using ASP.net, JEE, PHP or other server side scripting language. By default application server type is none. For now let’s keep it none because we don’t interact with an application sever here. After you creating a new project you can design the user interface. Drag and drop feature is available with the IDE.

Let’s start to develop out hello world application. The application may be as follows.

Figure 03:  Hello world Application

Now let’s look at the code of the application.

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

 <mx:Panel title="My Application"

 paddingTop="10"

paddingBottom="10"

 paddingLeft="10"

 paddingRight="10" >

<mx:Label text="Hello World!" fontWeight="bold" fontSize="24"/>

</mx:Panel>

 </mx:Application>

As you can see the Flex uses the XML based mark up language for designing the user interface. Every thing is packed between the Application tags. Now let’s try to develop some interactive Flex application. The Application is as follows.

As we can see that is the interaction that we expect from a Rich Internet Application. With the next article I’ll bring you more details on developing an interactive application using the Flex Builder.