This tutorial shows you how to create a chat application in Flex using the messaging service of blazed.

First you can download here blazed. Note that the sources are also available

Server configuration

1 - In your home directory blazed, WEB-INF/flex/messaging-config.xml open the file in a text editor. If you use blazed with the integrated Tomcat server, the Web application is located here blazed: "install_dir / tomcat / webapps. The messaging-config.xml file contains configuration settings for the Messaging Service. If you open the file services-config.xml in the same directory, you will see that the file messaging-config.xml "is included by reference in this file. The file "services-config.xml" allows a configurationhaut level blazed. Generally, we refer to this file configuration file to define specific services such as messaging. It also defined settings such as systems "messaging channels and the security in this file.

2 - In the messaging-config.xml file, just before the item </ service>, add the following and save the file:

<destination id="chat"/>

3 - The destination defined on the server where the client will be released Flex and Flex which customers will be able to receive messages that have been published. Note that there is a default channel called my-polling-amf configured in the messaging-config.xml file. Blazed uses "channels" to send and receive data between the Flex client and the server. The default 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 probe the server for new messages that arrive at their destination. In addition to channels to "poll", blazed also provided channels that maintain the connection between clients and servers and for streaming data flow (streaming) between them.

4 - Start or re-boot your server application BlaseDS.

Client-side development in Flex

1 - In the Flex Builder 3, create a new project blazed as described here: http://learn.adobe.com/ ...

2-Name the project chat1.

3 - In the file chat1.mxml that Flex Builder created, you will create in the Flex client application that can publish messages to the chat destination and receive messages from the destination.

4 - Just before <mx:Application> element chat1.mxml in the file, add an element <mx:Script> empty. You can do this by copying the following code:

<mx:Script>

<[CDATA [

]]>

</ mx: script>

5 - Just before the item </ mx: Script>, add the following MXML code. This code creates a message producer and a Client. Producer sends messages to the destination and the customer subscribes and receives messages that are sent to the destination. In this application, we create objects Producer and Customer MXML, but like most objects Flex, you can create them in ActionScript.

<mx:Consumer id="consumer" destination="chat" message="messageHandler(event.message)"/>
<mx:Producer id="producer" destination="chat"/>

6 - Just below the element <mx:Consumer>, add the following MXML code. This code creates the user interface to input messages, send and view messages. The Panel holds child objects it contains. The ControlBar is also used for the layout. The TextArea to display messages in the destination. The TextInput control lets you enter messages. You then 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 - Copy the code following ActionScript in the CDATA section element <mx:Script>:

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 allows you to:

• Import Class and AsyncMessage interface IMessage, which are used in the method send ().
• Create method send () is called when clicking on the Button control. This method creates a new AsyncMessage and then assign a variable message to the type IMessage. This set the property value message.body.chatMessage the msg.text value - the text of the TextInput control. This method then calls the send () producer to send the message, and clear the Text property of the TextInput control.
• Established the method to retrieve the event messageHandler (). This method retrieves the event "message" when the client object receives the message from the destination. This method displays the text in message.body.chatMessage property log.text - TextArea control.
• Note: Because the method send () takes an IMessage as an argument in this example we explicitly typer AsyncMessage towards IMessage interface that is implemented. If you do not want this call producer.send () with an AsyncMessage, the conversion is done automatically.

8 - Add the following MXML attributes to the element <mx:Application> that the Flex client subscribes to the destination when you start the application:

creationComplete = "consumer.subscribe ()"

9 - The mx: Application should now look like this:

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

The MXML code is now complete!

10 - Make sure the server is running blazed.
11 - Compile and run the client application with Flex Builder by "Run> Run from the menu bar.
12 - Open the same URL in another browser.
13 - Enter a message in one window and should appear in another window.

And now for our first application using Adobe Flex Blazed!

I soon put a new online tutorial to show you how to generate web services with blazed ...

Source: Adobe Learn

If you come for the first time on Flex-info.fr, you can subscribe to the RSS feed. Thank you for your visit!