[3.0]Automatic translation of ExtJs Components v1.5

[tomim]

INFO : 13.07.2009. From now source is hosted on http://code.google.com/p/extjsdyntran/

There is also client only version.It must be deployed to server also, but does not require serverside support (PHP or Java). Translations will be made directly from Google Translation Service. This is limited version with less features but it is zero configuraiton. Use it for testing and previewing this add-on.

Screencast can be found also on project download page.

Hi all,

I have created additional override to Ext.Component to implement translation functions to all GUI Ext components through Google Translation API.

These translation functions will call server side through ajax calls to translate field labels, titles, messages and other standard text properties of Ext GUI components.

Server side is written as Java Servlet and PHP using Google Translation API (Java and PHP version). So you can use which one you prefere.

I have noticed one problem with PHP. When server runs on intranet and use proxy to exit to Internet, PHP does not work?!?! I am not PHP developer so I am not using original PHP but Quercus PHP Java library so maybe the problem is in this library?!

Next version will contain server side cached translation to minimize calls to Google Translation Service. Automatic translation will be cached (saved to text file ) so admin can additionaly translate words that are not translated or quality of translation is not good enough.

Never the less this will help developers to add some degre of automatic translation of their projects.
There is only one line of code to call to start automatic translation.

setLanguage('CROATIAN');

See more in Ext.translate.js and attatched project.

Project is not finished yet but working example with sources you can find in the attachment.

After new version is finnished I will post new sources here.

Any ideas and suggestions are wery wellcome. :)

Update 02.07.2009.

In the attatchement one will find ziped Eclipse project that can be rebuilt and deployed on the Tomcat or any other java web server.

When you start the Tomcat and install the war file go to

http://localhost:8080/GoogleTranslation

Server side is written in Java but also the PHP version is available.
Caching is added (Java only) so already translated text is no longer sent to GT API.

For PHP version I'm using Resin Quercus java library (PHP engine 100% written in Java).
There is no need for PHP instalation.
For more info go to http://www.caucho.com/ and http://quercus.caucho.com/

Requirements : java jdk 1.5 ; Tomcat 5/6 ; Eclipse ; ExtJs 3.0

Install :
1. Unzip project in Eclipse workspace folder and import it.
2. Download resinn from http://www.caucho.com/download/resin-4.0.0.zip and copy all jar files from lib folder to project subfolder WebContent\WEB-INF\lib
3. Fix paths to libraries. (included in project subfolder WebContent\WEB-INF\lib).
4. Create new Server project; create server instance in Eclipse; add this project to Server instance
5. Create new empty Dynamic Web Project and copy EXTJS3 library inside WebContent folder. Deploy it to server instance also.
6. Start Tomcat in Eclipse and right click to index.html -> Run As -> Run on Server. File is in WebContent of this project.

IMPORTANT NOTE : Resin class com.caucho.vfs.HttpStream has a bug so you need to remove it from resin.jar (open with winzip or winrar).
When project is rebuilt, new replacement class will be used.
Source is included inside project. For more details see header in included HttpStream.java file.

Update 05.07.2009.

Added server side caching
Added autotranslate on component create
Added ExtJs Web Desktop demo with Google Translation
(for Web Desktop Demo , go to Start and Window 6 where you can change language)

Update 07.07.2009.
Source code optimization and smaller fixes.
Ext.MessageBox auto translation added.
Added client side caching object Ext.translate.Cache (not implemented yet). :(
Fixed bug in Web Desktop demo with Google Translation.

Update 10.07.2009.
Fixed minor bugs and implemented client side caching.

Update 13.07.2009.
New version with rewritten code and improved speed, now on Google code.

Update 21.07.2009.
Version 1.4 available for download.

Update 24.07.2009.
Video demoes added under download section on project page.

Update 12.08.2009.
Version 1.5 BETA available. For more info visit link on top of this post.

Update 30.09.2009.
Version 1.6 available. For more info visit link on top of this post.

[mystix]

wow... this looks real interesting.
is there any way to dump the contents of the cache?

[tomim]

wow... this looks real interesting.
is there any way to dump the contents of the cache?

Cached translation will be saved as text file so they can be easily reconfigured.
My idea is if browser send new request to the server for new GUI language...then server side program will search for words in cache and if not found, new translation request will be sent to the Google Translation Service.

New translation will be serialized back to cached txt file and to the browser .

Later on, developer can check translations in cached files (I will name it like ENGLISH.properties etc...).

[mystix]

you read my mind. :)

this has the potential to make (near) zero-config translations a reality.
(imagine -- no more plowing through locale files =P~ )

[tomim]

you read my mind. :)

