[Mobile]Windows Mobile 6.5 Widget - Widget 結合 Bing API(JSON) 翻譯功能 | F6 Team - 點部落

2009-07-08

[Mobile]Windows Mobile 6.5 Widget - Widget 結合 Bing API(JSON) 翻譯功能

9114
0

最近微軟推出的Bing,其實有很多功能可以與WM6.5的Widget結合運用的
這篇就介紹如何使用Widget結合Bing API 的 Translation Service

最近微軟推出的Bing,其實有很多功能可以與WM6.5的Widget結合運用的

這篇就介紹如何使用Widget結合Bing API 的 Translation Service

首先要了解Bing API可以做到什麼,先看 lolota 的文章,推薦下列幾篇不錯的文章：

Bing API開發初體驗 , Bing API - Translation Service

這個範例主要是送出要翻譯的字串,透由Bing API送回JSON格式的結果

此範例拿MSDN的Sample Code來修改→JSON Code Sample (Translation SourceType)

並且結合Widget的Menu,可以選擇要由什麼語系翻譯成什麼語系

Widget.htm

<html> <head> <title>Windows Mobile 6.5 Widget & Bing API 2.2 Translation Sample</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> // Replace the following string with the AppId you received from the // Bing Developer Center. var AppId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; //"這裡填入申請的AppId"; var SourceLanguage = "es"; //來源語系 var TargetLanguage = "en"; //目標語系 // Bing API 2.2 code sample demonstrating the use of the // Translation SourceType over the JSON Protocol. function Search() { var requestStr = "http://api.bing.net/json.aspx?" // Common request fields (required) + "AppId=" + AppId + "&Query=" + txtInput.value + "&Sources=Translation" // Common request fields (optional) + "&Version=2.2" // SourceType-specific fields (required) + "&Translation.SourceLanguage=" + SourceLanguage + "&Translation.TargetLanguage=" + TargetLanguage // JSON-specific request fields (optional) + "&JsonType=callback" + "&JsonCallback=SearchCompleted"; var requestScript = document.createElement("script"); requestScript.type = "text/javascript"; requestScript.src = requestStr; var head = document.getElementsByTagName("head"); head[0].appendChild(requestScript); } function SearchCompleted(response) { var errors = response.SearchResponse.Errors; if (errors != null) { // There are errors in the response. Display error details. DisplayErrors(errors); } else { // There were no errors in the response. Display the // Translation results. DisplayResults(response); } } function DisplayResults(response) { ClearOutput(); var output = document.getElementById("output"); var resultsHeader = document.createElement("h4"); var resultsList = document.createElement("ul"); output.appendChild(resultsHeader); output.appendChild(resultsList); var results = response.SearchResponse.Translation.Results; // Display the results header. resultsHeader.innerHTML = "Bing API Version " + response.SearchResponse.Version + "<br />Translation results for " + response.SearchResponse.Query.SearchTerms + "<br />"; // Display the Translation results. var resultsListItem = null; for (var i = 0; i < results.length; ++i) { resultsListItem = document.createElement("li"); resultsList.appendChild(resultsListItem); resultsListItem.innerText = results[0].TranslatedTerm; } } function DisplayErrors(errors) { ClearOutput(); var output = document.getElementById("output"); var errorsHeader = document.createElement("h4"); var errorsList = document.createElement("ul"); output.appendChild(errorsHeader); output.appendChild(errorsList); // Iterate over the list of errors and display error details. errorsHeader.innerHTML = "Errors:"; var errorsListItem = null; for (var i = 0; i < errors.length; ++i) { errorsListItem = document.createElement("li"); errorsList.appendChild(errorsListItem); errorsListItem.innerHTML = ""; for (var errorDetail in errors[i]) { errorsListItem.innerHTML += errorDetail + ": " + errors[i][errorDetail] + "<br />"; } errorsListItem.innerHTML += "<br />"; } } function ChangeLanguage(S, T) { SourceLanguage = S; TargetLanguage = T; language.innerHTML = SourceLanguage + " to " + TargetLanguage; } function ClearOutput() { output.innerHTML = ""; } </script> </head> <body> <div id="language"></div> <input id="txtInput" type="text" /><input id="btnTranslation" type="button" value="Translation" onclick="Search()" /> <div id="output"> </div> </body> </html> <script type="text/javascript"> ChangeLanguage("es", "en");//預設為es to en //建立一個es→en的MenuItem var menuItem1 = widget.menu.createMenuItem(1001); menuItem1.text = "es to en"; menuItem1.onSelect = function() { ChangeLanguage("es", "en") }; widget.menu.append(menuItem1); //建立一個en→es的MenuItem var menuItem2 = widget.menu.createMenuItem(1002); menuItem2.text = "en to es"; menuItem2.onSelect = function() { ChangeLanguage("en", "es") }; widget.menu.append(menuItem2); </script>

按Translation後,會利用api的url加上一些查詢與設定參數取得JSON格式的結果,然後輸出翻譯結果

http://api.search.live.net/json.aspx?AppId=Insert your AppId here&Query=espero&Sources=Translation&Version=2.2&Market=en-us&Options=EnableHighlighting&Translation.SourceLanguage=es&Translation.TargetLanguage=en&JsonType=callback&JsonCallback=SearchComplete

JSON格式的結果如下：

if(typeof SearchComplete == 'function') SearchComplete({ "SearchResponse":{ "Version":"2.2", "Query":{ "SearchTerms":"espero" }, "Translation":{ "Results":[ { "TranslatedTerm":"I hope " } ] } } } /* pageview_candidate */ );

執行結果:

參考網址：
http://www.dotblogs.com.tw/lolota/archive/2009/06/11/8789.aspx
http://www.dotblogs.com.tw/lolota/archive/2009/06/18/8890.aspx

http://msdn.microsoft.com/en-us/library/dd877892.aspx
http://msdn.microsoft.com/en-us/library/dd877846.aspx

回首頁