國際化介面(多國語言)

開發 librecad 章節裡,雖然我們己經成功了用源始碼編譯執行了libreCAD 大功告成,但是發現畫面呈現英文介面. 哭哭 所以呢又得挑戰多國語言這個項目了,找一下 官網多國語言的資料 覺得有點霧煞煞(茫然不知),好吧努力的再找相關的資料了.

提示

官網說明翻譯GUI界面不需要程式編寫的技巧,所有選單列,訊息,命令都定義源始碼和資源檔內,網站又說明,在一些情況下,有C++基本的資識是有幫助的.

在初學者的角度裡這裡大概會卡關吧!這裡我分成二個主題說明,第一個主題是QT寫程式所用的多國語言的方式,第二個部份才是官網所使用的多國語言伺服器供大家去作翻譯.

QT 多國語言

多國語言主要是 QTranslator 類別來載入語言檔 load , 應用程式 QApplication 再用 installTranslator 安裝語言檔, 但是如果你在 ui 界面更換語言的話則需要更新ui的語言 ui->retranslateUi(this)

上一段看起來很繞口,其實已經說明所有步驟了,以下將一步步建立專案來實作多國語言.

建立專案

在這我們建之一個應用程式的專案,請依下圖方式來作

../_images/i18n_001.png
../_images/i18n_002.png
../_images/i18n_003.png
../_images/i18n_004.png
../_images/i18n_005.png
../_images/i18n_006.png
../_images/i18n_007.png

建立完成如上圖,接著查一下 D:\i18n 目錄內應該自動建立下面檔案

../_images/i18n_008.png

建立表單元件

../_images/i18n_009.png
../_images/i18n_010.png
../_images/i18n_011.png
../_images/i18n_012.png
../_images/i18n_013.png
../_images/i18n_014.png

重要

先在 D:/i18n 內建立 build 資料夾 . build

../_images/i18n_016.png
../_images/i18n_017.png
../_images/i18n_018.png

建立ts檔案

../_images/i18n_019.png

i18n.pro 新增中文 i18n_zh_tw.ts 及英文 i18n_en.ts ,如下面重點區部份

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#-------------------------------------------------
#
# Project created by QtCreator 2018-12-30T14:50:15
#
#-------------------------------------------------

QT       += core gui

greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

TARGET = i18n
TEMPLATE = app


SOURCES += main.cpp\
        i18nwindow.cpp

HEADERS  += i18nwindow.h

FORMS    += i18nwindow.ui

TRANSLATIONS = i18n_zh_tw.ts \
               i18n_en.ts

執行 lupdate.exe 產生ts檔案

../_images/i18n_020.png

訊息框內顯示建檔完成

../_images/i18n_021.png

打開ts檔案翻譯成中文

../_images/i18n_022.png

執行 lupdate.exe 產生qm檔案,QT 多國語言就是讀qm檔.

../_images/i18n_023.png

編寫國際化程式

重要

在標頭檔內建立 setTranslato 函式,記得要 #include <QTranslator> 請看下面程式碼重點區.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#ifndef I18NWINDOW_H
#define I18NWINDOW_H

#include <QMainWindow>
#include <QTranslator>

namespace Ui {
class I18nWindow;
}

class I18nWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit I18nWindow(QWidget *parent = 0);
    ~I18nWindow();
    void setTranslator(QTranslator *translator);

private slots:
    void on_EnRdoBtn_clicked();

    void on_TwRdoBtn_clicked();

private:
    Ui::I18nWindow *ui;
};

#endif // I18NWINDOW_H

重要

請參程式碼考重點區.

  • QTranslator 要載入qm檔,不用寫副檔名
  • QApplication::installTranslator(t) 應用程式載入語言包
  • ui->retranslateUi(this) ui重新更新語言包
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#include "i18nwindow.h"
#include "ui_i18nwindow.h"
#include <QTranslator>

