Log In  
  Getting Started  
----------------------------------------

Resources

 

Creating a simple BlazeDS messaging application in Flex Builder

This tutorial walks you through how to create a very simple chat application that uses the BlazeDS Message Service.

previous page next page

User rating?

Server-side configuration

  1. In your copy of the blazeds web application, open the WEB-INF/flex/messaging-config.xml file in a text editor. If you are using BlazeDS with the integrated Tomcat server, the blazeds web application is located in install_dir/tomcat/webapps. The messaging-config.xml file contains configuration settings for the Messaging Service. If you open the services-config.xml file in the same directory, you will see that the messaging-config.xml file is included by reference in that file. The services-config.xml file is the top-level configuration file for BlazeDS. Generally, you reference configuration files for specific services, such as messaging, in this file. You also define system-wide settings such as messaging channels and security contraints in this file.
  2. In the messaging-config.xml file, just above the </service> element, add the following element and save the file:
    <destination id="chat"/>
    
  3. This destination on the server is where messages from Flex clients will be published and to which Flex clients will subscribe to receive the messages that are published.Note that there is a default channel called my-polling-amf configured in the messaging-config.xml file. BlazeDS uses "channels" to send data back and forth between Flex clients and the server. The actual channel is defined in the services-config.xml file and it is only referenced in the messaging-config.xml file. This particular channel uses the Action Message Format (AMF) and polls the server for new messages that have arrived at the destination. In addition to polling channels, BlazeDS also provides channels that hold a connection between clients and the server and stream data between them.
  4. Start or restart your application server.

Client-side development

  1. In Flex Builder 3, create a new BlazeDS project as described here:
    http://learn.adobe.com/wiki/display/Flex/Using+Flex+Builder+with+your+J2EE+server
  2. Name this project chat1.
  3. In the chat1.mxml file that Flex Builder creates, you will create a Flex client application that can publish messages to the chat destination and also subscribe to messages at the destination.
  4. Just below the <mx:Application> element in the chat1.mxml file, add an empty <mx:Script> element. You can do this by typing in the Flex Builder code view of the file, or by copying the following code:
    <mx:Script>
    	<![CDATA[
    
    	]]>
    </mx:Script>
    
  5. Just below the </mx:Script> element, add the following MXML code. This code creates a message producer and consumer. The producer sends messages to a destination and the consumer subscribes to and receives messages that are sent to this destination. In this application, we create a Producer and Consumer object in MXML, but as with most Flex objects, you can optionally create them in ActionScript.
    	<mx:Consumer id="consumer" destination="chat" message="messageHandler(event.message)"/>
    	<mx:Producer id="producer" destination="chat"/>
    
  6. Just below the <mx:Consumer> element, add the following MXML code. This code creates the user interface elements required to enter messages, send messages, and view received messages. The Panel container organizes the child objects that it contains. The ControlBar container is also for layout. The TextArea is where messages from the destination appear. The TextInput control is where you enter messages. You use the Button control to send messages to the destination.
    <mx:Panel title="Chat" width="100%" height="100%">
    	<mx:TextArea id="log" width="100%" height="100%"/>
    	<mx:ControlBar>
    		<mx:TextInput id="msg" width="100%" enter="send()"/>
    		<mx:Button label="Send B" click="send()"/>
    	</mx:ControlBar>
    </mx:Panel>
    
  7. Enter the following ActionScript code withing the CDATA section of the <mx:Script> element:
    import mx.messaging.messages.AsyncMessage;
    import mx.messaging.messages.IMessage;
    
    private function send():void{
    	var message:IMessage = new AsyncMessage();
    	message.body.chatMessage = msg.text;
    	producer.send(message);
    	msg.text = "";
    }
    private function messageHandler(message:IMessage):void{
    	log.text += message.body.chatMessage + "\n";
    }
    

    This code does the following:

    •  Imports the AsyncMessage class and IMessage interface, which are used in the send() method.
    • Creates the send() method that is called when the Button control is clicked. This method creates a new AsyncMessage and assigns it to the variable message which is of type IMessage . It sets the value of the message.body.chatMessage property to the value of the msg.text - the TextInput control's text property. It callse the Producer's send() method to send the message, and then empties the msg.text property.
    • Creates the messageHandler() event handler method. This method handles "message" events when the Consumer object receives a message from the destination. This method displays message.body.chatMessage text in the log.text property - the text property of the TextArea control. Note that the Consumer element's message property is set to the messageHandler() method.
      Note: Because the producer.send() method takes an IMessage as an argument in this example we explicitly cast AsyncMessage to the IMessage interface which it implements. If you don't do this and call producer.send() with an AsyncMessage, this conversion will happen automatically.
  8. Add the following MXML attribute the the mx:Application element so that the Consumer subscribes to the destination when the application starts:
    creationComplete="consumer.subscribe()"
    

    The mx:Application element should now look like this:

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="consumer.subscribe()">
    

    The MXML code is now complete.

  9. Make sure that your BlazeDS server is running.
  10. Compile and run the client application in Flex Builder by selecting Run > Run from the menu bar.
  11. Open the same URL in a second browser window.
  12. Enter messages in one of the two windows, and they should appear in the other window.
previous page next page

Added by Mike Peterson , last edited by Hal Lichtin on Feb 25, 2008  (view change)
Labels: 
(None)

Powered by Atlassian Confluence 2.7.1, the Enterprise Wiki. Bug/feature request - Atlassian news - Contact administrators