Posts Tagged ‘ Flex ’

Flex & PHP – Transmitting data using JSON

In almost every RIA data needs to be transmitted from a server to the client. Now there are many ways to accomplish this task—web services, HTTP requests, remote objects, etc. But one sticks out as a simplistic and useful solution to this problem, this is using HTTP requests. Using a simple HTTP request, you can send data to a server and receive data back from the server.

Adobe Flex makes implementing this solution an easy task. The solution explained in this tutorial uses PHP for the server-side programming and sends the data using JSON (JavaScript Object Notation) encoding. By the end of the tutorial you will be sending simple objects along with arrays of objects from your PHP code to your Flex client.

Requirements

Flex Builder 2 (or Flex 2 SDK)

PHP (version 5.2 or higher, installed on a local web server)

Adobe Flex corelib

Sample files:

This sample file contains the following:

  • Flex Builder project with source
  • PHP source code
  • corelib.swc

Prerequisite knowledge

To benefit most from this tutorial, it is best if you have:

  • Built simple Flex applications before
  • A basic understanding of PHP
  • A basic knowledge of JSON

Setting up the development environment

This is actually a lot easier than it sounds because PHP and Flex both have functions to handle JSON data transmissions. For Flex, the one thing you need to make sure is that you have the corelib from Adobe in order to use the JSON functions—you can download it from Adobe Flex corelib. You can add this to a project in Flex Builder by going into the properties of a project then to “Flex Build Path” and adding the .swc to the library path. For PHP, if you have a version greater than 5.2, you are all set. If not, you can either upgrade, or install the php-json extension.

At this point you can also open up the provided ZIP file and you will find a couple of items. The first is the Flex source code that was used to create the application. You will also find the corelib library that is used in this project under the lib folder. You can proceed in multiple ways from here: create a new Flex Project in Flex Builder and then add the source and lib directory or use the SDK binaries to compile the application. Once it is built, it can be run and this will get data from a PHP file on the Paranoid Ferret server. I will go over the source code for both the PHP and Flex in depth later on in the tutorial.

Getting the PHP code ready

The first thing we are going to go over is the PHP code (json_tutorial.php), which you can find in the sample ZIP file. The PHP code creates a few classes for the objects that we will pass to our Flex application. We also have code to check if a GET variable has been set. We use this to tell the PHP code what we are requesting. If the variable getPerson is set, we create a person and echo it (after we encode it into JSON using json_encode) to send it to the Flex application. Ideally your data would be stored in a database, but for simplicity, we’re just creating Person objects directly in the PHP code.

The following is all the PHP code we are going to use and should meet our needs:

<?php
    
    class Person
    {
        public $first_name;
        public $last_name;
        public $email;
        public $address;
    }
    
    class Manager extends Person
    {
        public $title;
        public $employees;
    }
    
    if(isset($_GET['getPerson']))
    {
        $p = new Person();
        $p->first_name = 'John';
        $p->last_name = 'Doe';
        $p->email = 'fake@email.com';
        $p->address = '5555 Some Street City, State 52423';
        echo json_encode($p);
    }
    
    if(isset($_GET['getManager']))
    {
        $p1 = new Person();
        $p1->first_name = 'Joe';
        $p1->last_name = 'Doe';
        $p1->email = 'joe.doe@email.com';
        $p1->address = '5424 Some Street City, State 12314';
        $p2 = new Person();
        $p2->first_name = 'Bob';
        $p2->last_name = 'Doe';
        $p2->email = 'bob.doe@email.com';
        $p2->address = '1414 Some Street City, State 12412';
        $p3 = new Person();
        $p3->first_name = 'Kevin';
        $p3->last_name = 'Doe';
        $p3->email = 'kevin.doe@email.com';
        $p3->address = '6123 Some Street City, State 41241'; 
      
        $m = new Manager();
        $m->first_name = 'Manager';
        $m->last_name = 'Doe';
        $m->email = 'manager.doe@email.com';
        $m->address = '5534 Some Other Street City, State 91230';
        $m->title = 'Office Manager';
        $m->employees = array($p1, $p2, $p3);
        echo json_encode($m);
        
    }
    ?>

