Chat Translator – Example Application

In our previous posts you saw how to use our application template and how to test it. In case you missed them, you can check out those posts using the following links:

Using rounds template

Test your application locally and online

Now that you have learned the basics, we will give you further direction which will teach you how to develop a real world application. We are going to build a chat room that translates a users words in one language, to be sent to their opponent in their own language. How cool is that?!

For this example application, we will use Google Translate’s public API. You will need do download the following template in order to being working on the application:

Download template

As you can see, we have already built the UI for you.

Here you have the language combo boxes, text input, send button, and chat window. In the code, we have already populated the combos with four languages:  English, Japanese, Spanish and Russian.

private function setUI() : void {
	//Set reference to UI placed on stage to variables in this Class
	fromComboBox = from_combo_box;
	toComboBox = to_combo_box;
	chatWindow = chat_window;
	sendButton = send_button;
	textInput = input_field;
	//Set Combofields data
	var comboDataProvider 	:DataProvider = new DataProvider();
	comboDataProvider.addItem({value:"en", label:"English"});
	comboDataProvider.addItem({value:"ja", label:"Japanese"});
	comboDataProvider.addItem({value:"es", label:"Spanish"});
	comboDataProvider.addItem({value:"ru", label:"Russian"});
	fromComboBox.dataProvider 	= comboDataProvider;
	toComboBox.dataProvider 	= comboDataProvider;
}

Each language has its own value. We will use this value to inform Google what the original language is and what we are translating it to. Google supports several languages. You can find more info here:

http://code.google.com/apis/ajaxlanguage/documentation/referenceKeyboard.html

In order to talk with Google API we will need this:

private var googleAPI     :
        String = “http://ajax.googleapis.com/ajax/services/language/translate?v=1.0&q=”

googleAPI is the url of google service which will receive our data and translate it.

checkLocalVersion() is the function we are using for local testing. Basically, it checks whether our application receives any flashvar parameters.
We are using these parameters in our Emulator for local testing. If the applications receives user1 and user2 parameters it calls connectUsers() function from connection class.
In the video page, the real application, this function will not be called because you will not have those parameters there

In setConnectionListeners() we are adding the listeners for the collection.

private function setConnectionListeners() : void {
	connection.getSession().displayManager.setCursorFollowCanvas(this);
	connection.addEventListener(SixRoundsSessionEvent.OPPONENT_CONNECTED, cursorFollow);
	connection.addEventListener(SixRoundsSessionEvent.MESSAGE_RECEIVED, messageReceivedHandler);
}

Here we are using our connection class, which we created to make your life a bit easier. We include it in each template. ConnectionTemplate class makes it possible to perform basic operations with our SixRoundSession class. Essentially, it dispatches message related and connection related events. It is really handy if your application is not using VideoPage related functionality like gifts, for example.
Back to setConnectionListeners() …

First two lines take care of mouse follow functionality. We like to include it in all our applications because this way, the user can really feel when his opponent does something. It is not mandatory, so feel free not to use it.
The last line is the most important part of this application.

Here we set listener to SixRoundsSessionEvent.MESSAGE_RECEIVED event. This is the way you talk to your opponent with our API. You send him messages. Yes. We know. It is simple. Well not really, but lets say it is.

private function sendData(event : MouseEvent) : void {
	var header:URLRequestHeader = new URLRequestHeader("Content-Type", "charset=utf-8");
	translateString = googleAPI + escape(input_field.text) + "&langpair=" + String(from_combo_box.selectedItem.value)+"%7C"+String(to_combo_box.selectedItem.value)
	request = new URLRequest(translateString);
	request.requestHeaders.push(header);
	chat_window.htmlText += input_field.text;
	loader.load(request);
}

It is really important to escape the input text – escape(input_field.text) , and add UTF-8 header to the request – URLRequestHeader(“Content-Type”, “charset=utf-8″) !

It is important because Google translate service supports a lot of languages, and this is the only way it could understand all of them. In startChat() we added the handler for Event.COMPLETE event of the Google service.

private function translationCompleteHandler(event:Event):void {
	connection.sendMessage(JSON.decode((event.target as URLLoader).data).responseData.translatedText);
}

Here we use Adobe’s JSON decode class to parse the answer from Google and send our opponent a message with the translation. Lets take a second to see what’s happening in a connection class when we do it. So open com.gixoo.applications.developersApp.net.SixRoundsConnection ansd see what sendMessage() does.

public function sendMessage(str:String):void {
     var message:Message = New Message();
     var sendMessage : SendMessage;
     message.content = str;
     sendMessage = new SendMessage(message);
     session.run(sendMessage);
}

It takes the string you want to send, makes a message from it, and runs a SendMessage command.
So, this is it. This is suposed to be your result:

Download final application

Right now you should be able to compile your application and test it like we’ve explained here:

Local Testing for your multiuser application

Enjoy and tell us what you think!