I18nWindow::I18nWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::I18nWindow)
{
    ui->setupUi(this);
}

I18nWindow::~I18nWindow()
{
    delete ui;
}

QTranslator *t;

void I18nWindow::setTranslator(QTranslator *translator){
    t = translator;
}

void I18nWindow::on_EnRdoBtn_clicked()
{
    QApplication::removeTranslator(t);
    t->load("D:/i18n/i18n_en");
    QApplication::installTranslator(t);
    ui->retranslateUi(this);
}

void I18nWindow::on_TwRdoBtn_clicked()
{
    QApplication::removeTranslator(t);
    t->load("D:/i18n/i18n_zh_tw");
    QApplication::installTranslator(t);
    ui->retranslateUi(this);
}

重要

設定translator物件傳入ui介面,請參考程式碼重點區.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
#include "i18nwindow.h"
#include <QApplication>
#include <QTranslator>

int main(int argc, char *argv[])
{
    QTranslator translator;
    QApplication a(argc, argv);
    I18nWindow w;
    w.setTranslator(&translator);
    w.show();

    return a.exec();
}

接下來按綠色執行程式,然後點選選單按鈕就看到中英文切換了

../_images/i18n_024.png

重要

從這個多國語言的實作,很清楚的了解原來ts檔案是QT多國語言的檔案格式,他是由xml標記所定義,所以我們直接修改檔案的內容把需要翻譯的值填上去完成了第一個步驟. 接著再把ts檔轉成qm檔案讓 QTranslator 這個類別可以載入.

翻譯LibreCAD

liberCAD 提供一個 翻譯伺服器 翻譯各國語言,如果你想貢獻你的一份力量, 請先至網站註冊一個帳號,再至 LibreCAD-翻譯討論區 po上你的申請,給管理者審核,審核通過你登入 翻譯伺服器 ,就可以線上翻譯了.

../_images/i18n_025.png

備註

liberCAD 是使用Pootle這套線上翻譯軟體架設,libreOffice也是用這套軟體作多國語言伺服器.

下圖為libreCAD線上翻譯的畫面

../_images/i18n_026.png

從源始碼ts檔轉成qm

開啟QT載入libreCAD專案,如果你忘記了請參考 配置libreCAD專案:

打開 custom.pro 新增翻譯檔ts的位置 TRANSLATIONS = librecad/ts/librecad_zh_tw.ts

1
2
3
BOOST_DIR = C:/boost/boost_1_69_0/
BOOST_LIBDIR = C:/boost/boost_1_69_0/
TRANSLATIONS = librecad/ts/librecad_zh_tw.ts

執行 lupdate.exe 產生qm檔案.

../_images/i18n_027.png

執行libreCAD,並設定的翻譯的路徑

重要

路徑設定為 D:\libreCAD\src\LibreCAD\librecad\ts;D:\libreCAD\src\LibreCAD\librecad\ts\librecad_zh_tw.qm

  • 這裡一個是目錄一個為qm檔案且有分號隔開,在libreCAD文件說明中並無特別的說明,所以從source code中了解,目錄指定qm的目錄,檔案則是會顯示在語言的下拉式選單,如果沒有放進去就無法選擇繁體中文
  • 安裝libreCAD時會自動設定qm目錄,如果己經有的語言你再次設定在別的目錄,會失效,因為預設第一個讀的路徑在C:Program Files (x86)LibreCADresourcesqm
../_images/i18n_028.png

再啟動一次,換設定語言 繁體中文

../_images/i18n_029.png

關閉 libreCAD 再次執行,就可以得到中文化面了.

../_images/i18n_030.png

備註

畫面沒有翻譯到的請參照前面所說的在ts檔加入翻譯,再產生qm檔這樣就可以了.個人覺得有中文對使用者來說是很重要的,以開發者的角度來說了解國際化的原理是蠻重要的. 花了很多時間在這個部份,雖然有點累但是又完成一項,還是蠻開心的.