Creating the Flex user interface

The next thing to do is to set up the basic application for Flex. All the code from here on is found in the JSONTutorial.mxml file in the Flex Builder Project included in the sample ZIP file. The following code is the simplest Flex application. This sets up an application with specified height and width and also adds the view source option to the movie, with the source file specified by viewSourceURL. The URL can be any path that points to the correct file to display the source code:

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="410" 
    viewSourceURL="../files/JSONTutorial.mxml">
    </mx:Application>

The next thing you do is to set up the user interface. This is pretty standard Flex mxml. Nothing should look out of place. The user interface has a couple of text fields for the data we get back from the PHP code, a datagrid, and two buttons. This is all set up on a panel. The one important thing to observe is the dataField properties on the DataGridColumns. These names correspond to the variables from the objects in the PHP code.

The following code goes inside the Application block:

<mx:Panel x="0" y="0" width="500" height="410" layout="absolute" title="Simple JSON Example">
        <mx:DataGrid x="10" y="174" width="460" enabled="true" editable="false" id="dgEmployees">
            <mx:columns>
                <mx:DataGridColumn headerText="First Name" dataField="first_name"/>
                <mx:DataGridColumn headerText="Last Name" dataField="last_name"/>
                <mx:DataGridColumn headerText="Email" dataField="email"/>
                <mx:DataGridColumn headerText="Address" dataField="address"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:Button x="116" y="338" label="Get Employee" id="getPerson" />
        <mx:Button x="266" y="338" label="Get Manager" id="getManager" />
        <mx:Label x="131" y="12" text="Name"/>
        <mx:TextInput x="189" y="10" id="txtName" editable="false"/>
        <mx:Label x="131" y="42" text="E-mail"/>
        <mx:TextInput x="189" y="40" id="txtEmail" editable="false"/>
        <mx:Label x="131" y="68" text="Address"/>
        <mx:TextInput x="189" y="66" id="txtAddress" editable="false"/>
        <mx:Label x="131" y="94" text="Title"/>
        <mx:TextInput x="189" y="92" id="txtTitle" editable="false"/>
        <mx:Label x="131" y="122" text="Has Employees"/>
        <mx:TextInput x="229" y="120" width="120" editable="false" id="txtEmployees" text="No"/>
        <mx:Label x="10" y="148" text="Employees:"/>
    </mx:Panel>

Using HTTPService to ask PHP for data

Now that the user interface is set up and ready to go you can add the HTTP services to go ask for the data from the PHP code. In Flex you can set up all kinds of different services. Today you are just going to set up a simple HTTP request service that sets a GET variable and tells the services a function should be ran once the results are back. As you can see in the code below, both services are sending out to the same PHP page, which is the one that was made earlier. Also each one sets one GET variable, which is done inside the mx:request block. Lastly, the result is an event which we hook to, to process the results of the request (our JSON data). This code goes at the very beginning of the file right after the Application opening element:

<mx:HTTPService id="personRequest" 
        url="../files/json_tutorial.php" 
        useProxy="false" method="GET" resultFormat="text" 
        result="personJSON(event)">
        <mx:request xmlns="">
            <getPerson>true</getPerson>
        </mx:request>
    </mx:HTTPService>
    <mx:HTTPService id="managerRequest" 
        url="../files/json_tutorial.php" 
        useProxy="false" method="GET" resultFormat="text" 
        result="managerJSON(event)">
        <mx:request xmlns="">
            <getManager>true</getManager>
        </mx:request>
</mx:HTTPService>

Decoding the JSON data

Now you can get into the actual JSON decoding, which is really simple. At this point if you’re using Flex Builder you will be getting an error message about an undefined method for personJSON(event) and managerJSON(event). This is going to be solved right now. First things first—put in the appropriate method signatures so the application can build and run. You do this by inputting a script tag and adding the ActionScript functions inside of it. You’ll notice the added import statements, in the code, to import our JSON serialization functions and use the result event. This code will go right above the HTTP services we just set up and below the Application opening element:

