How-To Develop Flex Blogging Application with Google Translate Service

gTranslate Component from kCodebook
gTranslate Component from kCodebook

I needed a translation component for a web application I was building in Adobe Flex (Flash). I came across this component called gTranslate by kCodebook Software. It is powered by Google Translate. In addition, through its public properties, I was able to alter the colors of the labels and size not to mention the fonts and background colors.

After unpacking the Zip file, I added a reference to my project. I dragged and dropped the gTranslate component on my canvas and set its properties. Since my application was a simple interface to an internal blog, I added the component to the same module as the editor for easy access by the users.

For the gTranslate component I set the property values as follows:

<g:gTranslator 
		backgroundColor="#2A3D5B" 
		width="312" 
		height="310"		
		fromCombo_FontFamily="Arial"
		fromCombo_FontSize="10" 
		backgroundAlpha="0.76"
		fromLabel_heigth="25"
		fromLabel_FontSize="10"	
		fromLabel_Opaqueness="1.0"
		btnTranslate_y="275"
		btnReset_y="275"
		borderColor="#3F9CDE" 
		cornerRadius="8" 
		borderStyle="solid" 
		fromLabel_FontColor="0x3BB9FF"
		toLabel_FontColor="0x3BB9FF"
		frTextFieldLabel_FontColor="0x3BB9FF"
		toTextFieldLabel_FontColor="0x3BB9FF" 		
		 x="932" y="10">		
</g:gTranslator>

The result can be seen in the screenshot above.

Next I added a RichTextEditor, a couple of buttons: one to actually save the post to the internal Blogging application another one to translate the title update and finally one to translate the contents of the blog. 

I need to paste the contents of the title field and consequently the Blog Text Editor to the kCodebook gTranslate component, so I added a bit of ActionScript code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:g="*" width="1280" height="928" creationComplete="Init()">
<mx:Script>
	<![CDATA[
		[Bindable]
		private var translatorText:String;
		
		
		private function CopyTitleToTranslator():void
		{
			translatorText = this.title.text;		
		}
		private function CopyBlogToTranslator():void
		{
			translatorText  = blog.text;			
		}
		private function Init():void
		{
			var translate:gTranslator = new gTranslator();
		}
	]]>
</mx:Script>
<mx:Canvas width="98%" height="899" x="10" y="10">
	<g:gTranslator 
		backgroundColor="#2A3D5B" 
		width="312" 
		height="310"		
		fromCombo_FontFamily="Arial"
		fromCombo_FontSize="10" 
		backgroundAlpha="0.76"
		fromLabel_heigth="25"
		fromLabel_FontSize="10"	
		fromLabel_Opaqueness="1.0"
		btnTranslate_y="275"
		btnReset_y="275"
		borderColor="#3F9CDE" 
		cornerRadius="8" 
		borderStyle="solid" 
		fromLabel_FontColor="0x3BB9FF"
		toLabel_FontColor="0x3BB9FF"
		frTextFieldLabel_FontColor="0x3BB9FF"
		toTextFieldLabel_FontColor="0x3BB9FF" 		
		 x="932" y="10"
		 fromText="{translatorText}"
		 >		
	</g:gTranslator>
	<mx:RichTextEditor x="0" y="70" title="Blog" width="909" height="819" id="blog">
	</mx:RichTextEditor>
	<mx:Button x="872" y="9" label="Post"/>
	<mx:TextInput x="10" y="40" width="899" id="title"/>
	<mx:Label x="10" y="10" text="Post Title" width="357" height="22" fontWeight="bold" fontSize="11"/>
	<mx:Button x="609" y="9" label="Translate Title" click="CopyTitleToTranslator()"/>
	<mx:Button x="723" y="9" label="Translate Blog Entry" click="CopyBlogToTranslator()"/>
</mx:Canvas>
	
</mx:Application>

More by this Author


Comments

No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working