QtQuick2實作英漢翻譯--背景調用百度翻譯接口

按例，先放效果圖吧.....本例子使用百度翻譯的接口，實作了文字翻譯和詞典查詢

翻譯界面，翻譯的英語内容不忍直視，嘛~這也就是這樣了。免費的東西就是這樣啦~

中文詞典查詢

英語單詞查詢

自然是先從界面建構講起啦

本程式是典型的TabView，即标簽視圖，點選一個标簽，就切換到對應标簽的視圖。本例軟體界面是參照有道翻譯

先說說TabView這個控件吧

TabView {
    Tab {
        title: "Red"
        Rectangle { color: "red" }
    }
    Tab {
        title: "Blue"
        Rectangle { color: "blue" }
    }
    Tab {
        title: "Green"
        Rectangle { color: "green" }
    }
}
           

用法如上，效果圖如下:

這樣就簡明直了了。

Tab這個控件，有title屬性，表示其标簽，繼承自Loader，Tab所帶的内部視圖對象對自動合适的填充到TabView。

可以為TabView設定style，具體就看看Qt的文檔吧。

主要的界面就講完了，講講各标簽頁内的布局吧：

先看翻譯這個頁面，有使用者輸入，文字的翻譯方向，點選翻譯的按鈕。布局大體就是用Column和Row。

關于Button這個控件，在Qt5.4中是可以帶菜單的，如下展示:

(QtQuick.Controls 這個子產品提供了接近于Qt Widget 的實作)。

界面大概就是這樣，講講業務邏輯吧

大概的業務邏輯或許如下：

1）使用者輸入并送出==>

2）背景接受使用者輸入并送出到百度伺服器==>

3） 等待接受來自百度伺服器的響應==>

4）将接受到來自伺服器的原始資料适當的進行解析變成使用者可見的資料==>

5）将資料展示給使用者

先從第一步開始講吧，使用者輸入并送出，此時背景有個對象接受資料。

将接受到的資料發送到伺服器，然後等待伺服器響應

代碼的話，其實是js中的XMLHttpRequest對象，大緻代碼如下

function startTranslater(){
        var translateUrl = String("http://openapi.baidu.com/public/2.0/translate/dict/simple");
        var doc = new XMLHttpRequest();
        doc.onreadystatechange =
                function() {
                    if (doc.readyState == XMLHttpRequest.DONE) {
                        if(doc.status == 200){
                            //console.debug(doc.responseText);
                            getResult(doc.responseText);
                        }else {
                            console.log("status:"+doc.status);
                        }
                    }
                }
        doc.open("GET", translateUrl+"?client_id="+apiKey+"&q="+translateSource+"&from="+from+"&to="+to);
        doc.send();
    }
           

然後，在擷取正确的響應時，将原始的資料進行适當的加工，讓使用者可以看到(傳回的資料是json資料，需要進行提取，然後進行加工，這裡對提取的資料添加html标簽以擷取更好的顯示效果)，代碼如下:

function getResult(result_json_text){
        var jsonObj = JSON.parse(result_json_text);
        if(jsonObj.hasOwnProperty("errno")){
            if(jsonObj.errno !== 0){
                dict.error_code = jsonObj.errno;
                hasError = true;
                return "";
            }
        }

        if(jsonObj.hasOwnProperty("data")){
            // clear
            translateResult = "";
            var s1 = "";
            var s2 = "";
            var i,j;

            for(j=0; j<jsonObj.data.symbols.length;j++){
                s1 += "<p><h1>"+jsonObj.data.word_name+"</h1></p>"
                       +"<p> 美 ["+jsonObj.data.symbols[j].ph_am+"]"+" / "+"英 ["
                       +jsonObj.data.symbols[j].ph_en+"]"
                       +" / 拼 ["+ jsonObj.data.symbols[j].ph_zh+"]"
                       +"</p>";
               for(i=0; i<jsonObj.data.symbols[0].parts.length;i++){
                   s2 += "<p>"+jsonObj.data.symbols[0].parts[i].part + " "
                               +jsonObj.data.symbols[0].parts[i].means+"</p>";
               }
               translateResult += s1+s2;
               s1 = "";
               s2 = "";
            }

            dict.finish();
            return translateResult;
        }
        return "";
    }
           

大概就是上面這些了吧~具體可以看看源碼，下載下傳在下面，不用積分~

有興趣的可以檢視百度翻譯api文檔，via

照例，放出源碼下載下傳 via