<mx:Script>
        <![CDATA[
        import mx.rpc.events.ResultEvent;
        import com.adobe.serialization.json.JSON;
        
        private function personJSON(event:ResultEvent):void
        {
        }
        
        private function managerJSON(event:ResultEvent):void
        {
        }
        ]]>
</mx:Script>

Now down to the actual work of the application, the first thing that needs to be done in both of the functions is to get the result back and store it as a string. The next thing to do is to call the function JSON.decode on the string. This function will return us an object with all the same properties of the one sent by PHP—we set this equal to a variable. This can now be used as a normal object and to reference the properties using the . (dot) notation. To get the first name of the person you can simply use variable.first_name and so on for the rest of the variables. This takes care of getting a person from PHP. And the above code is changed like so:

<mx:Script>
        <![CDATA[
        import mx.rpc.events.ResultEvent;
        import com.adobe.serialization.json.JSON;
        
        private function personJSON(event:ResultEvent):void
        {
            //get the raw JSON data and cast to String
            var rawData:String = String(event.result);
            var person:Object = JSON.decode(rawData);
            txtName.text = person.first_name + " " + person.last_name;
            txtEmail.text = person.email;
            txtAddress.text = person.address;
            txtEmployees.text = "No";
            txtTitle.text = "No Title";
        }
        
        private function managerJSON(event:ResultEvent):void
        {
            //get the raw JSON data and cast to String
            var rawData:String = String(event.result);
            var manager:Object = JSON.decode(rawData);
            txtName.text = manager.first_name + " " + 
                     
            manager.last_name;
            txtEmail.text = manager.email;
            txtAddress.text = manager.address;
            txtEmployees.text = "Yes";
            txtTitle.text = manager.title;
        }
        ]]>
</mx:Script>

Hooking data to datagrid

All that is left is to worry about the datagrid you created, and you might have noticed that employees of the manager haven’t been dealt with yet. This is handled pretty nicely in the manager function. You are going to add a new var called employees and this will be an array. Because of the JSON.decode function, you can simply cast the employees as an array and all will be fine.

The next thing to do is actually creating an ArrayCollection to use for the data provider for the datagrid. This is a best practice when using array data for the provider because the ArrayCollection allows for some extra functionality. The final setup is to set the dataGrid.dataProvider equal to the ArrayCollection. You also set the dataProvider equal to null in the person function to clear out the data in the datagrid. To make all this work you need to add another import statement for ArrayCollection. This leaves you with the following code:

<mx:Script>
        <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.rpc.events.ResultEvent;
        import com.adobe.serialization.json.JSON;
        
        private function personJSON(event:ResultEvent):void
        {
            //get the raw JSON data and cast to String
            var rawData:String = String(event.result);
            var person:Object = JSON.decode(rawData);
            txtName.text = person.first_name + " "  + person.last_name;
            txtEmail.text = person.email;
            txtAddress.text = person.address;
            txtEmployees.text = "No";
            txtTitle.text = "No Title";
            
            //Data Grid Code
            dgEmployees.dataProvider = null;
        }
        
        private function managerJSON(event:ResultEvent):void
        {
            //get the raw JSON data and cast to String
            var rawData:String = String(event.result);
            var manager:Object = JSON.decode(rawData);
            txtName.text = manager.first_name + " " + manager.last_name;
            txtEmail.text = manager.email;
            txtAddress.text = manager.address;
            txtEmployees.text = "Yes";
            txtTitle.text = manager.title;
            
            //Data Grid Code
            var employees:Array = manager.employees as Array;
            var employeesCollection:ArrayCollection = new ArrayCollection(employees); 
            dgEmployees.dataProvider = employeesCollection;
        }
        ]]>
    </mx:Script>

Now you might have tried it at this point and said, “Hey, this isn’t working!”. That is true. This is because you never hooked the buttons up to send the requests. This is really simple. You just add click events for both buttons and the corresponding service.send() commands to the click events. The following code replaces the old buttons:

