9/29/2010

The architecture of Flex and Java appli…

Adobe Products Industries Learning Help Downloads Company Store Adobe Store for home or home office Education Store for students, educators, or staff Business Store for small and medium business Other ways to buy
Search Search

Info Sign in My cart My shipments My support Adobe Developer Connection /Flex Developer Center /

The architecture of Flex and Java applications
by Jeanette Stallons

stallons.com

Content
1. Client/server architecture 2. Flash Remoting 3. Security 4. Flex application architecture 5. Messaging 6. Data managed applications 7. Model driven development 8. Portal integration

Created
Mar 22, 2010 Comments (0)
adobe.com/…/flex_java_architecture.html 1/27

9/29/2010 Comments

(0)

The architecture of Flex and Java appli…

(0 Ratings)

Requirements
User level
All The Java EE Platform is the leading enterprise web server. The Adobe Flash Platform is the leader in the rich Internet application space. Using both, developers can deliver compelling, data-centric applications that leverage the benefits of an enterprise back-end solution and a great user experience. In this article, you learn about the architecture of applications built using Flex and Java including: An overview of the client/server architecture. The different ways the client and server can communicate. An introduction to Flash Remoting and why and how you use it. How to integrate a Flex application with your security framework. An overview of how to build Flex applications using events, states, MXML components, and modules. An introduction to developing a Flex application with real-time server data push. How to boost productivity developing data-intensive applications using the Data Management service in LiveCycle Data Services. An overview of model driven development using Flash Builder and LiveCycle Data Services to generate client and server-side code. How to deploy a Flex application on a portal server. Be sure to also watch the video Introduction to Flex 4 and Java integration. To learn more about the technologies used to build these applications, read The technologies for building Flex and Java applications article.

1. Client/server architecture
Flex and Java applications use a multi-tier architecture where the presentation tier is the Flex application, the business or application tier is the Java EE server and code, and the data tier is the database. You can write the back-end code just as you normally would for a Java application, modeling your objects, defining your database, using an object-relational framework such as Hibernate or EJB 3, and writing the business logic to query and manipulate these objects. The business tier must be exposed for access via HTTP from the Flex application and will be used to move the data between the presentation and data tiers. Typical HTML applications consist of multiple pages and as a user navigates between them, the application data must be passed along so the application itself (the collection of pages and functionality it consists of) can maintain state. In contrast, Flex applications, by nature, are stateful. A Flex application is embedded in a single HTML page that the user does not leave and is rendered by Flash Player. The Flex application can dynamically change views and send and retrieve data asynchronously to the server in the background, updating but never leaving the
adobe.com/…/flex_java_architecture.html 2/27

Figure 2. Client/server communication Flex applications can communicate with back-end servers using either direct socket connections or more commonly. Methods for connecting Flex and Java. You specify the endpoint URL. which automatically handles the serialization and deserialization of SOAP formatted text to ActionScript data types and vice versa. You can specify the data to be handled as raw text and assigned to a String variable or converted to XML. If you get back JSON. E4X. to RESTful web services. or to other server files that return text over HTTP. When possible. or plain old ActionScript objects. and a data type for the returned data (what type of data structure it should be translated into once received in the Flex application). To make calls to SOAP based web services. which in turn. All three wrap Flash Player's HTTP connectivity. It makes a Flash Remoting request to a method of a server-side Java class that returns binary Action Message Format over HTTP. You use HTTPService to make HTTP requests to JSP or XML files. or SOAP (see Figure 2). use Flash Remoting whose binary data transfer format enables applications to load data up to 10 times faster than with the more verbose. WebService. and RemoteObject.9/29/2010 The architecture of Flex and Java appli… single application interface (see Figure 1) (similar to the functionality provided by the XMLHttpRequest API with JavaScript. The Flex framework has three remote procedure call APIs that communicate with a server over HTTP: HTTPService. Flex applications cannot connect directly to a remote database. see James Ward's Census RIA Benchmark application. listener functions (the callback functions to be invoked when the HTTPService request returns a successful or unsuccessful response). The third option for making remote procedure calls is to use the RemoteObject API.) Figure 1. you can use the Adobe Flex corelib package of classes to deserialize the JSON objects into ActionScript objects.html 3/27 . text-based formats such as XML. JSON. through HTTP. adobe.com/…/flex_java_architecture. you can use the HTTPService API or the more specialized WebService API. uses the browser's HTTP library. To see a comparison of AMF to other text-based serialization technologies. The client/server architecture.

Flash Remoting uses client-side functionality built in to Flash Player and server-side functionality that is built in to some servers (like ColdFusion and Zend) but must be installed on other servers (as BlazeDS or LiveCycle Data Services on Java EE servers.html 4/27 . the Java class with the method to invoke (see Figure 3).9/29/2010 The architecture of Flex and Java appli… 2. The Flex application sends a request to the server and the request is routed to an endpoint on the server. From the endpoint. Flash Remoting architecture. the latest is AMF 3 Specification for ActionScript 3. You can find tables listing the data type mappings when converting from ActionScript to Java and Java to ActionScript here. adobe. you use the [RemoteClass] metadata tag to create an ActionScript object that maps directly to the Java object. public properties (including those defined with get and set methods) are serialized and sent from the Flex application to the server or from the server to the Flex application as properties of a general 0bject.NET servers. For custom or strongly typed objects. and Messaging services. the BlazeDS and LiveCycle Data Services engine that handles all the requests and routes them through a chain of Java objects to the destination. Proxying. Adobe publishes this protocol. and for LiveCycle. BlazeDS and LiveCycle Data Services use a message-based framework to send data back and forth between the client and server. To enable mapping between the corresponding client and server-side objects. It provides transparent data transfer between ActionScript and server-side data types. They provide Remoting. WebORB or FluorineFX on .com/…/flex_java_architecture. deserialization. Flash Remoting Flash Remoting is a combination of client and server-side functionality that together provides a call-and-response model for accessing server-side objects from Flash Platform applications as if they were local objects. and more). the Zend framework or amfphp on PHP servers. Figure 3. and data marshaling between the client and the server. See the technologies for building Flex and Java applications article for more details about BlazeDS and LiveCycle Data Services. an additional Data Management service. you use the same property names in the Java and ActionScript classes and then in the ActionScript class. handling the serialization into Action Message Format (AMF). AMF AMF is a binary format used to serialize ActionScript objects and facilitate data exchange between Flash Platform applications and remote services over the Internet. the request is passed to the MessageBroker.

