ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

How-To Develop Flex Blogging Application with Google Translate Service

Updated on October 28, 2011
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>

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    Click to Rate This Article