<mx:Button x="116" y="338" label="Get Employee" id="getPerson" click="personRequest.send();"/>
<mx:Button x="266" y="338" label="Get Manager" id="getManager" click="managerRequest.send();"/>

Finally this puts the whole thing together and we end up with the following code for our Flex application:

<?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="500" height="410" 
    viewSourceURL="../files/JSONTutorial.mxml">
    <mx:Script>
    <![CDATA[
    import mx.collections.ArrayCollection;
    import mx.rpc.events.ResultEvent;
    import com.adobe.serialization.json.JSON;
    
    private function personJSON(event:ResultEvent):void
    {
        //get the raw JSON data and cast to String
        var rawData:String = String(event.result);
        var person:Object = JSON.decode(rawData);
        txtName.text = person.first_name + " " + person.last_name;
        txtEmail.text = person.email;
        txtAddress.text = person.address;
        txtEmployees.text = "No";
        txtTitle.text = "No Title";
        
        //Data Grid Code
        dgEmployees.dataProvider = null;
    }
    
    private function managerJSON(event:ResultEvent):void
    {
        //get the raw JSON data and cast to String
        var rawData:String = String(event.result);
        var manager:Object = JSON.decode(rawData);
        txtName.text = manager.first_name + " " + manager.last_name;
        txtEmail.text = manager.email;
        txtAddress.text = manager.address;
        txtEmployees.text = "Yes";
        txtTitle.text = manager.title;
        
        //Data Grid Code
        var employees:Array = manager.employees as Array;
        var employeesCollection:ArrayCollection = new ArrayCollection(employees); 
        dgEmployees.dataProvider = employeesCollection;
    }
    ]]>
</mx:Script>
    <mx:HTTPService id="personRequest" url="../files/json_tutorial.php" 
        useProxy="false" method="GET" resultFormat="text" 
        result="personJSON(event)">
        <mx:request xmlns="">
            <getPerson>"true"</getPerson>
        </mx:request>
    </mx:HTTPService>
    <mx:HTTPService id="managerRequest" 
        url="../files/json_tutorial.php" 
        useProxy="false" method="GET" resultFormat="text" 
        result="managerJSON(event)">
        <mx:request xmlns="">
            <getManager>"true"</getManager>
        </mx:request>
    </mx:HTTPService>
    <mx:Panel x="0" y="0" width="500" height="410" layout="absolute" title="Simple JSON Example">
        <mx:DataGrid x="10" y="174" width="460" enabled="true" 
        editable="false" id="dgEmployees">
            <mx:columns>
                <mx:DataGridColumn headerText="First Name" dataField="first_name"/>
                <mx:DataGridColumn headerText="Last Name" dataField="last_name"/>
                <mx:DataGridColumn headerText="Email" dataField="email"/>
                <mx:DataGridColumn headerText="Address" dataField="address"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:Button x="116" y="338" label="Get Employee" id="getPerson" click="personRequest.send();"/>
        <mx:Button x="266" y="338" label="Get Manager" id="getManager" click="managerRequest.send();"/>
        <mx:Label x="131" y="12" text="Name"/>
        <mx:TextInput x="189" y="10" id="txtName" editable="false"/>
        <mx:Label x="131" y="42" text="E-mail"/>
        <mx:TextInput x="189" y="40" id="txtEmail" editable="false"/>
        <mx:Label x="131" y="68" text="Address"/>
        <mx:TextInput x="189" y="66" id="txtAddress" editable="false"/>
        <mx:Label x="131" y="94" text="Title"/>
        <mx:TextInput x="189" y="92" id="txtTitle" editable="false"/>
        <mx:Label x="131" y="122" text="Has Employees"/>
        <mx:TextInput x="229" y="120" width="120" editable="false" id="txtEmployees" text="No"/>
        <mx:Label x="10" y="148" text="Employees:"/>
    </mx:Panel>
    </mx:Application>

You now have a small application that will get data from PHP using JSON.

Where to go from here

