Welcome!

Adobe Flex Authors: Elizabeth White, David Smith, RealWire News Distribution, Shelly Palmer, Roberto Marinello

Related Topics: Adobe Flex, XML, AJAX & REA

Adobe Flex: Article

Data Services Made Easy for Adobe Flex Applications

An approach based on XML and e4x
By Indroniel Deb Roy, Alex Nhu
Article Rating:
September 11, 2007 03:30 PM EDT
Reads:
 38,342

Flex has gotten popular lately because of its rich GUI capabilities. It also comes in handy with HTTPService and Web Service components connecting to back-end servers to fetch and update data. But using this mechanism to talk to the back-end server requires formulating a unique service object from the Flex side, making a request, and getting back data from the back-end either in XML or plain text format. The response data then has to be parsed and fed to the Flex objects to update the UI. For small to medium-size Flex projects it's a viable solution, but for enterprise projects with thousands of external service calls it will get quite repetitive and could result in a lot of unmanageable, buggy code.

The approach discussed here provides a more intuitive solution to generate ActionScript classes on the Flex side that are direct counterparts of the enterprise object classes in the back-end server. This way the Flex environment just becomes an extension of the back-end server and the Flex UI gets access to back-end objects. The infrastructure to make remote calls to the back-end server is taken care of by the framework that marshals objects to the back-end to make service calls and un-marshals the results to ActionScript objects transparently so the developer can concentrate just on the UI logic.

Adobe provides Flex Data Services (FDS) that also provides a robust data services solution but costs a huge license fee and ties to proprietary Adobe technology. The new approach discussed here provides a clean, efficient way for back-end integration based on open source technologies like e4x and XML. This approach is suitable for any project implementing Flex for UI with J2EE/Web Services at the back-end. Moreover, this approach doesn't need to be deployed on the server side, which makes it a better solution than FDS while programming the UI for already-deployed production applications. If you're implementing a Flex project and need an easy, efficient way to connect to your back-end data and hate to pay huge license fees, read on...

Why a New Framework?

mx.rpc.http.HTTPService and mx.rpc.soap.WebService
provides the basic infrastructure to call a back-end service to fetch data into the Flex environment. These services rely on formulating a unique request object on the Flex side manually and sending it to the server and getting a response back from the server when invocation is successful.

The response then needs to be parsed and the UI updated on the parsed data from server. For small projects this approach holds good but for enterprise projects just formulating the individual HTTP/Web Service objects to talk to the back-end server and parsing the data from the server to update the UI will result in repetitive and unmanageable code.

Figure 1 shows a simple way to call the back-end server from any Flex application using an HTTPService or Web Service call. In a simple use case, the Flex UI components have to do a remote service call to update the data from the back-end server; the ActionScript (AS) objects on which the UI components are built are used to populate the parameters/XML needed for the HTTP/Web Service call. When service invocation is successful the response is also intercepted by the service object or by any function assigned the responsibility to parse the back-end data and update the AS objects in the Flex UI layer. Moreover, it's very difficult to maintain the Flex code when the server-side service changes its invocation parameters or response. Since the Flex code is dynamically typed during parameter/XML population and response parsing; it will be very difficult for the Flex compiler to spot coding errors due to incorrect parameter-type mappings.

So the basic requirement for the new approach is to have a clean framework that will take care of service object creation right from the passed-in AS object references and parse back-end server data back to the AS objects to update the Flex UI. Communication to the back-end server using HTTP/SOAP and getting a response back to parse into the AS layer is taken care of by the framework. See Figure 2 for details on the new approach.

The new approach relies on generating AS classes that are direct counterparts of the server-side business object classes. These classes are generated from the server-side schema/WSDL definition and available during compile time in the Flex environment as an extension of the remote server objects. The AS object counterparts generated can be directly called and referred to in the Flex environment providing easy-to-use back-end server objects. Moreover, as the AS classes are generated from the server-side schema/WSDL any changes in the server-side service parameters or response is readily propagated to the Flex environment while generating the code. Since the parameter/XML population in the new approach is based on direct AS object references and statically typed, the compiler will also pick up coding errors with type conversion for any changes done in the remote service definitions.

