I’m a member of Adobe platform evangelism team located in Bucharest, Romania. Before I was software developer for a long time, mostly working on things related to J2EE world. Outside of work I enjoy traveling, going to the gym, reading and watching good movies Cornel is a DZone MVB and is not an employee of DZone and has posted 6 posts at DZone. View Full User Profile

Bringing Data into Flex Applications - Introduction

11.17.2008
| 13014 views |
  • submit to reddit

This article will describe the most common ways to bring data into a Flex application and will present the advantages and disadvantages of each approach. It assumes that the reader has a basic understanding of the Flex language.

Unlike a classic web application (by classic I mean pre AJAX) where the pages are generated on the server the Flex application is loaded at startup and makes calls in order to load or to save data. Of course a Flex application can also make requests in order to load other Flex modules in the same way a Java application can dynamically load JAR libraries but that is a subject for a different article.

Some of the presented solutions are server agnostic – you can use anything on the backend – others assume that you have installed a Java application server where you can deploy various solutions including BlazeDS, Livecycle Data Services, GraniteDS, WebORB etc.

a)Opening a socket connection between the Flex application and the backend.

A socket connection It is the most low-level solution and at the same time the one most flexible. You will have to define your own protocol and how to serialize data (or use the AMF/Hessian protocols). In most cases, you should use this solution only if you have a very specific business need and the existing solutions do not meet your requirements).

You can use Apache MINA if you intend to do that. For example Red5 Flash server was written using the MINA framework.

Bellow is a simple code snippet that shows how to create a socket and how to read or write data:

public function initConnection():void{
    CursorManager.setBusyCursor();
    Security.loadPolicyFile(“xmlsocket://localhost:24?);
	socket = new Socket();
	socket.addEventListener( Event.CONNECT, onConnect );  
	socket.addEventListener(ProgressEvent.SOCKET_DATA, socketRead);    
	socket.addEventListener(ErrorEvent.ERROR, errorHandler);    
	socket.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);    
	socket.addEventListener(SecurityErrorEvent.SECURITY_ERROR, errorHandler);    
	socket.connect(“localhost”, 23);}
	
	public function socketWrite(event:Event){    
	socket.writeUTF(inputName.text);    
	socket.flush();}
	public function socketRead(event:ProgressEvent){  
	while ( socket.bytesAvailable ) {        
	var data:String = socket.readUTF();        
	Alert.show(data);  }}

You probably noticed the line Security.loadPolicyFile(”xmlsocket://localhost:24″); By default a Flex application can open connections only to the same domain from where it was loaded and on the same port. In order to be able to initiate connections to another domain a file named crossdomain.xml must exists on that server. This file specifies the what resources are available and for what domains. In our case the policy file will allow that the all the SWF loaded from any domain are allowed to connect to the port 23

<cross-domain-policy>    
<allow-access-from domain=“*” to-ports=“23″ />
</cross-domain-policy>

 For more details regarding the policy files and Flash security, see this documentation.

b)Using REST and SOAP services (via HTTPService and WebServices components)

REST and SOAP services works with any type of server-side technology – also these technologies are standard and most of the biggest service providers(Yahoo, Amazon, Google, Flickr, eBay) expose their API through both of them . There is an endless debate on when to use REST and when to use SOAP but that is beyond the scope of this article. Instead I will present some samples on how to use them.

As with the sockets example, because the Flex application can initiate requests only to the same domain from where it was loaded you’ll need a crossdomain.xml file on the server where the services are located. Obvious you cannot put a policy files on every server so use the following approach: connect to the back-end server from where the Flex application was loaded and use that server to make the request – after that send the result back to the Flex application. For that you can use an existing product – BlazeDS or another solution.

Below is a sample code showing the two mxml tags used to call REST and SOAP services:

<mx:HTTPService id=“resultHttpService”
     url=“http://www.sampledomain.com/query.jsp?quote=ADBE” />
<mx:WebService id=“resultWebService”
     wsdl=“http://www.sampledomain.com/quotes?wsdl” />

 

In this case I am connecting directly to sampledomain so the first time the Flash Player will check for crossdomain.xml to see if the server allows the request.

In order to use the proxy approach (use the server to do the request) I will modify the code:

<mx:HTTPService id=“resultHttpService” destination=“HTTPDestination” useProxy=“true” />
<mx:WebService id=“resultWebServive” destination=“WebServiceDestination” useProxy=“true” />

 

and in proxy-config.xml I will add the destination definition:

<destination id=“resultHttpService”>
    <properties>
	<url>http://www.domain.com/query.jsp?quote=ADBE</url>
    </properties>
</destination>
<destination id=“ws-catalog”>
    <properties>
	<wsdl>http://www.domain.com/quotes.wsdl</wsdl>
	<soap>*</soap>
    </properties>
    <adapter ref=“soap-proxy”/>
</destination>

 

In the REST example it is very important to notice that due to Flash Player limitations you are allowed to use only GET and POST methods, and any return code other than 200 will generate a fault. To overcome these limitations you can write your own proxy server, or better still, use one already written (BlazeDS for example).