After learning the basics of sending data from PHP to Flex using JSON, you might still have some yearning for learning. (Oh, that is cheesy!) If you are still looking for more information on transmitting data between Flex and PHP I recommend you to go to http://blog.paranoidferret.com and check out some of the other Flex and PHP tutorials out there.

If you want to explore other possible solutions to transmitting data, check the tutorial Using Flex 2 and AMFPHP by Mike Potter in the Flex Developer Center.

Lastly if you found some of this to go over your head, check out the other tutorial by Mike Potter on Flex 2 and PHP basics, Integrating Flex 2 and PHP.

Bookmark and Share

Running the Flex/PHP code (XAMPP, MAMP)

The sample files contain a Flex Builder 3 archive project that includes all of the examples discussed in this article. You can import this project directly into Flex Builder or Eclipse (after installing the Flex Builder plug-in) by selecting File > Import > Flex Project and navigating to the file.

Open the project “src” directory to see the MXML files. Each of these MXML files, which are also called applications, can be run in a web browser. Right-click the file in the Flex Navigator (or the Package Explorer in Eclipse) and choose the option to “Run Application”. MXML files differ from HTML files in that MXML files are compiled into a SWF file, which is then run from within an HTML page referencing the SWF file.

Flex Builder 3 automatically compiles the MXML code into a SWF file every time you save the file or the first time you choose “Run Application” from the Flex Builder menu. When you run the application, Flex Builder also automatically opens the application in the default browser on your system.

To specify the default application, right-click a file name and select the option to “Set as Default Application” from the context menu. The blue dot signifies the default application to run.

Note: The Flex Builder 3 project contains a folder of PHP files, which must be deployed to a PHP web application server (see the following instructions) in order to run the examples. Once the server is setup, described below, Flex Builder copies this folder to the web server when the project is built.

Deploying Flex examples on your local workstation web server

Follow the steps below to publish the PHP files to your local web server so that you can view them:

  1. If you do not already have a PHP-enabled web server installed, install XAMPP (for Windows) or MAMP (for Macintosh OS X).
  2. After installing the appropriate software linked above, start your local web server.
  3. In Flex Builder 3, choose Project > Properties. The Flex Builder 3 Project Properties window appears.
  4. Select the Flex Build Path tab. In the output folder, choose a directory on your localhost web server.
    1. On Windows, the path is:
      C:\XAMPP\xampp\htdocs or C:\XAMPP\xampp\htdocs\myproject
    2. On Mac, the path is:
      /Applications/MAMP/htdocs or /Applications/MAMP/projects/test
  5. In the Output folder URL field, enter the URL to the output folder.
    1. On Windows, enter: http://localhost/ or http://localhost/myproject
    2. On Mac, enter: http://localhost:8888 or http://localhost:8888/projects/test

