Thursday, November 27, 2008

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:
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.