Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

Auto Language Conversion : Google Translate + UI5

$
0
0

Its really awesome when it comes to the possibilities that SAP UI5 offers.

SAP UI5 has the capability to provide translatable texts SAPUI5 SDK - Demo Kit .

But the problem is you have to maintain the property/resource file for each and every language along with the text.

Although it is recommended from the quality & stability point of view , it includes a lot of manual effort.

 

What is the solution?

     Nowadays  you have google website translator which helps in translating your website without any effort.

    Website Translator

 

How it Works ?

     Google translator detects each and every div(inner HTML/ text) and send a post query which fetches the translated text and applies to the respective div.

     Since UI5 internally renders all the controls as HTML Div s , it is supposed to work with UI5 as well.

 

How do i implement ?

   




Step 1     :  Call the google translate JS file and initiate (in side HTML Header)

              

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script><script type="text/javascript">        var userLang = navigator.language || navigator.userLanguage || navigator.languages;         if (userLang.substr(0,2) != "en"){          function googleTranslateElementInit() {            new google.translate.TranslateElement({pageLanguage: 'en', layout:             google.translate.TranslateElement.FloatPosition.TOP_LEFT}, 'google_translate_element');           }         }        else {           document.getElementById("google_translate_element").style.display="none";          }</script>

   



Step 2   :        Now a default header will be applied by google, now to hide it insert the following css code snippet

 

            

<style type="text/css">iframe.goog-te-banner-frame{ display: none !important;}</style><style type="text/css">body {position: static !important; top:0px !important;}</style>

 


Step 3 :       Next we have to trigger the post based on the browser language.

                    To detect browser language you can use sap.ui.getCore().getConfiguration().getLanguage()

                    I have placed the function under the onAfterRendering life-cycle event which will be triggered after a delay of 3 second.

 

onAfterRendering:function(){        function changeLanguage() {            var jObj = $('.goog-te-combo');             var db = jObj.get(0);             var lang = sap.ui.getCore().getConfiguration().getLanguage()             jObj.val(lang);             var evt = document.createEvent("HTMLEvents");             evt.initEvent('change', true, true );
//             jObj.dispatchEvent(evt);             db.dispatchEvent(evt);        }                 setTimeout(changeLanguage, 3000)    },

Get Set Go >>>

Now everything is done and the ui5 app will detect the browser language and change the text accordingly.

 

How do i test it ?


     1.You can go to the browser and change the language settings.

     2. After the URI you can add a parameter ?sap-ui-language=de

 

    

Amazingly it gives a pretty accurate results for over 100+ languages , but sometimes the wordings may not have the proper context meaning

 

Results


German

 

Russian


Hindi

 

French

 

 

Hope the post is useful .

Thanks


Viewing all articles
Browse latest Browse all 789

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>