After setting up the local web server, you can test your projects in Flex Builder and they will launch in the browser and run from the server (http://localhost) rather than the local file system (file://path/to/project/bin-debug/myproject.html).

 

 

Flex Widget Layout Framework Specification

Scope
Overview
This component provides a Flex control that manages individual widgets in a grid. The user can drag and drop widgets to reorganize them, as well as close individual widgets, minimize and maximize them, and add widgets to the grid. Each time the layout is updated, the changes are persisted using the Flex Widget Layout Service component. The layout is initially retrieved using that component as well.

The WidgetLayoutControl and WidgetContainer both must be designed using the Flex Code Behind pattern outlined here:

http://www.adobe.com/devnet/flex/quickstart/building_components_using_code_behind/
A prototype showing how the widget layout framework must work is also provided. The functionality for rearranging widgets and minimizing and maximizing must match this prototype. In addition, a sample widget framework can be seen here, with detailed source code:

http://www.adobe.com/devnet/flex/samples/dashboard/dashboard.html

Logic Requirements
Interfaces
All classes and interfaces on the Widget Layout Framework class diagram, in the architecture TCUML provided, are required as part of this component.
WidgetLayoutControl
This control will house the tabs that make up the main part of the widget layout framework, allowing the user to switch between different sets of widgets, with each set in a different tab. This class contains a reference to the WidgetLayoutManager that manages its internals. In the creationCompleteHandler method, it should call “manager.layoutControl=this;” to register the manager properly to control the
widget layout.
WidgetContainer
The WidgetLayoutControl tabs will be filled with WidgetContainer instances. Each WidgetContainer renders a header and footer, with buttons for maximize and close, and will also contain buttons for showing help, and configuration in the future. The WidgetContainer instances each contain an IWidget implementation, from the Flex Widget Base Services component, which represents the internal portion of the widget.
The WidgetContainer will raise WidgetStateChangeEvents when it is dragged, closed, maximized, or restored. The actions should be defined to be unique (“dragStart”, “dragStop”, “minimize”) so they can be processed in WidgetLayoutManager properly. These events will be caught by the WidgetLayoutManager and processed accordingly. In addition, when these events are raised, the methods in IWidget that match the event must also be called. For instance, when the WidgetContainer is closed, the internal
IWidget.close() method must also be called. This class also has a handleWidgetUpdate” method. This method is a callback method for events raised from IWidget instances when their internal state changes. This way the state of the layout will be updated
even if no reorganization is made. This is important, as the widget internals may provide configuration that must be saved when updated. This “handleWidgetUpdate” method should just dispatch the updated event

WidgetLayoutManager
The WidgetLayoutManager performs the actual rearranging and processing of the component. This class contains functionality to reorder widgets, maximize them, restore them to normal size, and close widgets. When a WidgetContainer is moved or a button is pressed, it will raise events that are then processed by the WidgetLayoutManager class. The layout should be managed as shown in the provided prototype. The Adobe sample in the overview has a good example of how the layout can be managed by an external manager class.
WidgetLayoutManager constructor
When the WidgetLayoutManager is initially created, it is given an IWidgetRepository implementation instance, and a layoutService instance. repository should default to “new WidgetRepositoryService()”, and layoutService should default to “new WidgetLayoutService()”. The layout for the current user will be retrieved using the WidgetLayoutService, with the handleLayoutRetrieved method used as the service callback. When the result is retrieved, the layout member variable will be set accordingly.
WidgetLayoutManager initialization
In the setter for the layoutControl property, the “control” member variable will be set to the parameter given, and then “updateLayout” should be called. In “updateLayout”, the widget layout contained in the layout member variable should be applied:
Clear the tabs and contents of the WidgetLayoutControl For each WidgetLayoutTab in the layout
{
Add a new tab to the WidgetLayoutControl that matches the name of the WidgetLayoutTab
For each widget location in the tab
{
Initialize a new WidgetContainer instance
Use the repository member variable to get the IWidget instance based on the location’s widget name
Call IWidget.configure with the value of the WidgetLocation.widgetConfig property.
Set the WidgetContainer.contents property to the value of the IWidget instance created.
Register the WidgetContainer.handleWidgetUpdate method as a listener for the “widgetUpdated” event.
Using the rest of the WidgetLocation properties, add it to the correct location in the layout.
Register the “handle*” methods as handlers for the WidgetContainer events.
}
}
WidgetLayoutManager updates
When the layout is modified through a WidgetContainer being moved, closed, restored, or maximized,
the layout contained in WidgetLayoutManager must be updated appropriately. It is important that the
widgetConfig property of the update WidgetLocation in the layout be updated and saved, using the value
of WidgetContainer.contents.getConfiguration. When the layout member variable is updated to match the
new state of the layout, layoutService.saveWidgetLayout must be called to persist the changes.
Required Algorithms
How the layout happens and how the rearrangement happens when a widget is moved must be
documented in detail.
Example of the Software Usage
This component will be used as a GUI control in the updated TopCoder Cockpit

Future Component Direction
Many widgets will be added that implement the IWidget interface. Also, it may be preferable in the future
to offer new layout algorithms. For instance, instead of the column layout in the prototype, we may want
to provide a layout similar to the Adobe sample linked to in the overview.
Interface Requirements
Software Requirements
Graphical User Interface Requirements
The controls and functionality implemented in this component must match the prototype provided.
External Interfaces
Designs must adhere to the interface diagram definition found in the architecture TCUML file provided.
Changes to the interfaces should be approved in the forum.
Environment Requirements
• Development language: ActionScript3
• Compile target: Flex 3
Package Structure
com.topcoder.flex.widgets.layout.components
com.topcoder.flex.widgets.layout.components.events
com.topcoder.flex.widgets.layout.manager
Software Requirements
Administration Requirements
What elements of the application need to be configurable?
• The URL to the web service
Technical Constraints
Are there particular frameworks or standards that are required?
None
TopCoder Software Component Dependencies:
• Flex Widget Layout Service 1.0
• Flex Widget Base Services 1.0
• Flex Widget Repository Service 1.0
**Please review the TopCoder Software component catalog for existing components that can be used in
the design

http://api.arcwebservices.com/devguide/awx/v4/index_Left.htm#StartTopic=flex/widgets_create.htm#|SkinName=aws

RIA Introduction

RIA Introduction


Rich Internet Application
The term RIA (Rich Internet Applications) refers to web applications that have the features and functionality of traditional desktop applications, it means Rich Internet Applications are a cross between web applications and traditional desktop applications that shift some of the essential processing among the bulk of the data for the user interface to the Web client while rest of some remain on application server.

Benefits of RIAs
RIAs are usually richer in functionality as they offer user-interface behaviors using only the HTML widgets that can include any technology being used by the client side, including drag and drop, using a slider to change data, calculations performed only by the client and not need to be sent back to the server.

Shortcomings And Restrictions of RIAs
Despite of having flair advantage over the standard web application, RIAs have several shortcomings and restrictions too. As RIAs run within a sandbox, so the correct operation of sandbox is necessary to run RIA successfully. If assumptions about access to resources are incorrect, RIAs may fail to operate correctly that restricts access to system resources.

Rich Internet Application Development
Traditional Web applications displays in a series of Web pages that needs a distinct download for each page, this is called web page paradigm. On the other hand RIA takes no longer time in downloading the page because the client engine may be prefetching some of the downloaded content for future use.

RIAs Methods And Techniques
It is the first major client side language technology that has the ability to run code and installed on several major of web clients. Earlier its uses were relatively limited but the development in DHTML makes possible to piece together an RIA system without using unified client-side solution. Ajax, the advance tool of Java Script becomes more prominent technique to develop RIA.

Adobe Flex beats Silverlight every time

Both Adobe and Microsoft are fighting hard to be the preferred vendor for RIA development. They both are awesome tools that will change the way we use the web in years to come. But when it comes to deployment, there is only one option for me and that is Flex. The main reason, 99% of all PCs and laptops have Flash installed on it. If you look at this chart you don’t even see the Silverlight plugin. That is because it is so new that it will take a while to penetrate the market. But even Microsoft’s most popular desktop add-on, Microsoft Windows Media Player, only reaches 83.6% of the desktops. Silverlight will struggle to get widely adopted just like Winforms did. The problem with Winforms is it requires the .Net framework to be installed on the client PC. According to Microsoft’s own website, the .Net framework is at about a 58% penetration rate. Keep in mind that the framework only comes into play on Windows operating systems. I don’t know about you, but I won’t have any success convincing all of my 500 manufacturer and retailer clients to install the framework on all of their desktops. But my Flash applications will work fine since they all already have Flash installed, regardless of which operating system they run. Microsoft did learn from the failed approach with Winforms and addresses this issue with the Silverlight plugin. The problem now for Microsoft is how will they get the necessary penetration that customers like me require. Microsoft is also working with the open source community so Silverlight will work on Linux (see Moonlight). This is a great strategy. But I can’t wait 2-3 years until Silverlight penetrates over 90% of the laptops and PCs across all operating systems. Don’t get me wrong, I like what I have seen (download plugin at own risk) from Silverlight as far as ease of use and functionality. If you are building applications for users that you have total control of their desktop, then Silverlight is an awesome choice for you. But for those of us who have no control over the client, Adobe Flex beats Silverlight every time.