在Titanium应用中导入翻译的功能

有些应用中有追加翻译功能的需求,这回我们说说说如何在Titanium开发的应用当中,实现翻译功能。

我们采用调用Google的翻译API来实现。

(1)首先创建一个WebView用来显示翻译后的文字显示。
var tranlateView = Titanium.UI.createWebView({
	top:2,
	left:75,
	height:30,
	width:240,
	backgroundColor:'#FFFFFF', 
	url:'translate.html'
});


(2)在需要翻译功能的处理中追加一下代码
tranlateText.evalJS("javascript:translate('" + inMsg+ "')");

其中的inMsg就是需要翻译的文字。

其中的translate.html代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript">
	google.load("language", "1");
    function g_translate(strInput,out){
   
        google.language.translate(strInput, "ja-JP", "en", function(result){
          if (!result.error){
            document.getElementById(out).innerHTML=result.translation;
			}else
            document.getElementById(out).innerHTML=strInput;
        });
      } 
</script>
  
 
<body style="background-color:#fff">
<div id="show" style="font-size:16px; color:#666;"></div>
<script language="javascript">
function translate(strTranslate)
{
    document.getElementById("show").innerHTML="Translating.....";
    g_translate(strTranslate, "show");
}
</script>
</body>
</html>

google.language.translate的参数中设置你要翻译的语言。

=========================================
=========================================
说点翻译功能以外的话题,Titanium的evalJS函数是相当的了得,几近恐怖啊!为什么这么说了。因为它能直接操作Webview中的内容,就跟使用自己的Page一样。

比如:
以下是一个简单封装的浏览器,然后打开了一个通过日本的电车站名查询的页面。


如果我们在代码的最后追加一下代码:
webView.addEventListener('load',function(e){
	webView.evalJS( ' $("a:contains(\'上野駅\')").text("蒲田駅"); ' );		
});


那么我们在运行一次,你将看到的是:
在Titanium应用中导入翻译的功能

上野站已经被改成了莆田站了。

这是一个简单的例子,如果有人能够灵活的使用该功能,你将会有一些意想不到的收获!!

你可能感兴趣的:(mobile,Titanium,appcelerator,translate)