c)Using remoting

Remoting technology allows developers to directly invoke methods on the backend server. Initially this was possible only with Java and Coldfusion but after that different implementations have appeared for PHP, Python, Ruby and .Net. Also there are several other implementations that use Hessian protocol. Below I will present some examples for Java language, using BlazeDS.

The mxml tag from the Flex application looks the same as the ones used for calling webservices – the main attributes are the id and the destination

<mx:RemoteObject id=“productService” destination=“ProductService”/>

The destination is configured into the file remoting-config.xml:

<destination id=“productService”>
    <properties>
	<source>
	com.test.services.ProductService
	</source>
    </properties>    
	<adapter ref=“java-object” />
</destination>

 

The remote object allows you to call methods on the Java object associated with the corresponding destination. Everything else is transparent from the user’s point of view (including the conversion between ActionScript and the Java objects and the serialization mechanism that can handle complex objects graph). You will only need to declare the mapping between the ActionScript and the Java objects using the [RemoteClass] metadata:

package com.test.model{
    [RemoteClass(alias="com.test.model.Product")]
    public class Product{
        public var id:int;
        public var name:String;
    }}

 

Before you start to use remoting it’s a good idea to read this link describing data types conversion between Java and ActionScript.

It is important to notice that on every I/O operation also the remote method is invoked asynchronously so you will need to register handlers for the result and fault events.

d)Using messaging

There are currently several messaging solution on the market for the Flex applications: BlazeDS (and the commercial version Livecycle Data Services) , Granite Data Services and WebORB. All of them also have integration with JMS servers.

With messaging, a Flex application can connect to a message destination on the server (specified in messaging-config.xml) and can exchange messages with the server or with another clients (using the server as a proxy). You can use messaging to have the server push messages to the clients (for example, in an application that displays the latest stock prices) and you can use it for collaboration between clients (for example a chat application).

One of the most important things when working with messaging is choosing the proper communication channel in order to obtain real time messaging. BlazeDS server supports HTTP streaming and polling (short and long) over AMF and HTTP channels. HTTP streaming is the best way to obtain data in real time but because of the limitations from the servlet model it keeps one thread open per connection. The commercial version (Livecycle Data Services ES) overcomes this limitation with the help of NIO channels (RTMP and NIO HTTP).

Below is a code sample that shows the main tags used for messaging:

<mx:Producer id=“producer” destination=“chat”/>
<mx:Consumer id=“consumer” destination=“chat”/>

 

The destination chat is defined below:

<default-channels>
    <channel ref=“my-rtmp”/>
    <channel ref=“my-streaming-amf”/>
</default-channels>
<destination id=“chat”>
    <properties>
	<network>
	<!--The session timeout for inactive HTTP sessions–>           
	<session-timeout>0</session-timeout>
	</network>
    </properties>
</destination>

 

Detailed information regarding messaging can be found in the Messaging Service chapter of the BlazeDS developer guide.

e)Using Data Management Service

Data Management Service is a feature provided (as of the writing of this article) both in Livecycle Data Services ES and WebORB. Both products offers a framework called Data Management however the architectures differ – in this article I will discuss only the Data Management framework provided by Livecycle Data Services. It operates at a much higher level than the messaging and RPC services. While it can be used for different types of applications it provides the most value for data intensive applications (especially where collaboration is very important). It is designed to solve several important challenges:

  • synchronizing data on clients with the server without having to write CRUD methods
  • automatic or manual data synchronization between clients
  • conflict handling, paging data sets, working with offline applications and synchronizing the data when the application is online again

One can make a comparison between Data Management and Hibernate – both frameworks allow the developers to concentrate on defining the domain model and working with it without spending too much time on problems like how to persist, load, version and synchronize data. Hibernate deals with data persistence into database, Data Management with data persistence and synchronization between client applications and the server. There is also integration between these two frameworks and I’ve attached a fully working example showing that.

As with messaging,it is very important how to choose the correct communication channels (especially for automatic synchronization feature). The same choices described in the messaging example apply here.

Here is a simple example that shows how easy it is to create an application for editing a table:

The Flex code:

