Oct 8, 2009

Use of Flex in Web Applications

Abstract:

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applications can be built using only the free open source framework, developers can use Adobe® Flex® Builder™ software to dramatically accelerate development.

Flex is very versatile in its use and implementation. It can used with variety of server side technologies like Java, PHP, Cold-Fusion etc. Flex provides three types of Remote procedure Call Services to interact with the server. These RPC’s are Web-Services which makes soap calls to the server, HTTP service calls send HTTP request and responses. And Remote Object call service which send binary call using HTTP request packets via AMF3 protocols. The remote object call is the fastest service call to the remote servers as the it provides the simplest de serialization, since the data transfer is in binary format which flash player understands easily.


INTRODUCTION

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applications can be built using only the free open source framework, developers can use Adobe® Flex® Builder™ software to dramatically accelerate development.

Benefits of using Flex in Web Application:

  • Applications developed using Flex assures Rich User Experience through intuitive interaction with the application and presenting information in a visually rich interface.
  • Flex allows for the development of applications that support complex business logic to run in the browser, rendering the feeling of Quick Response and not refreshing the page again and again.
  • The highly evolved client environment of Flex permits the applications to process huge number of information at client-end without any noticeable change in performance of the applications. This leads to High Performance.
  • Flex supports Diverse Modes for promoting data with an incorporated development model for complete customization and control. Applications developed are highly customizable tailoring to customer´s needs.
  • Flex provides a Strong Development Model that consists of Action Script and MXML.



Remote Procedure Call Services in Flex

Flex can be easily integrated with any server side language like, Java, PHP, Cold-Fusion, which gives a wide versatility to the use of flex in developing web application. The best part is flex’s final compilation results a HTML file which embeds the flex SWF file in it. So it can be used anywhere.

  • To integrate flex application with the server side language it provides RPC (Remote Procedure Call Service). The RPC provides the following Remote Procedure Call Services:
  • RPC services let your flex application to interact with the remote servers to provide data to your application or for your application to send data to the server.
  • Using Flex SDK, you can access the remote data through web services like SOAP or normal HTTP services like GET or POST requests.
  • For security, by default flash player doesn’t allow an application to access a remote data source from a domain other than the domain from which the application was served.
  • Therefore a remote server must either be in the same domain as the server hosting your application or the remote server must define a crossdomain.xml file.
  • Crossdomain.xml file is an xml file that provides access to swf files from certain domains or from all domains.
  • Remote Object is a RPC Service in which data is send and received from the serves via AMF channel in a binary format. Since flash player understands the binary data, Remote object call is the fastest RPC call in flex.
  • Whenever there is a need to send/receive large data to/from the server Remote Call is preferred over HTTP or Web-Service calls.

Remote Object Service – Configuration and Implementation

Remote Object Service, one of the keys services in LiveCycle DS also called LCDS and BlazeDS, enables Flex applications make remote procedure calls to the Java server via the AMF3 protocol.

AMF3 is architected similar to SOAP, but magnitudes faster because it’s a pure binary protocol. If your Flex application loads large amounts of data, and speed/bandwidth is a priority, you should consider leveraging the Remote Object Service.
The conceptual diagram below demonstrates the architecture of a Flex app coupled with the remoting service,

clip_image002


Server Side Coding and Configuration

With the Remote Object Service, Flex applications could invoke methods from Java classes hosted on the server.There are a few rules you have to follow when creating a remote object class in Java,

  • The Java class must be public
  • Only public methods are visible to the Flex client
  • Method names should not begin with an underscore character
  • Certain method names are reserved and should not be used, such as addHeader(), addProperty(), valueOf(), etc. Please refer to the flex manual for the complete list
  • Enterprise Java Beans (JNDI hosted classes) are not supported

Here is an example of a simple Java class,

public class MyRPCTest
{
public String sayHello()
{
return “Hello from Remot Object!”;
}

public int add(int a, int b)
{
return a+b;
}
}

To host the classes in Remote Object Service,

  • Place compiled class files under WEB-INF/classes. Be sure to preserve the folder structure if you are using Java packaging.
  • It’s recommended to compile your classes into a jar. In that case, place the jar under WEB-INF/lib.

Finally, you must add the class destination in WEB-INF/flex/remoting-config.xml,

Remoting-config.xml:

<destination id=“testJavaClass” >
<properties>
<source>MyRPCTest</source>
<scope>application</scope>
</properties>
</destination>

  • The destination id attribute is referenced when you invoke the class from Flex.
  • The <source> node points to the fully qualified name of the Java class. i.e. packageName.className
  • The <scope> node determines when the Java class will be instantiated,
    • Application means the class will be instantiated once during servlet initialization
    • Session means the class is instantiated for each user session.
    • Request resets the class for each invokation


Client Side Coding

In the Flex client code, instantiate a RemoteObject class and set the destination attribute to match the destination id in the remoting-config file.

testService.mxml:

<mx:RemoteObject id=“testService” destination=“ testJavaClass”>

To invoke a method in the class, simply call the method name after the RemoteObject id,

<mx:Button click=“testService.sayHello()” />

You could add a result event handler to the RemoteObject to catch return messages, but a even quicker method is to bind to the lastResult,

<mx:Label text=“{testService.sayHello.lastResult}” />




Data Exchange between Flex and Java

Flex RemoteObject implicitly maps strongly typed objects between ActionScript and Java. A Date object in Flex, for example, is mapped to a Date object is Java automatically.

For scenarios where you have to pass multiple pieces of data back and forth, you need to explicitly declare a custom data type. Here is a simple example that uses a custom Java class to hold user registration info,

Java File (Server Side)

package sample;

public class UserInfo
{
private String userName;

public String getUserName()
{
return userName;
}

public void setUserName(String value)
{
userName = value;
}
}

For the RemoteObject to correctly parse the custom data type, you need to create a similar class in ActionScript,

Flex File (Client Side)

[Bindable]
[RemoteClass(alias="sample.UserInfo")]
public class UserInfo
{
public var userName:String=”";
}

Notice the two attributes attached to the ActionScript class,

  • Bindable attribute is necessary for binding the class property values
  • RemoteClass attribute points to the corresponding Java class

web.xml configuration for flex services

Add the following entries into your web.xml file:

<!-- Http Flex Session attribute and binding listener support -->
<listener>
   <listener-class>flex.messaging.HttpFlexSession</listener-class>
</listener>

<!-- MessageBroker Servlet -->
<servlet>
   <servlet-name>MessageBrokerServlet</servlet-name>
   <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
   <init-param>
      <param-name>services.configuration.file</param-name>
      <param-value>/WEB-INF/flex/services-config.xml</param-value>
   </init-param>
   <init-param>
      <param-name>flex.write.path</param-name>
      <param-value>/WEB-INF/flex</param-value>
   </init-param>
   <load-on-startup>1</load-on-startup>
</servlet>

<servlet-mapping>
   <servlet-name>MessageBrokerServlet</servlet-name>
   <url-pattern>/messagebroker/*</url-pattern>
</servlet-mapping>

References

http://www.adobe.com/devnet/flex

http://www.adobe.com/devnet/flex/?view=cookbook

0 comments:

Text Widget

Copyright © Vinay's Blog | Powered by Blogger

Design by | Blogger Theme by