this has the potential to make (near) zero-config translations a reality.
(imagine -- no more plowing through locale files =P~ )

;)
You are correct about near zero-config. It will be impossible to have 100% translation
but translation of original properties inside ExtJs componets should work nicely.

I have added caching (java only), Web Desktop Demo with Google Translation and some new updates in Ext.translate.js. Sources in first post of this thread are replaced with new version.

[tomim]

I have added new improved version.

Next step is to implement global client side cache. (new Ext.translate.Cache object is included)

Many object can have the same texts for the titles, field names etc. It is not needed to repeatedly call remote translation of already translated resources.

[tomim]

!!! NEW VERSION !!! Ext.translate 1.3

It has a lot of enhancements. Code is rewritten for usage of client side cache
for translated texts. There is many code optimizations to improve speed and
minimize remote calls. AJAX Calls are made on component init so all fields is translated
before component is rendered.(synchronous AJAX calls
using addon library ext-basex.js)

Code is now located on Google Code page... http://code.google.com/p/extjsdyntran/

[YYSAM]

!!! NEW VERSION !!! Ext.translate 1.3

It has a lot of enhancements. Code is rewritten for usage of client side cache
for translated texts. There is many code optimizations to improve speed and
minimize remote calls. AJAX Calls are made on component init so all fields is translated
before component is rendered.(synchronous AJAX calls
using addon library ext-basex.js)

Code is now located on Google Code page... http://code.google.com/p/extjsdyntran/

great, I will try it later. thanks so much!!

[Arno.Nyhm]

maybe you can attach some sample screenshots or sample translations to see what is translated and how is the quality of this.

how is the problem solved that technical things are a little bit different translatet than normal speach?


maybe you can also make connection to tools like babelzilla?
( see glossary of babelzilla http://www.babelzilla.org/index.php?option=com_glossary&Itemid=219 and an firefox extension using this https://addons.mozilla.org/de/firefox/addon/5810 )

[tomim]

maybe you can attach some sample screenshots or sample translations to see what is translated and how is the quality of this.

how is the problem solved that technical things are a little bit different translatet than normal speach?


You can download demoes and try. Translations are not always as expected. This is due to Google Translation Service quality. Manual correction is neccessary.

I am sure you are aware that there is no literaly and gramaticaly 100% correct automatic translation engine.

As I mentioned on project page, idea is to help developers to have some kind of solution for automatic loading of translations and applying them to Ext.Component elements. It is AJAXED, no need for loading locale.js files and refreshing whole page.

The whole concept is that application is developed on development environment. In process of development, you give support to some other languages simply by using this add on, selecting different language and translations will be done with help of some translation service (in this case Google Translation Service). Translated words are saved in text files on server side. In production environment is enough to copy translated text files (i need to put some documentatin how to do it :( ) and server side support I wrote will load those translated files on startup.When user selects one of supported languages, translations will be loaded dynamicaly from server side cache. It is faster than translating again from remote service. Also you can be sure that translations will be correct as they are loaded from already corrected translation files. You can also give support to any other language not supported by Google Translation Service by creating your own language text file.

For example...

For Kenian language you will create KENIAN.properties file and wrote some translations like
english word = kenian word

And add KENIAN in Ext.translate.languages.



maybe you can also make connection to tools like babelzilla?
( see glossary of babelzilla http://www.babelzilla.org/index.php?option=com_glossary&Itemid=219 and an firefox extension using this https://addons.mozilla.org/de/firefox/addon/5810 )

Thanks for ideas. It they support remote AJAX services I will look into this.

If that kind of plugins exists for all other browsers then my addon will not be neededd at all. :D On other hand, if you are running application in some company intranet (banks for example) which have firewalls blocking such services or using proxies for filtering urls and data, then that kind of addons for page translations are not good enough.

[tomim]

Update 21.07.2009.
Version 1.4 available for download.

Source can be downloaded from http://code.google.com/p/extjsdyntran/

For changes and incoming features look at http://code.google.com/p/extjsdyntran/wiki/Changes_14

[TheBerliner]

I would like to point readers who are interested in this subject to a different threat, which I had opened without being aware of this one here:
My initial post (http://extjs.com/forum/showthread.php?p=356654#post356654)
Detailed proposals on handling translations (http://extjs.com/forum/showthread.php?p=361529#post361529)

[Arno.Nyhm]

Thanks for ideas. It they support remote AJAX services I will look into this.

If that kind of plugins exists for all other browsers then my addon will not be neededd at all. :D On other hand, if you are running application in some company intranet (banks for example) which have firewalls blocking such services or using proxies for filtering urls and data, then that kind of addons for page translations are not good enough.

the idea is to make this as a translation service provider (and the firefox plugin only how to use the ajax server)

maybe your translation editor use this service as well.

[Arno.Nyhm]

You can download demoes and try. Translations are not always as expected. This is due to Google Translation Service quality. Manual correction is neccessary.

if you have some screen shots and examples then it is easy for people to see whats your tool do and how is a sample output.

thats more easy than install the demo. not everyone have the time and the tools to run the demo quickly.

[tomim]

if you have some screen shots and examples then it is easy for people to see whats your tool do and how is a sample output.

thats more easy than install the demo. not everyone have the time and the tools to run the demo quickly.

Hi Arno!

You read my mind. :)
I was thinking about your request posting some screenshots in the same moment I received your last post on email.
But video would be even beter. :) :) So there it is.

I have created 3 videos. You can download them from http://code.google.com/p/extjsdyntran/downloads/list

Video number 1 shows simple form translation.
Video number 2 shows WebDesktop demo with auto translation.
Video number 3 is demo of simple translation editor that will be available in version 1.5.

There are still some smaller bugs. I will give my best to fix them until next 1.5 version.

Tom

[Arno.Nyhm]

thx for the screencast.

very very impressive.

pls point in the first posting to this videos :-)
and also make a annotation about your client only example which i found also there :-)
very nice!