<?xml version=“1.0? encoding=”utf-8?><mx:Application xmlns:mx=“http://www.adobe.com/2006/mxml” layout=“absolute” initialize=“init();” >
    <mx:Script>
	<![CDATA[
	import test.*;
	import mx.collections.ArrayCollection;
	import mx.data.events.*;
	import mx.events.*;
	import mx.data.*;
	var    companyDataService = new DataService("test.Company");
	[Bindable]
	var companyArray:ArrayCollection = new ArrayCollection();
	function addCompany():void{
	var company:Company = new Company();
	company.name=“<new company>”;
	companyArray.addItem(company);
	}
	function deleteCompany():void{
	var company:Company = companyGrid.selectedItem as Company;
	if (company==null)
	return;
	companyDataService.deleteItem(companyGrid.selectedItem);
	}
	function save():void{
	companyDataService.commit();
	}
	function revert():void{
	companyDataService.revertChanges();
	}
	function init():void{
	companyDataService.fill(companyArray,“mainFill”,[]);               
	companyDataService.autoCommit=false;
	}
	]]>
    </mx:Script>
    <mx:VBox width=“100%” height=“100%” horizontalAlign=“center” > 
	<mx:DataGrid  id=“companyGrid” width=“40%” height=“40%” dataProvider=“{companyArray}” 
	editable=“true” textAlign=“center”>
	<mx:columns> 
	<mx:DataGridColumn dataField=“id”  headerText=“Id” editable=“false”/>
	<mx:DataGridColumn dataField=“name”  headerText=“Company”/>
	</mx:columns>
	</mx:DataGrid> 
	<mx:HBox horizontalAlign=“center” width=“100%”>
	<mx:Button label=“+” click=“addCompany();”/> 
	<mx:Button label=“-” click=“deleteCompany();”/>
	</mx:HBox>
	<mx:HBox width=“100%” horizontalAlign=“center”>
	<mx:Button label=“Save changes” click=“save();”/>
	<mx:Button label=“Revert modifications” click=“revert();”/> 
	</mx:HBox>
    </mx:VBox>
	</mx:Application>

 

The definition of the DataService object is located in the configuration file data-management-config.xml

<destination id=“test.Company” channels=“my-rtmp”>
    <properties>
        <source>flex.data.assemblers.HibernateAnnotationsAssembler</source>
        <scope>application</scope>
        <item-class>test.Company</item-class>
        <metadata>
            <identity property=“id” />
        </metadata>
        <server>
            <hibernate-entity>test.Company</hibernate-entity>
        </server>
    </properties>
</destination>

 

As you can see there are no remoting calls – after the collection companyArray is filled with data you can manipulate the data by adding new elements, deleting or updating elements. You have the option to call save when you want to persist the modifications or revert if you decides to discard them.

It is possible to work with more complex domain models (associations between objects) and you can find one example of this attached.

Data Management is the most appealing approach for bringing data into a Flex application, but like Hibernate case it has a steep learning curve. Documentation related to it can be found in LCDS developer guide.

The following table summarizes the advantages and disadvantages for each solution:

ProsCons
Socket communicationThe most flexible approach. Allows you to write your own server using whatever technology do you want obtaining the best performance.It takes a lot of time and money to define your protocol and write your server. It can be useful if you intend to communicate with an already written server or for cases in which you need extremely high performance
REST/SOAP servicesWell established standards, you can wrote them once and consume them from most of the systems, not just Flex applications. Also most of the companies expose their api through REST and SOAP servicesThe overhead of parsing data (especially for SOAP) can be substantial
RemotingLittle overhead compared with web services. Automatic conversion between Action Script and the Java objects (or another language)Sometimes the data exposed through services needs to be consumed by a variety of applications – this is possible using web services but not with remoting
MessagingAbility to implement collaboration features. Integration with JMSThere are relatively few solutions that implements messaging. As the writing of this article only BlazeDS and LCDS from Adobe (if your backend is Java) and WebORB (if your backend is Java, PHP, .NET)
Data Management (LCDS)The time needed to implement a data driven application is reduced. It offers solutions for collaboration, conflict detection, dealing with complex domain objects, pagination and lazy loading. It also offers integration with Hibernate and SpringThere is only one commercial product for this solution – LCDS from Adobe. It has a relatively steep learning curve

I have also attached an archive containing one Flex Builder project showing the data transfer using sockets and also a more advanced case of data management use. For the rest of the cases I recommend that you download the most recent version of BlazeDS (look in samples folder) or LCDS (look in the lcds-samples folder). If you want to use non Adobe products you can try WebORB (look in examples/flex folder) or GraniteDS (I was not able to find a folder with samples in this product).

From http://cornelcreanga.com/

Published at DZone with permission of Cornel Creanga, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Guido Amabili replied on Mon, 2008/11/17 - 11:59am

Hey,

Thanks for the info but is this java related ?

 

Regards, Guido

Cornel Creanga replied on Mon, 2008/11/17 - 1:09pm

Well if you plan to use Flex as a frontend and Java as a backend it is related and I hope that is also usefull :). I know a lot of people using Flex together with Java without knowing about remoting (for example). Or without knowing about the bandwith savings when using AMF versus other ways of data encoding.

I've added all the methods (even the ones that are server agnostic) in order to be able to choose - even if your backend is Java now maybe tommorow you will have to change it. 

On the other hand if you do not care at all about Flex probably the article is irelevant :)

James Sugrue replied on Tue, 2008/11/18 - 5:00am in response to: Cornel Creanga

Interesting article Cornel. I've been wondering about this area recently and how it's actually possible.

William Houghtaling replied on Mon, 2011/07/04 - 5:53am

Been trying to learn flex few months back and i have been having some problems the I can handle and recently I have gone through webOrb , LCDS, and others. The webOrb and its features are still hard to understand but I guess I still need to learn more about flex and the software it uses. Gauthier, Houghtaling and Williams

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.