using AJAX to dynamically translate a report
I decided to push the AJAX integration a little bit further...
Using jQuery and Google AJAX Language API, I was able to translate in "real time" a report. For my example, I decided to translate the records of a table containing the different states of the USA. I realize that this data is not the best for translation demonstration because many words are almost the same no matter what is the spoken language. To have better results, translate the data to Arabic, Chinese, Japanese or Korean.
You can try a working example of the Dynamic Translation w/ Google AJAX Language API demo.
1) Report (Region Definition)
Source:
N.B. I had to use the initcap function on my data. Google translation engine is case sensitive. (I need to find more documentation to help with this issue.)
2) Report (Column Attributes)
STATE_NAME_EN:
STATE_NAME:
3) Language Selection
I created a Select List item (P35_DST) inside my region "Translate". The options of this Select List are added dynamically when the "init_language_selection_tool" function is called.
4) JavaScript code
Web 2.0 offers lots of possibilities. Gotta try them all! ;)
I speak French and English. I would like to have feedback about the translation of the other languages.
Using jQuery and Google AJAX Language API, I was able to translate in "real time" a report. For my example, I decided to translate the records of a table containing the different states of the USA. I realize that this data is not the best for translation demonstration because many words are almost the same no matter what is the spoken language. To have better results, translate the data to Arabic, Chinese, Japanese or Korean.
You can try a working example of the Dynamic Translation w/ Google AJAX Language API demo.
1) Report (Region Definition)
Source:
SELECT st
,initcap(state_name) AS state_name_en
,initcap(state_name) AS state_name
FROM demo_states
N.B. I had to use the initcap function on my data. Google translation engine is case sensitive. (I need to find more documentation to help with this issue.)
2) Report (Column Attributes)
STATE_NAME_EN:
Column Formatting > CSS Class: translate_src
STATE_NAME:
Column Heading : State Name (<span id="src">english</span>)
Column Formatting > CSS Class: translate_dst
3) Language Selection
I created a Select List item (P35_DST) inside my region "Translate". The options of this Select List are added dynamically when the "init_language_selection_tool" function is called.
4) JavaScript code
<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1.2.6", {uncompressed:false});
// Load Google AJAX Language API
google.load("language", "1");
</script>
<script>
function translate_report(pFrom, pTo) {
if (pTo != '-1' && pTo != "") {
$(".translate_src").each(function(i){
var l_translation = $(this);
google.language.translate(l_translation.text(), pFrom, pTo, function(result) {
if (!result.error) {
l_translation.parent().next().children().text(result.translation);
}
});
});
$s('src',$('#P35_DST option:selected').text());
}
}
//overwrite existing $a_report function
function $a_report(G,D,F,C,A){
lThis=$u_js_temp_drop();
var B=$x("report_"+G+"_catch");
B.id="report_"+G+"_catch_old";
var E="p="+$v("pFlowId")+":"+$v("pFlowStepId")+":"+$v("pInstance")+":FLOW_PPR_OUTPUT_R"+G+"_";
if(!!A){
E+=A+"::RP&fsp_region_id="+G
}
else{
E+="pg_R_"+G+":NO&pg_max_rows="+F+"&pg_min_row="+D+"&pg_rows_fetched="+C
}
var H=new htmldb_Get(null,null,null,null,null,"f",E);
var I=H.get();
lThis.innerHTML=I;
B.innerHTML=$x("report_"+G+"_catch").innerHTML;
B.id="report_"+G+"_catch";
lThis.innerHTML="";
translate_report("en",$("#P35_DST").val());
return
}
function init_language_selection_tool() {
var dst = $x('P35_DST');
var i=0;
for (l in google.language.Languages) {
var lng = l.toLowerCase();
var lngCode = google.language.Languages[l];
if (google.language.isTranslatable(lngCode)) {
dst.options.add(new Option(lng, lngCode));
}
}
google.language.getBranding('branding');
}
function init_language_selection_event() {
$("#P35_DST").change(function(){
translate_report("en",$(this).val());
});
}
$().ready(function() {
init_language_selection_tool();
init_language_selection_event();
});
</script>
Web 2.0 offers lots of possibilities. Gotta try them all! ;)
I speak French and English. I would like to have feedback about the translation of the other languages.
Comments
Martin.
I would like to see this in a real application. It can be use for a translation application where you can upload an xliff file and do an automated translation process using the user predefined dictionary and Google Translate.
I like this tool: http://www.iadvise.be/XTra4o .
I think it should use my technique to help the translation process.
Patrick