[tomim]

Added :D

I am also thinking about implementing Import/Export for translations from future tranlsation editor so they can be easily deployed from development to production environment.

[tomim]

Version 1.5 BETA available. For more info visit link on top of first post.

[tomim]

Hi to all,

New version is available with lot's of enhancements.
Java server side code is refactored, many bug fixes and improvements.

For more info go to http://code.google.com/p/extjsdyntran/

==Changes in v1.6==

* New feature - Internal Java servlet optimization. Servlet is replaced with generic command dispatcher servlet implementing action classes.
General servlet lib is in ws4is.servlets.engine package.
* New feature - Translation process on language change is modified. Server returns whole translation list for selected language.
Only untranslated texts are requested for remote translation. Faster language switching.
* New feature - More java code generalization, created StoreManager for creating custom translation stores
* New feature - Store translations to HSQLDB database, locally or remotely.
* New feature - Java side is rewritten to be much more modular; custom extensions support for translation services and store services
* New feature - New Ext Component Ext.translate.LanguageCombo an extension to IconCombo with automatic loading of translations for selected language
* Improvement - Ext.translate.Cache cookie caching optimization. Translation cached cookies are removed when page loads as every request sends cookies.
This will reduce request/response data size and response time. Translation cache cookies are stored again after page unload.
* Improvement - Gson library used for JSON
* Improvement - Java Logging framework added
* Improvement - Service and StoreManager parameters are now saved as JSON inside web.xml
* Improvement - Demo applications improved; MessageBox samples;
* Improvement - Translation Editor will now automatically start translating existing texts in browser cache to the selected language.
For example if loaded translations are for one language and user selects another language, all cached default translation values will be translated automatically to last selected language with help of Google TRanslation Service.
* Internal bug fixes in Ext.translate namespace - wrong JSON response parameter read for messages
* Internal bug fixes in Ext.translate cookies. Now they are stored per page not on the root
* Internal bug fixes in Ext.translate.Manager when call applyTanslation while previous call to the same function is still in progress
* Internal bug fixes in Ext.translate.Manager when updating translations to the server, call to eraseCookie without this keyword caused JavaScript errors
* Internal bug fixes in Translation Editor - response message now has OK button
* Internal bug fixes in Json response when escaping json strings.
* Internal changes in request protocol due to switch to the new dynamic HTTP request servlet dispatcher
* Server side optimizations to minimize AJAX translation response times
* Resin.jar removed from distribution - size reduced from 10MB to 2.5MB. Resin contains 100% PHP implementation in Java.

[sagardash]

Thanks for great code...

here i am not getting how to change language ..
if i will change in that drop down then field labels are getting invisible ...In default English is coming..
can you please help me regarding this...
i chaged here in Ext.translate.js.. Is there any add on i need to install in my system ?


Ext.translate.version ='1.8';
//JAVA support for AbstractAction class
Ext.translate.action = ['translateActions','editorActions','xferActions'];
Ext.translate.languages = ['ENGLISH', 'English', 'ux-flag-en'];
Ext.translate.customLanguages = ['ko', 'KOREAN', 'ux-flag-ko'];
Ext.translate.defaultLanguage = 'ENGLISH';

[tomim]

Hi, you don't need to change anything.

Did you try the web demo?
Korean is supported by default. See attached image.

Can you post header of your html or your Ext.onReady() code?