Published on dev2dev (http://dev2dev.bea.com/)
http://dev2dev.bea.com/pub/a/2008/01/flex-messaging-workshop.html
See this if you're having trouble printing code examples
by Jon Rose
01/29/2008
This tutorial shows how to use Flex's LiveCycle Data Services Express (DS) messaging features to implement "data push" in your Flex applications with the BEA Workshop Studio (Flex bundle). My aim is to develop a small Flex messaging application that sends and receives messages.
This tutorial demonstrates how to use messaging in Flex applications. The word "messaging" is rather generic, though. Here is how the Flex documentation defines the term:
Messaging systems let separate applications communicate asynchronously as peers by passing packets of data called messages back and forth through a Message Service. A message usually consists of a header and a body. The header contains an identifier and routing information. The body contains application data.
So, you will be building an application that allows you to asynchronously send data through the DS message service to our Flex client application. Here are some key DS messaging terms:
DS provides a number of useful features including: durable message queues, security, and external message system integration. DS is deployed as a WAR file that runs in any Java EE Servlet container, like Apache Tomcat or BEA WebLogic. The ActionScriptAdapter message provider does not require any additional Java EE features. This tutorial covers the setup and configuration to implement a very basic messaging application.
The following software products are used in this tutorial for building and running the messaging application:
In this tutorial, you'll learn how to create a simple Flex producer and consumer client. The Flex user interface runs on the client side in the Flash Player, while DS is the server-side gateway for sending and receiving messages to the Flex client application.
Multiple Flex clients can send and receive messages from the same message queue. The producer user interface will allow you to send messages to the destination, and the consumer user interface will receive the messages created—therefore demonstrating the "data-push" features of DS, as messages appear on the screen without any custom polling code.
Figure 1 provides an overview of the source files. In particular, I'll be looking at:
services-config.xml: Defines usage of the messaging-config.xml file and the channel definition messaging-config.xml: Defines the destination and adaptor flex_client.mxml: Client code that creates and receives messages Now I'll look at how to create the application.
The following sections look at creating the Flex project, configuring the application, and, finally, deploying and running the application.
Begin by downloading and installing the software in the Requirements section, and start BEA Workshop Studio. Next, create a new Flex Server project by importing the flex.war file. (This is installed with DS; you can get DS from the Requirements section.)
Now Select File→Import, and then select the WAR file option. Specify the location of the flex.war file that comes with DS (default windows location: C:\lcds\flex.war). Specify the name of the Web project as flex_server.
Finally, select Finish.
flex.war file from DS
Next, you'll configure the flex_server application for messaging. Setting up the server-side application for messaging involves configuring the message channel, endpoint, destination, and adaptor.
services-config.xml file. Edit the server-includes in the <services> section, so that only the messaging-config.xml is included as part of the configuration.
<services> <service-include file-path="messaging-config.xml" /> </services>
my-polling-amf channel created here will be used by the destination you'll configure in the messaging-config.xml file.
<channel-definition id="my-polling-amf" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://{server.name}:{server.port}/{context.root}/messagebroker/amfpolling"
class="flex.messaging.endpoints.AMFEndpoint"/>
<properties>
<polling-enabled>true</polling-enabled>
<polling-interval-seconds>1</polling-interval-seconds>
</properties>
</channel-definition>
For your reference, here is the full services-config.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service-include file-path="messaging-config.xml" />
</services>
<channels>
<channel-definition id="my-polling-amf" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://{server.name}:{server.port}/{context.root}/messagebroker/amfpolling"
class="flex.messaging.endpoints.AMFEndpoint"/>
<properties>
<polling-enabled>true</polling-enabled>
<polling-interval-seconds>1</polling-interval-seconds>
</properties>
</channel-definition>
</channels>
<logging>
<target class="flex.messaging.log.ConsoleTarget" level="Debug">
<properties>
<prefix>[Flex] </prefix>
<includeDate>true</includeDate>
<includeTime>true</includeTime>
<includeLevel>true</includeLevel>
<includeCategory>false</includeCategory>
</properties>
<filters>
<pattern>Endpoint.*</pattern>
<pattern>Service.*</pattern>
<pattern>Configuration</pattern>
</filters>
</target>
</logging>
<system>
<redeploy>
<enabled>false</enabled>
</redeploy>
</system>
</services-config>
messaging-config.xml file to configure the simple-topic destination, which is what the Flex Client application will reference for sending and receiving messages.
AsyncMessage class in the messageTypes.<service id="message-service" class="flex.messaging.services.MessageService" messageTypes="flex.messaging.messages.AsyncMessage"> </service>
simple-topic destination as a non-durable topic that uses the my-polling-amf channel defined in the services-config.xml file above. This is the message queue you'll send and receive messages with.
<destination id="simple-topic"> <properties> <network> <session-timeout>0</session-timeout> <throttle-inbound policy="ERROR" max-frequency="50"/> <throttle-outbound policy="REPLACE" max-frequency="500"/> </network> <server> <durable>false</durable> </server> </properties> <channels> <channel ref="my-polling-amf"/> </channels> </destination>
For your reference, here is the full messaging-config.xml file:
<?xml version="1.0" encoding="UTF-8"?>
<service id="message-service"
class="flex.messaging.services.MessageService"
messageTypes="flex.messaging.messages.AsyncMessage">
<adapters>
<adapter-definition id="actionscript"
class="flex.messaging.services.messaging.adapters.ActionScriptAdapter"
default="true" />
</adapters>
<destination id="simple-topic">
<properties>
<network>
<session-timeout>0</session-timeout>
<throttle-inbound policy="ERROR" max-frequency="50"/>
<throttle-outbound policy="REPLACE" max-frequency="500"/>
</network>
<server>
<durable>false</durable>
</server>
</properties>
<channels>
<channel ref="my-polling-amf"/>
</channels>
</destination>
</service>
|
Now you can create a server that will run the application:
Figure 3. Selecting the server that will run the application
Figure 5. Adding the project to the Configured projects list
Now you'll create the messaging client application.
Figure 6. Creating a Flex Project in BEA Workshop
Figure 7. Configuring how the Flex Client application will access data
Figure 8. Configuring the Flex Server information
|
Now you're in a position to create the client. Update the flex_client.mxml page created with the project as follows:
<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
pageTitle="Flex Messaging - Example Application"
creationComplete="mySubscriber.subscribe()">
<!-- Messaging Declarations -->
<mx:Producer id="myPublisher" destination="simple-topic" />
<mx:Consumer id="mySubscriber" destination="simple-topic"
message="receiveMessage(event)" />
<!-- UI Declarations -->
<mx:Panel title="Incoming Messages Panel">
<mx:TextArea id="output" backgroundColor="#eeeeee"
width="385" height="220" />
</mx:Panel>
<mx:Panel title="Input Panel (type your text and click enter)">
<mx:TextInput id="input" width="385" enter="sendMessage()" />
</mx:Panel>
<!-- Event-Handling Script -->
<mx:Script>
<![CDATA[
import mx.messaging.events.MessageEvent;
import mx.messaging.messages.AsyncMessage;
private function sendMessage():void
{
var msg:AsyncMessage = new AsyncMessage();
msg.body = input.text;
myPublisher.send(msg);
input.text = "";
}
private function receiveMessage(msgEvent:MessageEvent):void
{
var msg:AsyncMessage = AsyncMessage(msgEvent.message);
output.text += msg.body + "\n";
}
]]>
</mx:Script>
</mx:Application>
Let's look at what the code in flex_client.mxml does:
mx:Producer tag creates a class for receiving messages from the simple-topic queue.
mx:Consumer tag creates a class for creating messages from the simple-topic queue.
receiveMesssage(event) method is invoked when a new message is received from the destination. The function displays the output in the Incoming Messages Panel.
sendMessage() method is invoked when the input message is submitted. Each time it is called it creates a new message for the queue by sending it to the simple-topic queue on the server using the mx:Producer we created.
Let's now run the application! To start the server:
Figure 10. Starting the Tomcat server
flex_client.mxml file, and then choose Run As→Flex Application.
flex_client.mxml page
To use the application, enter your message text in the Input Panel, and then press Enter. This sends the messages to the simple-topic destination in the flex_server application.
The Consumer object, mySubscriber, receives the messages from the simple-topic destination, and then calls the receiveMessage function, which displays them in the Incoming Messages Panel.
Download the source code for the article:
You have built a basic Flex messaging application that sends and receives messages using the BEA Workshop Studio. DS provides the messaging capabilities and is very flexible. It allows you to implement asynchronous application communication with very little code or configuration. In addition to being able to use DS specific messaging, DS also enables Flex applications to participate in JMS messaging to easily integrate disparate systems.
From here, you are ready to learn more advanced ways to configure and use Flex messaging by referring to the documentation.
Jon Rose is a software engineer specializing in using Flex and Java for building enterprise applications.
Return to Dev2Dev.