Why XML for Data Transfer?
The approach discussed is based on XML data transfer. XML is suited to the interchange of data as XML documents are tagged, easily parsed, and can represent complex data structure so it's been widely adopted for data transfer in many enterprise applications. XML is used to call Web Service in the back-end server using SOAP. The REST API (Representational State Transfer), which provides a simple HTTP request and XML response, is becoming more popular day-by-day providing more avenues to get well-formed XML data back as a service response. So a UI client that works on the XML backbone based on the infrastructure provided by this new approach can easily integrate with REST/Web Service-based servers.

Published September 11, 2007 – Reads 38,342
Copyright © 2007 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

More Stories By Indroniel Deb Roy

Indroniel Deb Roy works as an UI Architect for BlueCoat Systems.He has more than 10 years of development experience in the fields of J2EE and Web Application development. In his past he worked in developing web applications for Oracle, Novell, Packeteer, Knova etc. He has a passion for innovation and works with various Web2.0 & J2EE technologies and recently started on Smart Phone & IPhone Development.

More Stories By Alex Nhu

Alex Nhu works as a manager, UI Development at Packeteer Inc. He has more than 11 years of work experience designing and architecting complex server-side J2EE and XML applications. He loves developing Web applications with Flex now after getting a taste of developing UI using other RIA platforms.

Comments (13) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.

Most Recent Comments
pixelwiz 10/14/09 12:05:00 PM EDT

I've been a ColdFusion developer for about 5 years, and can do a lot of cool stuff with jQuery and alike, but time has come for me to have to write my first Flex app, and I'm hoping you might have a few suggestions.

I'm doing research on if it's even possible for me to do what I need. I'm building an app to manage scores for golf tournaments, and some things like the leader boards, really need to be refreshing in real time. So as new scores come in, they should immediately be reflected on all leader boards, ideally with some animation or highlight that indicates a score just changed. Now the closest thing I've seen to what I need to do were all those CNN, Fox, CNBC apps during the last presidential elections, where as results were coming in the data was automatically refreshing. I don't even know how that works conceptually, is it the server somehow pushing the data to the Flex clients? Cause I don't want every Flex client to have to keep hitting the server every couple of seconds querying for changes like a web page would have to.

Any help, suggestions, examples are highly appreciated.
Thanks,
-Roman
sailbv 12/03/08 10:56:23 PM EST

Where are listing 3 and listing 4?
Humberto A. Sanchez II 12/10/07 07:52:20 AM EST

Are you having any success either releasing the reference implementation or starting an open source project around this?
Indroniel Deb Roy 11/04/07 01:27:38 PM EST

The wsdl2as framework mentioned here is not the wsdl2as open source one. It's a fresh implementation!
Sebastien Arbogast 10/29/07 05:49:05 PM EDT

Your framework is exactly what I'm looking for. I thought similar functionality was already embedded into Flex but to my great disappointment, it's not. So I'd really love to see what you've come up with. And if I can help, it's with pleasure.
Is open source flash's wsdl2as the framework you're talking about?
Indroniel Deb Roy 09/21/07 12:33:00 PM EDT