or more typically. In either scenario a web application called blazeds or lcds (usually appended by a version number) is created.Employee{ [Bindable] [RemoteClass(alias="services. You can modify and build out this application with your Java code.) } } Installing BlazeDS or LiveCycle Data Services To use Flash Remoting with BlazeDS or LiveCycle Data Services..9/29/2010 The architecture of Flex and Java appli… Here is an example Employee ActionScript class that maps to a server-side Employee Java DTO located in the services package on the server. package valueobjects.html 5/27 . (.xml adobe. The turnkey download contains a ready-to-use version of Tomcat in which the the BlazeDS WAR file has already been deployed and configured along with a variety of sample applications. public var lastName:String. you can download it as a WAR file which you deploy as a web application or as a turnkey solution. Figure 4.com/…/flex_java_architecture. For BlazeDS. you can copy the JAR files and configuration files the blazeds or lcds web application contains and add them to an existing Java web application on the server (see Figure 4). Similarly. The required BlazeDS or LiveCycle Data Services files. public var firstName:String. for LiveCycle Data Services. you need to install and configure the necessary server-side files. Modifying web.Employee")] public class Employee { public var id:int.. the installer lets you choose to install LiveCycle with an integrated Tomcat server or as a LiveCycle Data Services web application.

xml files located in the /WEB-INF/flex/ folder for the web application.cfm</url-pattern> </servlet-mapping> Reviewing services-config.SecureAMFEndpoint"/> </channel-definition> (.SecureAMFChannel"> <endpoint url="https://{server.xml</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>MessageBrokerServlet</servlet-name> <urlpattern>/messagebroker/*</url-pattern> </servlet-mapping> Optionally.servlet.HttpFlexSession</listener-class> </listener> <!-MessageBroker Servlet --> <servlet> <servlet-name>MessageBrokerServlet</servletname> <display-name>MessageBrokerServlet</display-name> <servletclass>flex.xml For Flash Remoting.endpoints. you may also want to copy and paste (and uncomment) the mapping for RDSDispatchServlet... you also need to modify the web.html 6/27 .name}:{server.channels.endpoints. which handles all the requests and passes them off to the correct server-side Java endpoints.xml file defines different channels that can be used when making a request. which is used for RDS (Remote Data Service) access with the data service creation feature in Flash Builder 4 that introspects a server-side service and generates corresponding client-side code.port}/{context.file</param-name> <param-value>/WEB-INF/flex/servicesconfig. The services-config.messaging. the client sends a request to the server to be processed and the server returns a response to the client containing the results. <servlet> <servlet-name>RDSDispatchServlet</servlet-name> <displayname>RDSDispatchServlet</display-name> <servletclass>flex.Http Flex Session attribute and binding listener support --> <listener> <listener-class>flex.messaging.messaging.root}/messagebroker/amfsecure" class="flex. <!-.rds.) </channels> Defining destinations adobe. Each channel definition specifies the network protocol and the message format to be used for a request and the endpoint to deliver the messages to on the server. See the model driven development section for more details.MessageBrokerServlet</servlet-class> <init-param> <paramname>services.name}:{server. <channels> <channel-definition id="my-amf" class="mx.configuration.messaging.xml and remotingconfig.9/29/2010 The architecture of Flex and Java appli… If copying the files to a different web application.channels.AMFChannel"> <endpoint url="http://{server.root}/messagebroker/amf" class="flex. You can copy and paste these from the original blazeds or lcds web application web.FrontEndServlet</servlet-class> <init-param> <paramname>useAppserverSecurity</param-name> <param-value>false</param-value> </initparam> <load-on-startup>10</load-on-startup> </servlet> <servlet-mapping id="RDS_DISPATCH_MAPPING"> <servlet-name>RDSDispatchServlet</servlet-name> <urlpattern>/CFIDE/main/ide.port}/{context. You configure these requests by modifying the services-config.messaging.xml file.messaging.xml file to define a session listener for HttpFlexSession and a servlet mapping for MessageBroker.server. The Java-based endpoints unmarshal the messages in a protocol-specific manner and then pass the messages in Java form to the MessageBroker which sends them to the appropriate service destination (you'll see how to define these next).com/…/flex_java_architecture.AMFEndpoint"/> </channel-definition> <channeldefinition id="my-secure-amf" class="mx.

an LDAP directory server. or to use a specific authentication and authorization framework.xml file. JRunLoginCommand.com/…/flex_java_architecture.adapters. you need to specify the "login command" for your application server in the <security> tag. and user roles. Modifying services-config.html 7/27 .services.RemotingService"> <adapters> <adapter-definition id="java-object" class="flex.remoting.xml In the BlazeDS or LiveCycle Data Services services-config. access to some or all server-side resources must be restricted to certain users.EmployeeService</source> <scope>application</scope> </properties> </destination> </service> You can also specify channels for individual destinations. <s:RemoteObject id="employeeSvc" destination="employeeService"/> 3. <destination id="employeeService " channels="my-secure-amf"> Lastly. create a form to obtain login credentials from the user which are passed to the server to be authenticated. usually achieved by placing it in the web application's /WEB INF/classes/ directory or in a JAR file in the /WEB INF/lib/ directory. an existing store of usernames. To integrate a Flex application with the Java EE security framework so that access to server-side resources is appropriately restricted. You can access EJBs and other objects stored in the Java Naming and Directory Interface (JNDI) by calling methods on a destination that is a service facade class that looks up an object in JNDI and calls its methods. Many Java EE applications use container managed security in which user authentication (validating a user) and user authorization (determining what the user has access to—which is often role based) are performed against the Realm.messaging. These are all defined in the XML file and you just need to uncomment the appropriate one. You can access stateless or stateful Java objects by setting the scope property to application.messaging. session. an XML document. The Realm is configured on your Java EE server to be a relational database.JavaAdapter" default="true"/> </adapters> <default-channels> <channel ref="my-amf"/> </default-channels> <destination id="employeeService"> <properties> <source>services. BlazeDS and LiveCycle Data Services supply the following login commands: TomcatLoginCommand (for both Tomcat and JBoss).9/29/2010 The architecture of Flex and Java appli… In the remoting-config. adobe. Security In many applications. or request (the default). WeblogicLoginCommand. WebSphereLoginCommand. The instantiation and management of the server-side objects referenced is handled by BlazeDS or LiveCycle Data Services. you add security information to the BlazeDS or LiveCycle Data Services configuration files (details follow below) and then typically in the Flex application. OracleLoginCommand.services.xml file. <service id="remoting-service" class="flex. The user credentials are then passed to the server automatically with all subsequent requests. passwords. You set the source property to the fully qualified class name of a Java POJO with a no argument constructor that is located in a source path. you define the destinations (named mappings to Java classes) to which the MessageBroker passes the messages. you use these destinations when defining RemoteObject instances in a Flex application.

html 8/27 .9/29/2010 The architecture of Flex and Java appli… You also need to define a security constraint that you specify to use either basic or custom authentication and if desired.channels. and a fault event indicates the login failed..endpoints.name}:{server.root}/messagebroker/amfsecure" class="flex.EmployeeService</source> </properties> <security> <securityconstraint ref="trusted"/> </security> </destination> You can also define default security constraints for all destinations and/or restrict access to only specific methods that can use different security constraints. in your destination definition... A result event indicates that the login (the authentication) occurred successfully. one or more roles. </destination> where my-secure-amf is defined in the services-config.port}/{context.SecureAMFChannel"> <endpoint url="https://{server.com/…/flex_java_architecture.messaging. <services-config> <security> <login-command class="flex. The credentials are applied to all services connected over the same ChannelSet. Now. Your application can now make Flash Remoting requests to server destinations just as before.messaging.TomcatLoginCommand" server="Tomcat"> <per-clientauthentication>false</per-client-authentication> </login-command> <securityconstraint id="trusted"> <auth-method>Custom</auth-method> <roles> <role>employees</role> <role>managers</role> </roles> </security-constraint> </security> . the call adobe. but now the user credentials are automatically sent with every request (for both custom and basic authentication).messaging.xml file: <!-..security. </services-config> Modifying remoting-config. you need to create a form in the Flex application to retrieve a username and password from the user and then pass these credentials to the server by calling the ChannelSet.SecureAMFEndpoint"/> </channel-definition> Adding code to the Flex application That covers the server-side setup. Mode details can be found here.xml Next. uses HTTP. You can change one or more of the destinations to use the my-secureamf channel that uses HTTPS: <destination id="employeeService"> <channels> <channel ref="my-secure-amf"/> </channels> . you don’t have to add anything to your Flex application. you need to reference the security constraint: <destination id="employeeService"> <properties> <source>services. my-amf. The default channel. The browser opens a login dialog box when the application first attempts to connect to a destination.login() method and then listening for its result and fault events. if you are using custom authentication.Non-polling secure AMF --> <channel-definition id="my-secure-amf" class="mx. you also need to add some extra classes to the web application for integrating with the security framework used by the Jave EE application server and modify a couple of configuration files. For basic authentication. To do custom authentication with Tomat or JBoss. If the destination or methods of the destination have authorization roles specified which are not met by the logged in user.

Just as for JavaScript and the browser DOM objects.logout() method. import mx. Using events A typical Flex application consists of MXML code to define the user interface and ActionScript code for the logic.controls. you use the ChannelSet. 4. do something with the data returned from the server. the two are wired together using events and event handlers. let's take a look at how you build an application to use this object.getEmployees()"> <fx:Script> <![CDATA[ import mx. After the application is initialized. Data binding is used to bind the employees variable to the dataProvider property of the DataGrid. you define the instance. a message is displayed in an Alert box.collections.html 9/27 . } ]]> </fx:Script> <fx:Declarations> <s:RemoteObject id="employeeSvc" destination="employeeService" result="onResult(event)" fault="onFault(event)" /> </fx:Declarations> <mx:DataGrid dataProvider="{employees}"/> </s:Application> When using a RemoteObject. To use a RemoteObject in an application.adobe. import mx.adobe.com/mxml/2009" xmlns:s="library://ns.rpc. invoke a method of the server-side remoting destination. the getEmployees() method of the employeeService destination defined in the remoting-config. and inside those. Here is a simple application where employee data is retrieved from a database and displayed in a Flex DataGrid component.ArrayCollection. you can define result and fault handlers on the service level: <s:RemoteObject id="employeeSvc" destination="employeeService" result="onResult(event)" fault="onFault(event)"/> on the method level: <s:RemoteObject id="employeeSvc" destination="employeeService"> <s:method name="getEmployees" result="onResult(event)" fault="onFault(event)"/> <s:method name="getDepartments" result="onResult2(event)" fault="onFault2(event)"/> </RemoteObject> or on a per-call basis: <s:Application xmlns:fx=http://ns.9/29/2010 The architecture of Flex and Java appli… will return a fault event.adobe.events.com/flex/mx" initialize="employeeSvc.com/flex/spark" adobe.com/mxml/2009" xmlns:s="library://ns.result as ArrayCollection. and if data is successfully returned from the server. Flex application architecture Now that you've learned to set up Flash Remoting on the server-side and define a RemoteObject instance in Flex.com/…/flex_java_architecture. specify callback functions for the result and fault events.ResultEvent."."Error").show("Error retrieving data.adobe.xml file on the server is called.FaultEvent.rpc. To remove the credentials and log out the user. import mx. } private function onFault(e:FaultEvent):void{ Alert. private function onResult(e:ResultEvent):void{ employees=e. the variable employees is populated and if the request fails for any reason.adobe.events. [Bindable]private var employees:ArrayCollection.com/flex/spark" xmlns:mx="library://ns. <s:Application xmlns:fx="http://ns.Alert.

<s:states> <s:State name="employees"/> <s:State name="departments"/> </s:states> <mx:DataGrid dataProvider="{employees}" includeIn="employees"/> <s:Button label. ActionScript code is automatically generated so that an event is broadcast whenever the employees variable changes.token=employeeSvc. but not run on its own. employees is initially null and no data is displayed in the DataGrid but as soon as the data is successfully retrieved form the server and employees is populated. The curly braces in the assignment of the DataGrid's dataProvider property actually generates the code to listen for changes to the employees variable and when it changes. you can define multiple states and then for every object in that view.departments="currentState='employees'"/> Using MXML components As your application gets larger. Here is the code for a MXML component.departments="Switch to employees" click. In the previous application code. when the file is compiled.com/…/flex_java_architecture. move. you can define what state(s) it should be included in and what it should look like and how it should behave in that state. you need to break up your logic into packages of ActionScript classes and your views into separate MXML files (called MXML components).adobe. For every Flex view or component. the [Bindable] tag in front of the the employees variable definition is a compiler directive. or modify components. to update the DataGrid view accordingly.samples.9/29/2010 The architecture of Flex and Java appli… xmlns:mx="library://ns.getEmployees()"> <fx:Declarations> <s:RemoteObject id="employeeSvc" destination="employeeService"/> <s:CallResponder id="getEmployeesResult" result="onResult(event)" fault="onFault(event)"/> </fx:Declarations> Using data binding Data binding is a powerful part of the Flex framework that lets you update the user interface when data changes without you having to explicitly register and write the event listeners to do this. [Bindable]private var employees:ArrayCollection. adobe.html 10/27 .mxml in the com. remove. You switch between states by setting the component's currentState property to the name of one of the defined states. saved as MasterView.adobe. To use a component in MXML. you use Flex view states. Each MXML component extends an existing component and can only be included in an application.com/flex/mx" initialize="getEmployeesResult. for instance to add.employees="currentState='departments'" click. Masterview. the DataGrid is updated to display the employee data. Using view states To make more extreme changes to the user interface dynamically at runtime.employees="Switch to departments" label. <mx:DataGrid dataProvider="{employees}"/> In this application. you instantiate an instance of that component (its class name is the same as its file name) and include the proper namespace so the compiler can locate it.views package.

adobe.adobe. Learn how to define and broadcast events.html 11/27 .*"> <fx:Script> <![CDATA[ import mx. this is how the components in the Flex framework itself are built.9/29/2010 The architecture of Flex and Java appli… <s:Group xmlns:fx="http://ns.currentTarget. <s:Application xmlns:fx="http://ns. } ]]> </fx:Script> <views:MasterView masterDataChange="onMasterDataChange(event)"/> </s:Application> Broadcasting events In order to build loosely-coupled components. private function onMasterDataChange(e:Event):void{ Alert.views. "data2".com/flex/spark" > <fx:Metadata> [Event(name="masterDataChange".adobe. all your code gets compiled into one SWF file.dispatchEvent(new Event("masterDataChange")). To create a module. the component creates an instance of the type of event object specified in the metadata and broadcasts it.type="flash.events.samples. a DropDownList change event). this.adobe. Creating modules By default. you create a class (ActionScript of MXML) extending the Module class and then compile it. The [Event] metadata tag is used to define the event as part of the component's API and specify what type of event object it broadcasts. you need to define a public API for the component (its public members) and/or define and broadcast custom events as shown in the MasterView code example above.selectedItem.selectedData.dispatchEvent(new Event("masterDataChange")). public var selectedData:String.type="flash.com/mxml/2009" xmlns:s="library://ns. you can use modules to break your application into multiple SWF files that can be loaded and unloaded dynamically by the main application at runtime. } ]]> </fx:Script> <s:DropDownList id="dataList" dataProvider="{masterData}" change="onChange(event)"/> </s:Group> Here is the code for an application that instantiates and uses that custom MasterView component.com/…/flex_java_architecture.show(e.ArrayList.controls.adobe.Alert.collections. For more information on broadcasting custom events. To load the module dynamically at runtime into an application. "data3"]).com/flex/spark" xmlns:views="com. watch the video.Event")] </fx:Metadata> <fx:Script> <![CDATA[ import mx. <views:MasterView masterDataChange="onMasterDataChange(event)"/> Loosely-coupled components like this that define and broadcast custom events are the core building blocks for Flex applications. If your SWF file gets very large or contains functionality that only specific users may use."Master data changed"). In fact.events.com/mxml/2009" xmlns:s="library://ns. <fx:Metadata> [Event(name="masterDataChange". you use the <mx:ModuleLoader> tag or methods of the adobe. this.Event")] </fx:Metadata> When some event occurs in the component (in this example. private function onChange(e:Event):void{ selectedData=dataList. The code that instantiates this custom component can now register to listen for this custom event and register and event handler. [Bindable]private var masterData:ArrayList=new ArrayList(["data1".

messaging. actionscript.JMSAdapter"/> </adapters> <default-channels> <channel ref="my-rtmp"/> <channel ref="my-streaming-amf"/> </default-channels> The first adapter defined. Mate. Parsley. applications for trading stocks.adapters. a real-time streaming channel with failover to a streaming AMF channel (both defined in the services-config.services. front controllers. push messages from the server to clients.services. In fact. Swiz. Using BlazeDS or LiveCycle Data Services. Other popular frameworks include Pure MVC. the article has focused on creating applications that use a call-response model to make asynchronous calls to Java classes on the server.adapters. Server sending notifications to clients. A simple application using messaging is instant messaging where text is exchanged between clients. you can also build applications that use a publish-subscribe model to send messages between multiple Flex clients (through the server).xml. auction sites having access to real-time bids. and an event dispatcher. centralize the application data and data services. are all examples of applications that can be developed using the messaging infrastructure. Messaging To this point. and/or send messages to other JMS enabled messaging clients.messaging. Defining destinations Similar to how you configure remoting. The oldest and most established is Cairngorm. you can build your Flex application using all the design patterns that have proven useful over the years in enterprise application development. you are going to want to use some methodology to organize its files. but as your application gets larger. many Flex specific microarchitectures have been and continue to be developed. see Flex Architecture on the Adobe Developer Center. and Spring ActionScript. A Flex application can send messages to a destination on the server and any other clients subscribed to that same destination will receive those messages. clients receiving sport score updates. 5.messaging. Messaging can also be used to create rich collaborative data applications where data changes made in one client are "instantly" seen by other clients viewing the same data. Using a microarchitecture That covers the basics for building an application. For more information about these and other frameworks.ActionScriptAdapter" default="true" /> <adapter-definition id="jms" class="flex.9/29/2010 The architecture of Flex and Java appli… ModuleLoader class. foreign exchange etc. A messaging destination can be as simple as this: <destination id="chat"> in which case it uses the default adapter and channel defined in the messaging-config. in this case. you configure messaging by defining destinations in a server-side configuration file. an open source microarchitecture that uses commands and delegates. is the default adapter and is used to exchange messages between Flex clients. The default channel is my-rtmp. a singleton data model. The jms adapter can be used instead to bridge to JMS destinations. a singleton service store.xml adobe.xml file: <adapters> <adapter-definition id="actionscript" class="flex. To do this. and handle communication between all the components.messaging.com/…/flex_java_architecture.html 12/27 . messaging-config.

including those that use polling or streaming. you usually use the my-amf or my-secure-amf channel. The my-amf-longpoll channel is configured for long polling. the process is repeated.AMFChannel"> <endpoint url="http://{server. you specify the channel to be used for the communication between the client and server including the protocol.channels.endpoints.port}/{context.AMFEndpoint"/> <properties> <pollingenabled>true</polling-enabled> <polling-interval-seconds>0</polling-intervalseconds> <wait-interval-seconds>60</wait-interval-seconds> <client-wait-intervalseconds>3</client-wait-interval-seconds> <max-waiting-poll-requests>100</maxwaiting-poll-requests > </properties> </channel-definition> When this channel is used. the client polls again after 3 seconds. <destination id="chat"> <properties> <channels> <channel ref="my-polling-amf"/> </channels> <network> <session-timeout>0</session-timeout> </network> <server> <maxcache-size>1000</max-cache-size> <message-time-to-live>0</message-time-to-live> <durable>false</durable> <send-security-constraint ref="trusted"/> <subscribesecurity-constraint ref="trusted"/> </server> </properties> </destination> Selecting a channel When defining a destination.messaging.channels. you can use long polling.root}/messagebroker/myamflongpoll" class="flex.endpoints. servlets or sockets. the client polls the server. Polling channels support polling the server on some interval or on some event. Typical application servers might have around 200 HTTP request threads available. and only clients that have been authenticated and authorized against the trusted security constraint defined in the services-config. so you need to make sure you set the maximum allowable number of polling threads to a smaller number and still leave enough threads to handle other HTTP requests. if exceeded. the server poll response thread waits 60 seconds for new messages to arrive if there are no new messages on the server and then returns to the client.root}/messagebroker/amfpolling" class="flex. Selecting a channel. and the endpoint. users are never unsubscribed even with no activity.xml file (see the Security section) can publish or receive messages. The server is set to allow 100 simultaneous server poll response threads in a wait state.AMFChannel"> <endpoint url="http://{server. You can also specify additional properties when defining a destination.messaging. <channel-definition id="my-polling-amf" class="mx.messaging. the port.port}/{context.AMFEndpoint"/> <properties> <pollingenabled>true</polling-enabled> <polling-interval-seconds>8</polling-intervalseconds> </properties> </channel-definition> To more closely mimic a real-time connection. messages are kept on the server indefinitely until there are 1000 messages at which time the oldest is replaced. adobe.com/…/flex_java_architecture.messaging.html 13/27 . the chat destination is configured to use the my-polling-amf channel. there is larger number of channels to select from. including network and server properties. Channels are defined in the services-config.xml file.9/29/2010 The architecture of Flex and Java appli… file). For remoting.name}:{server. <channel-definition id="my-amf-longpoll" class="mx.name}:{server. The my-polling-amf channel polls the server every 8 seconds for new messages. For messaging. after receiving the poll response. and HTTP or RTMP. Channels are discussed in more detail in the next section. In the following destination. the server does not wait for new messages before returning a response.

the endpoint is immediately notified (so the application can instantly respond) unlike when using the HTTP protocol where endpoints do not receive notification until the HTTP session on the server times out. all contain "nio" in their names.channels. an HTTP streaming channel can be used.messaging.messaging.endpoints. messages can be pushed using sockets instead of HTTP threads. separate threads are still required for client-server requests and the persistent (or waiting) threads used for the server-to-client updates.messaging.RTMPEndpoint"/> <properties> <idle-timeoutminutes>20</idle-timeout-minutes> </properties> </channel-definition> RTMP.channels.endpoints.messaging.xml file. video. For applications that will have larger numbers of simultaneous users.StreamingAMFChannel"> <endpoint url="http://{server. my-nio-amf-longpoll. the channel automatically attempts to tunnel over HTTP.endpoints.com/…/flex_java_architecture. NIO stands for Java New Input/Output and is a collection of Java APIs for I/O operations. LiveCycle Data Services includes a NIO-based socket server and has additional channels available for messaging that are not available with BlazeDS. handling thousands of simultaneous users instead of around a hundred.messaging.9/29/2010 The architecture of Flex and Java appli… With servers and proxy servers that support HTTP 1.StreamingAMFEndpoint"/> </channel-definition> Using HTTP long-polling and streaming the number of simultaneous users that can be connected to a destination is limited by the available number of server HTTP threads. <channel-definition id="my-nio-amf-longpoll" class="mx. Network latency is minimized compared to long-polling because connections don’t have to be continually closed and reopened. These channels are still using HTTP so in the latter two cases.NIOAMFEndpoint"/> <server ref="my-nio-server"/> <properties> <polling-enabled>true</polling-enabled> <polling-intervalmillis>0</polling-interval-millis> <wait-interval-millis>-1</wait-interval-millis> </properties> </channel-definition> With LiveCycle Data Services you can choose channels that use the RTMP protocol instead of HTTP. it is often blocked by client firewalls.RTMPChannel"> <endpoint url="rtmp://{server. was developed by Adobe for high-performance transmission of audio. defined in the services-config.messaging. my-nioamf-stream).name}:2080/nioamflongpoll" class="flex. Another benefit of RTMP is that when a client connection is closed. RTMP provides a full duplex socket connection so that a single connection can be used for all communication between the client and the server. Because RTMP generally uses a non-standard port.name}:{server. A persistent connection is established between the client and the server over which server messages are pushed to the client. HTTP connections can't handle traffic in both directions.root}/messagebroker/streamingamf" class="flex. In this case.channels. adobe. If you are using LiveCycle Data Services you should use the NIO channels over the servlet based channels because they scale better.1.port}/{context. These channels. the Real-Time Messaging Protocol. and data between Adobe Flash Platform technologies (like Adobe Flash Player and Adobe AIR) and is now available as an open specification. long polling.name}:2037" class="flex.html 14/27 . though. <channel-definition id="my-streaming-amf" class="mx. short-lived threads must be used for any other server requests. <channel-definition id="my-rtmp" class="mx.AMFChannel"> <endpoint url="http://{server. so separate. including all RPC and messaging. There are NIO equivalents for each of the AMF polling. and streaming channels just discussed (my-nio-amfpoll.

the Consumer API. see the BlazeDS and LCDS documentation. If using BlazeDS. This entails writing a lot of client-side code to keep track of the changes made to the data on the client (additions. protected function application1_creationCompleteHandler():void{ consumer. updates. Sending and receiving messages To send messages from a Flex application you use the Producer API and to receive messages. The DataService API provides methods for filling client-side data collections with data from the server and batching and sending data changes to the server.text+=event.9/29/2010 The architecture of Flex and Java appli… As a general recommendation.MessageEvent. and other clients.com/…/flex_java_architecture. To build a managed data application you define a Data Management service destination in a configuration file on the server and then use the Flex DataService component in the application to call methods of a server-side service specified by that destination. and to resolve these conflicts on the client and server.html 15/27 . committing the changes.send(message).subscribe(). 6.adobe.username=username. and displays messages is shown here. use RTMP with failover to NIO-based long-polling.messaging. and for AIR applications. server. The Data Management service provides client and server-side code to help you build applications that provide real-time data synchronization between client. <s:Application xmlns:fx="http://ns.messaging. and deletions). adobe.AsyncMessage.body+"\n".text="". to recognize and handle data conflicts.body=msg.adobe. to make calls to retrieve and persist data on the server. The Data Management service on the server handles checking for conflicts.text. local data synchronization for occasionally connected applications.headers. transaction-oriented applications without having to write so much code. } ]]> </fx:Script> <fx:Declarations> <s:Producer id="producer" destination="chat"/> <s:Consumer id="consumer" destination="chat" message="consumer_messageHandler(event)"/> </fx:Declarations> <s:TextArea id="messageDisplay" width="400"/> <s:TextInput id="username" x="0" y="160"/> <s:TextInput id="msg" x="136" y="160"/> <s:Button label="Send" click="button1_clickHandler(event)" x="272" y="160"/> </s:Application> For more information about using the messaging service.adobe.com/flex/spark" xmlns:mx="library://ns. } protected function consumer_messageHandler(event:MessageEvent):void{ messageDisplay. data replication. using a combination of remoting and messaging.headers. applications for which data changes made in one client are "instantly" seen by other clients viewing the same data. producer. to send messages to other clients when the data has changed. A basic application sends.username+": "+event. To help you more quickly and easily build these types of dataintensive. on-demand data paging. } protected function button1_clickHandler(event:MouseEvent):void{ var message:AsyncMessage=new AsyncMessage().text.events. message.com/flex/mx" creationComplete="application1_creationCompleteHandler()"> <fx:Script> <![CDATA[ import mx. message. and pushing the data changes to simultaneously connected clients. receives. if you are using LiveCycle Data Services.messages.message. import mx. to make calls to retrieve and display this new data. msg. use AMF long-polling or AMF streaming with failover to long-polling. LiveCycle Data Services (and not BlazeDS) provides the Data Management service. Data managed applications You can build real-time data applications.message.com/mxml/2009" xmlns:s="library://ns.

The Java assembler class must extend an AbstractAssembler class provided with LiveCycle Data Services that has methods including fill(). you create a DataService object with its destination property set to a destination defined in the data-managementconfig. updated. which provides a bridge to the Hibernate object/relational persistence and query service. username.adapters. the RTMP channel discussed in Selecting a channelin the Messaging section of this article. to configure paging.ASObjectAdapter" default="true"/> <adapter-definition id="java-dao" class="flex. and more. you typically configure data management by defining destinations in a server-side configuration file.xml file. <service id="data-service" class="flex. session. etc.) and SQL statements (the SQL to execute when data is sent from the Flex application to be added. to specify security-constraints. By default.9/29/2010 The architecture of Flex and Java appli… Defining destinations Similar to how you configure remoting and messaging. and updateItem().adapters. <destination id="employeeService"> <adapter ref="java-dao"/> <properties> <source>adobe.data. and a default adapter.EmployeeAssembler</source> <metadata> <identity property="employeeId"/> </metadata> </properties> </destination> You can add additional properties to the destination definition to specify the scope the assembler is available in (request. The default configuration file defines a default channel. Instead.data. The SQLAssembler provides a bridge to a SQL database without requiring you to write the Java assembler code. in this case. If you are using Hibernate. you specify database info (url. The actionscript adapter is used for services that have no persistent data store on the server but instead manage data in the server's memory. you specify the assembler class that handles the data persistence and the property of the data objects that uniquely identifies an object. When defining a destination using the java-dao adapter. It uses the Hibernate mapping files to at runtime to execute the necessary SQL to persist data changes to the database. Below is a data management destination called employeeService that uses a Java class called EmployeeAssembler to persist data in a database table with a unique field employeeId. createItem(). deleteItem(). or deleted) right in the destination definition.xml. This assembler can be used for simple database models that do not have any nested relationships.DataService"> <adapters> <adapterdefinition id="actionscript" class="flex.JavaAdapter"/> </adapters> <default-channels> <channel ref="my-rtmp"/> </default-channels> </service> The adapter is responsible for updating the server-side data. you can use the HibernateAssembler.com/…/flex_java_architecture. which typically calls methods of a data access object (DAO) to persist data in a database. password. or application). You use the DataService fill() method to fetch data from the server and populate an ArrrayCollection with the data. Creating a managed data application To create a Flex managed data application that uses the LCDS Data Management service. the DataService commit() method is called whenever data changes adobe.data. The java-dao adapter passes the data changes to appropriate methods of a Java assembler class. driver. data-management-config. actionscript.samples.html 16/27 . LiveCycle Data Services also provides some standard assembler classes that you can use so you don’t have to write your own.

When changes are made to the data in the DataGrid.adobe.xml file and disable security by setting the useAppserverSecurity parameter to false (or alternatively.9/29/2010 The architecture of Flex and Java appli… in the ArrayCollection it manages.html 17/27 . set up and enable security). Generating client-side code using Flash Builder Instead of using the RemoteObject class (or other RPC classes) to make calls to server-side classes. You can build these types of applications even faster using the Adobe application modeling technology (code named Fiber).fill(employees)"> <fx:Declarations> <s:DataService id="employeeDS" destination="employeeService"/> <s:ArrayCollection id="employees"/> <valueObjects:Employee id="employee"/> </fx:Declarations> <mx:DataGrid dataProvider="{employees}" editable="true"/> </s:Application> For more information about using the Data Management service. see the Live Cycle Data Services documentation.cfm</url-pattern> </servlet-mapping> Once RDS is enabled for the server.adobe. To enable RDS access.com/mxml/2009" xmlns:s="library://ns. The RPC service wrapper classes have public methods with the same names as the corresponding server-side classes making development and debugging much simpler. RDS access must be enabled on the server so Flash Builder can introspect server-side Java classes and configuration files. you need to add and/or uncomment a mapping for the BlazeDS 4 or LiveCycle Data Services 3 RDSDispatchServlet in the web application's web.*" creationComplete="employeeDS. you learned to use the Remoting and Messaging services of BlazeDS and LCDS and the Data Management service of LCDS to build data-centric applications. which can be used to generate both client and server-side code.com/…/flex_java_architecture. adobe. a set of technologies that together enable model driven development for Flex applications.com/flex/mx" xmlns:valueObjects="valueObjects. <s:Application xmlns:fx="http://ns.servlet.rds. Here is a simple application that uses the employeeService Data Management destination to retrieve employee data from the database on the server and populate a DataGrid with that data.server. the changes are automatically persisted on the server and synchonized with any other instances of the client application. you can batch the calls by setting the DataService object's autoCommit property to false and then explicitly calling its commit() method. you can use Flash Builder to create ActionScript service wrapper classes and use these classes. In order to generate client-side code. Model driven development In previous sections of this article. <servlet> <servlet-name>RDSDispatchServlet</servlet-name> <displayname>RDSDispatchServlet</display-name> <servletclass>flex. To avoid excessive calls. you can generate ActionScript service wrappers in Flash Builder using the Data menu (see Figure 5).adobe.com/flex/spark" xmlns:mx="library://ns.FrontEndServlet</servlet-class> <init-param> <paramname>useAppserverSecurity</param-name> <param-value>false</param-value> </initparam> <load-on-startup>10</load-on-startup> </servlet> <servlet-mapping id="RDS_DISPATCH_MAPPING"> <servlet-name>RDSDispatchServlet</servlet-name> <urlpattern>/CFIDE/main/ide. 7.

The Flash Builder Data menu for creating client-side code.html 18/27 .9/29/2010 Data menu (see Figure 5). The architecture of Flex and Java appli… Figure 5. When selecting Connect to BlazeDS or Connect to LCDS. adobe. you will get a dialog box displaying all the server-side destinations defined in the configuration files (see Figure 6).com/…/flex_java_architecture.

com/…/flex_java_architecture.html 19/27 . The use of these generated client-side service wrapper and valueObject classes that map to the server-side classes greatly facilitates application development. adobe. You can then manipulate the same types of objects on the client and on the server and pass instances of them back and forth between the two. If you are using LCDS. the generated service classes use LiveCycle specific classes to also provide the additional data management features discussed previously.9/29/2010 The architecture of Flex and Java appli… Figure 6. The dialog box for selecting service destinations. Flash Builder generates ActionScript wrapper classes for the selected services and classes for the corresponding data transfer objects (also called value objects) manipulated by these classes (which often correspond to records in database tables) (see Figure 7).

You can use the Modeler to define a model based on an existing database and then have it generate and deploy the client-side code. In the services package.xml file. the _EntityNameEntityMetadata. The Adobe application modeling plug-in for Adobe Flash Builder (the Modeler) is a graphical modeling editor for defining data models and generating client and server-side code to manipulate these data models. The generated client-side classes.com/…/flex_java_architecture. you need to define your data source as a resource in your webapp. In order to use the Modeler.as class extends the super class and is intitially empty. the service class will have public methods with the same names as the corresponding server-side class methods. Or if you are starting from scratch and the database tables don't exist yet. In the valueObjects package. install adobe. This is the class you use in your code. This is the class you use in your code. In the case of RemoteObject.as class extends the RemoteObject or DataService class it is wrapping and defines the service methods.as class contains getters and setters for the data properties of an entity. you can use Flash Builder in conjunction with an additional Modeler plug-in to generate server-side code in addition to client-side code. the _Super_ServiceName.as class contains information about an entity (an object manipulated by the service class) and its relationship with other entities. you can use the Modeler to define a model and then have it generate the database tables in addition to generating the client and server-side code to manipulate this data.as class extends the super class and is initially empty. the server-side code. The EntityName. This file is not overwritten if you refresh the service to recreate the client-side code after changes have been made to the server-side service code. You can modify this class to customize the wrapper. and the serverside configuration files needed to manipulate this data.9/29/2010 The architecture of Flex and Java appli… Figure 7. Generating server-side code using LCDS and the Modeler plug-in If you are using LiveCycle Data Services. You modify this class to customize the generated value object class. The ServiceName.html 20/27 . The _Super_EntityName.

You can also use the Modeler Design mode tools to define entities and relationships if there are no corresponding database tables.9/29/2010 The architecture of Flex and Java appli… the Modeler in Flash Builder. The RDS Dataview view.com/…/flex_java_architecture. You can drag database tables from the RDS Dataview view to the Modeler Design view to define corresponding entities in your data model (see Figure 9). For detailed steps.html 21/27 . The RDS Dataview view displays SQL databases configured as JDBC datasources on the server (see Figure 8). You can then use the Modeler and its RDS Dataview view to create data models and generate client and server-side code. Figure 8. adobe. and configure RDS in Flash Builder. The Modeler Design view uses standard UML notation in its diagrams. see the tutorial Setting up model-driven development with LiveCycle Data Services ES2.

Figure 10. adobe. By default. The data model is stored as XML in a file with an FML extension.html 22/27 . and modify the settings. You can switch to the source mode of the Modeler view to look at the generated model XML code. Generated model code in the Modeler source mode. You can specify whether only server-side value objects corresponding to the entities in the data model are created or value objects and assembler classes to manipulate the value objects and persist them in the database are generated (see Figure 11). select Adobe > Data Model > Code Generation. To customize the generated code. you click the Modeler Generate Code button in the Modeler Design view. select Window > Preferences. no server-side code is generated.com/…/flex_java_architecture.9/29/2010 The architecture of Flex and Java appli… Figure 9. The Modeler Design view. To create code to manipulate the entities.

Example generated value object and assembler classes are show in Figure 12.com/…/flex_java_architecture.html 23/27 .9/29/2010 The architecture of Flex and Java appli… Figure 11. adobe. The dialog box for configuring the Modeler's generated code.

you can deploy Flex applications as local portlets on portal servers that implement the JSR 168 portlet specification or that support Web Services for Remote Portlets (WSRP). Messaging. 8.com/…/flex_java_architecture. The Flex application can be part of a LiveCycle Data Services application (for example. For more information about using moel driven development. To enable a Flex application to be deployed as a portlet. you need to copy and customize some files included in the LiveCycle Data Services /lcds/resources/wsrp/ directory and then follow the portal server's specific steps to set up the portlet. adobe. and IBM WebSphere Portal.9/29/2010 The architecture of Flex and Java appli… Figure 12. and/or Data Management services) but it does not have to be. Portal integration Using LiveCycle Data Services. using the Remoting. see the LiveCycle Data Services documentation. The generated server-side Java classes. BEA WebLogic Portal. this includes JBoss Portal.html 24/27 .

You need to copy this wsrp-jsp folder to the root of your web application and customize these pages for your application. use the links contained in the article and the following resources: Adobe Flex Developer Center Flex and Java on the Adobe Developer Center Flex Architecture on the Adobe Developer Center Adobe Data Services Developer Center BlazeDS on Adobe Open Source BlazeDS documentation Adobe LiveCycle Data Services ES2 documentation Adobe Flex 4 documentation More Like This flex_hibernate Integrating a simple Flex search application with Grails Choosing a Flex framework A survey of Inversion of Control frameworks for Flex The Flex. ) The flex-portal.jsp contains HTML and JavaScript for loading the application SWF and checking for the necessary version of Flash Player. the flex-messaging-common jar file must also be copied to there.jar file contains a GenericFlexPortlet class that handles all WSRP requests and returns appropriate HTML depending upon whether the view. If a minimized portlet is requested. edit.Part 6: Rapid and consistent development with Cairngorm and Flex The Flex. For additional information. When a specific view of the portlet is requested. You need to copy the flex-portal. or portlet mode is requested. Where to go from here This article discussed the architecture of Flex and Java applications. The portlet-view. the GenericFlexPortlet class delivers one of these JSP pages.html 25/27 . Spring.com/…/flex_java_architecture. The required LiveCycle Data Services files for deployment on portals. and can be accessed as FlexGlobals. The LiveCycle Data Services wsrp-jsp folder contains three JSP pages used for the view. The value for this requested window state is passed to the Flex application as a flashvar. (If LiveCycle Data Services is not being used on the server.9/29/2010 The architecture of Flex and Java appli… Figure 13. and help portlet view modes.parameters. or normal. minimized. Spring and BlazeDS full stack – Part 2: Writing the to-do list server The Flex.jar file to your web application's /WEB-INF/lib/ directory. and Hibernate JPA on Tomcat and MySQL – Part 2: Extending the demo to use linked database relations Developing Flex RIAs with Cairngorm microarchitecture . and BlazeDS full stack – Part 1: Creating a Flex module Object-oriented programming: Using inheritance wisely adobe. edit.topLevelApplication. BlazeDS. Spring and BlazeDS full stack – Part 3: Putting the application together Flex. Requests for a portlet specify whether the portlet should be maximized. the GenericFlexPortlet does not return a SWF because the user would not be able to interact with it anyways.PORTLET_WS allowing you to customize the application for the specific window state requested.

Comments (0) Comments There are no reviews yet.9/29/2010 The architecture of Flex and Java appli… Tutorials & Samples Tutorials Transitioning an application from Flex 3 to Flex 4 Flex.com/…/flex_java_architecture. and mobile Configuring Flash Builder 4 and Eclipse PHP development tools Samples DigiPri Widgets Sales Dashboard – Part 3: Understanding the dashboard application DigiPri Widgets Sales Dashboard – Part 4: Exploring the code in Flash Builder DigiPri Widgets Sales Dashboard – Part 1: Overview Flex User Forum More 09/2010 dataGrid itemEditor instances stay in memory. adobe.html 26/27 . How to remove them? 09/2010 Load content problem (address) 09/2010 Help:java. Be the first to rate and comment on this article.StackOverflowError 09/2010 Check Box in Datagrid Flex Cookbook More 09/2010 Handling database in Flash? (@everythingFLA) 09/2010 Adobe AIR and (Ext)GWT : Building for the Web and the Desktop using the same code and Java 09/2010 Selecting multiple dates in DateChooser just by clicking dates 09/2010 Combo box doesn't navigate entries with keyboard when first letter have diacritic.lang. PHP.

All rights reserved. Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-142009).com/…/flex_java_architecture. adobe.9/29/2010 The architecture of Flex and Java appli… Please sign in to improve or rate the content. Choose your region Security Contact Adobe Report piracy EULAs Permissions and trademarks Careers Copyright © 2010 Adobe Systems Incorporated.html 27/27 .

Sign up to vote on this title
UsefulNot useful