軟體工程中有所謂的 MVC 模式 (Model-View-Controller) , M 就是我們發展好的 Encrypt 類別 (class) ,而 V 就是使用者介面,至於 C 則是控制 M 與 V 之間的物件 (object) ,三者在物件導向 (object-oriented) 觀念裡都應該是獨立個別的物件
View → 使用者介面的類別
Controller → 控制 M 與 V 之間交流的類別
使用者介面可以利用 Qt 的 Designer 或自己手動刻,完全手動自己刻的話,規模小的程式容易把 V 跟 C 混在一起,或是 M 、 V 、 C 都湊合定義在同一個類別,倒不是不可以,我們卻不鼓勵這麼做,主要因為在發展大型程式的時候, M 、 V 、 C 任何一部分有問題,或是需要除錯都可以分開進行。
怎麼說呢?想像開發好的 M 、 V 、 C 的程式碼都超過 300 行,如果都混在同一個類別裡,那個類別的實作檔案可能有超過 1000 行程式碼,如果一個地方有問題,最怕是語意錯誤 (semantic error),就得仔細檢查超過 1000 行的程式碼,慢慢找錯誤出來,幸運一點就都是自己寫的,還比較容易找錯誤。
可是實際上一個大型軟體動輒都是數十萬到數百萬行程式碼,而且很多都是自己加入某個開發專案,這麼一來,如果這個專案是個古老的舊專案,完全沒有用軟體工程 (software engineering) 研究出來的方式維護程式碼,那真的要除掉一個 bug 得耗費許多心力。
因此學習開發軟體不外就先建立 MVC 開發模式的觀念囉! Qt Creator 提供視覺化的方式設計圖形使用者介面 (graphical user interface) ,這是利用 .ui 檔案進行視窗元件的編排,編輯 .ui 檔案就會編譯成實際的執行檔,這也就是 MVC 模式中 V 的部份。
.ui 檔案屬於 XML 的一種格式化標記語言。
同時 Qt Creator 會建立一個視窗類別,藉由這個視窗類別控制圖形介面與使用者與 M 的互動,也就是 GUI 中的事件處理 (event handling) , MVC 模式中 C 的部份。好了,這樣的開發概念是不是很簡單呢?簡單分成下列三個步驟
- 建立專案
- 設計 UI (使用者介面)
- 設定 SIGNAL 與 SLOT (事件處理)
我們將在單元 25 介紹專案的檔案組成,單元 27 介紹設計 UI ,單元 28 介紹如何設定連結 SIGNAL 與 SLOT ,後續單元再陸續整合成一個功能完整的軟體。
現在,我們先來認識一下 Qt Creator 的介面吧
上圖為開啟 Qt Creator 後的歡迎視窗,可以分成五個部分來看,「部分 1」為進入 Qt Creator 各部分功能的按鈕,包括「編輯」程式原始碼、「設計」使用者介面、程式「除錯」、「專案」管理、效能「分析」及「說明」文件等。
「部分 2」為建置執行、除錯的快速按鈕,「部分 3」用來建立新專案,「部分 4」則用來開啟已存在的專案,「部分 5」則是除錯的提示項目。
「編輯」的地方,原始程式碼有行號及語法高亮度的顯示
「設計」的地方,使用簡單的拖曳方式把元件放在視窗上
「除錯」的地方,會顯示錯誤發生的行號及提示項目
「專案」的地方,管理專案的各個項目
「說明」的地方,包含大量的文件供查詢
接下來,附錄介紹在 Qt Creator 中建立新專案,建立好 encrypt_gui 專案後,下面我們繼續介紹專案裡的各種檔案。
相關教學影片
中英文術語對照 | |
---|---|
MVC 模式 | Model-View-Controller |
物件 | object |
物件導向 | object-oriented |
語意錯誤 | semantic error |
軟體工程 | software engineering |
圖形使用者介面 | graphical user interface |
事件處理 | event handling |
重點整理 |
---|
1. MVC 為軟體工程把模型、介面及控制分開的發展模式, M 就是就是處理資料的類別, V 為使用者介面的類別, C 則是控制 M 與 V 交流的類別。 |
2. Qt 提供 QML 視覺化的方式設計使用者介面。 |
3. 使用 Qt Creator 主要分成三大步驟,分別是建立專案、設計 UI 、設定 SIGNAL 與 SLOT 。 |
4. Qt Creator 的介面分成「編輯」、「設計」、「除錯」、「專案」、「分析」及「說明」等部分。 |
重點整理 |
---|
1. 什麼是 MVC 模式?為什麼開發軟體要採用 MVC 模式? |
2. 什麼是 QML ?編輯 QML 跟寫 C++ 程式有什麼不同? |
練習 |
---|
1. 利用 Qt Creator 替猜數字遊戲建立 guess_game 專案,將專案類別名稱取名為 GameWindow 。 |
2. 承上題,筆記專案程式 gamewindow.h 與 gamewindow.cpp 中有哪些看不懂的程式碼。 |