This paper or the sample implementation (not currently available for public use) do not use wsdl2as tool(found in http://osflash.org/wsdl2as) to generate as3 code.
So, why wsdl2as tool fails is not pertinent to this paper as such. Please, visit any discussion forum provided by the project to discuss about specific issues in the wsdl2as tool.

The sample implementation in this paper do generate as3 code, but is implemented fresh from scratch. This paper is trying to just explain the architectural details of the approach ...
Ryan K 09/21/07 10:02:01 AM EDT

wsdl2as simply does not work. Worse, it doesn't tell you what the problem is:

Exception in thread "main" java.lang.IllegalArgumentException: local part cannot be "null" when creating a QName
at javax.xml.namespace.QName.(Unknown Source)
at javax.xml.namespace.QName.(Unknown Source)
at uk.co.badgersinfoil.asxsd.TypeNameGenerator.typeName(TypeNameGenerator.java:29)
at uk.co.badgersinfoil.asxsd.TypeBuilder.representationClassForComplexType(TypeBuilder.java:81)
at uk.co.badgersinfoil.asxsd.TypeBuilder.typeNameFor(TypeBuilder.java:46)
at uk.co.badgersinfoil.asxsd.MarshalingCodeGenStrategy.addConversionFromParameter(MarshalingCodeGenStrategy.java:78)
at uk.co.badgersinfoil.asxsd.MarshalUnmarshalBuilder.buildMethodBody(MarshalUnmarshalBuilder.java:89)
at uk.co.badgersinfoil.asxsd.MarshalUnmarshalBuilder.buildMethodBody(MarshalUnmarshalBuilder.java:111)
at uk.co.badgersinfoil.asxsd.MarshalUnmarshalBuilder.createMethodForElement(MarshalUnmarshalBuilder.java:81)
at uk.co.badgersinfoil.asxsd.MarshalUnmarshalBuilder.conversionMethodFor(MarshalUnmarshalBuilder.java:335)
at uk.co.badgersinfoil.wsdl2as.ASXSDTypeMappingStrategy.convertExprToXML(ASXSDTypeMappingStrategy.java:44)
at uk.co.badgersinfoil.wsdl2as.ActionScript3Builder.buildOperationParameterList(ActionScript3Builder.java:371)
at uk.co.badgersinfoil.wsdl2as.ActionScript3Builder.buildBindingOperationMethod(ActionScript3Builder.java:280)
at uk.co.badgersinfoil.wsdl2as.ActionScript3Builder.buildBinding(ActionScript3Builder.java:267)
at uk.co.badgersinfoil.wsdl2as.ActionScript3Builder.buildAllBindings(ActionScript3Builder.java:243)
at uk.co.badgersinfoil.wsdl2as.ActionScript3Builder.build(ActionScript3Builder.java:78)
at uk.co.badgersinfoil.wsdl2as.Main.process(Main.java:88)
at uk.co.badgersinfoil.wsdl2as.Main.main(Main.java:59)
Indroniel Deb Roy 09/12/07 12:51:28 PM EDT

The generated code might need to change if there are major changes in the action script language or some API change in flex web-services support. In Moxie(flex 3) release there is no major change in the AS language and flex Web Service API, so the generated code should just work fine.
Tom Van den Eynde 09/12/07 05:45:20 AM EDT

If I'm correct there will be similar support for this in Flex 3. If so: can the generated code easily be replaced by what is available through Flex 3 later on?
Thiru Rajesh 09/11/07 11:49:09 AM EDT

This is indeed a nice article on overall architecture of flex based applications based on complex server side data requirements. It will definitely serve as an alternative to FDS for programming flex ui for public web services.
Steve 09/05/07 05:15:52 PM EDT

This is one of those ideas that entice us designer crossovers with visions of easily discoverable, accessable, post-processable server-side stuff. And if we know enough T-SQL we can really take better at an architectural level.

Can't help but wonder at the lack of followup/comments by the community.

On the subject of compression; what's it take to bring XML into line AMF much less AMF3 (& setting aside scalability issues) for a 'text-heavy' object.

What would the reverse look like? if one were defining the server-side objects from the native Flex? Couldn't we literally feed mxml components in a digestible way?
Dave 08/24/07 09:56:39 AM EDT

Could you provide a link to a much larger version of your 1st diagram?
http://res.sys-con.com/story/aug07/418939/fig1.jpg
FDJ News Desk 08/21/07 12:59:19 PM EDT

Flex has gotten popular lately because of its rich GUI capabilities. It also comes in handy with HTTPService and Web Service components connecting to back-end servers to fetch and update data. But using this mechanism to talk to the back-end server requires formulating a unique service object from the Flex side, making a request, and getting back data from the back-end either in XML or plain text format. The response data then has to be parsed and fed to the Flex objects to update the UI. For small to medium-size Flex projects it's a viable solution, but for enterprise projects with thousands of external service calls it will get quite repetitive and could result in a lot of unmanageable, buggy code.