=====================
國際化介面(多國語言)
=====================

:doc:`develop` 章節裡,雖然我們己經成功了用源始碼編譯執行了libreCAD :ref:`大功告成`,但是發現畫面呈現英文介面. |哭哭| 
所以呢又得挑戰多國語言這個項目了,找一下 `官網多國語言的資料  <https://wiki.librecad.org/index.php?title=GUI_Translators>`_
覺得有點霧煞煞(茫然不知),好吧努力的再找相關的資料了.

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

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

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

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

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

.. figure:: ../img/i18n_001.png
   :scale: 50%
   
.. figure:: ../img/i18n_002.png
   :scale: 50%
   
.. figure:: ../img/i18n_003.png
   :scale: 50%

.. figure:: ../img/i18n_004.png
   :scale: 50%
   
.. figure:: ../img/i18n_005.png
   :scale: 50%

.. figure:: ../img/i18n_006.png
   :scale: 50%
   
.. figure:: ../img/i18n_007.png
   :scale: 50%

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

.. figure:: ../img/i18n_008.png
   :scale: 50%

建立表單元件  
-----------------------

.. figure:: ../img/i18n_009.png
   :scale: 50%

.. figure:: ../img/i18n_010.png
   :scale: 50%   

.. figure:: ../img/i18n_011.png
   :scale: 50%  

.. figure:: ../img/i18n_012.png
   :scale: 50%  

.. figure:: ../img/i18n_013.png
   :scale: 50%  

.. figure:: ../img/i18n_014.png
   :scale: 50%

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

.. figure:: ../img/i18n_016.png
   :scale: 50%
   
.. figure:: ../img/i18n_017.png
   :scale: 50%
   
.. figure:: ../img/i18n_018.png
   :scale: 50%
   
建立ts檔案 
--------------------


.. figure:: ../img/i18n_019.png
   :scale: 50%

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

.. literalinclude:: ../file/i18n.pro
   :language: c++
   :emphasize-lines: 22-23
   :linenos:

執行 ``lupdate.exe`` 產生ts檔案

.. figure:: ../img/i18n_020.png
   :scale: 50%

訊息框內顯示建檔完成

.. figure:: ../img/i18n_021.png
   :scale: 50%  
   
打開ts檔案翻譯成中文

.. figure:: ../img/i18n_022.png
   :scale: 50%  
   
執行 ``lupdate.exe`` 產生qm檔案,QT 多國語言就是讀qm檔.

.. figure:: ../img/i18n_023.png
   :scale: 50%    
   
編寫國際化程式
--------------------
.. important::
   在標頭檔內建立 ``setTranslato`` 函式,記得要 ``#include <QTranslator>``
   請看下面程式碼重點區.
   
.. literalinclude:: ../file/i18nwindow.h
   :language: c++
   :emphasize-lines: 5,18
   :linenos:

.. important::
   請參程式碼考重點區.

     - ``QTranslator`` 要載入qm檔,不用寫副檔名
     - ``QApplication::installTranslator(t)`` 應用程式載入語言包
     - ``ui->retranslateUi(this)`` ui重新更新語言包
      
.. literalinclude:: ../file/i18nwindow.cpp
   :language: c++
   :emphasize-lines: 3,17-21,25-28,33-36
   :linenos:

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

.. literalinclude:: ../file/main.cpp
   :language: c++
   :emphasize-lines: 3,7,10
   :linenos:

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

.. figure:: ../img/i18n_024.png
   :scale: 50%  
   
.. important::
   從這個多國語言的實作,很清楚的了解原來ts檔案是QT多國語言的檔案格式,他是由xml標記所定義,所以我們直接修改檔案的內容把需要翻譯的值填上去完成了第一個步驟.
   接著再把ts檔轉成qm檔案讓 ``QTranslator`` 這個類別可以載入.
   
翻譯LibreCAD
=======================
``liberCAD`` 提供一個 翻譯伺服器_ 翻譯各國語言,如果你想貢獻你的一份力量,
請先至網站註冊一個帳號,再至 `LibreCAD-翻譯討論區 <http://forum.librecad.org/LibreCAD-translate-f5710645.html>`_ po上你的申請,給管理者審核,審核通過你登入 翻譯伺服器_
,就可以線上翻譯了.

.. figure:: ../img/i18n_025.png
   :scale: 50% 
   
.. note::
   ``liberCAD`` 是使用Pootle這套線上翻譯軟體架設,libreOffice也是用這套軟體作多國語言伺服器.

下圖為libreCAD線上翻譯的畫面

.. figure:: ../img/i18n_026.png
   :scale: 50% 
   
從源始碼ts檔轉成qm
=======================
開啟QT載入libreCAD專案,如果你忘記了請參考 :ref:`配置libreCAD專案:`

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

.. literalinclude:: ../file/custom.pro
   :language: c++
   :emphasize-lines: 3
   :linenos:
   
執行 ``lupdate.exe`` 產生qm檔案.

.. figure:: ../img/i18n_027.png
   :scale: 50% 

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

.. important::
   路徑設定為 ``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)\LibreCAD\resources\qm
.. figure:: ../img/i18n_028.png
   :scale: 50% 
   
再啟動一次,換設定語言 ``繁體中文``

.. figure:: ../img/i18n_029.png
   :scale: 50% 

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

.. figure:: ../img/i18n_030.png
   :scale: 50% 

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

.. |哭哭| image:: ../img/cry.jpg
   :scale: 10%
   
.. |build| image:: ../img/i18n_015.png
   :scale: 60%
   
.. _翻譯伺服器: https://translate.librecad.org/projects/librecad/