
Java 入門指南
單元 20 - MVC 模式與建立 JavaFX 專案

軟體工程中有所謂的 MVC 模式 (Model-View-Controller) , M 就是我們發展好的 Encrypt 類別 (class) , V 就是使用者介面 (user interface) ,至於 C 則是控制 M 與 V 之間的物件 (object) ,三者在物件導向 (object-oriented) 觀念裡都應該是獨立個別的物件
當然可以完全手動自己刻,倒是規模小的程式裡容易把 V 跟 C 混在一起,或是 M 、 V 、 C 都湊合定義在同一個類別,並不是不可以,但我們不鼓勵這麼做,主要因為在發展大型程式的時候, M 、 V 、 C 任何一部分有問題,或是需要除錯都可以分開進行。
怎麼說呢?想像開發好的 M 、 V 、 C 的程式碼都超過 300 行,如果都混在同一個類別裡,那個類別的實作檔案可能有超過 1000 行程式碼,如果一個地方有問題,最怕是語意錯誤 (semantic error),就得仔細檢查超過 1000 行的程式碼,慢慢找錯誤出來,幸運一點就都是自己寫的,還比較容易找錯誤。
可是實際上一個大型軟體動輒都是數十萬到數百萬行程式碼,而且很多都是自己加入某個開發專案,這麼一來,如果這個專案是個古老的舊專案,完全沒有用軟體工程 (software engineering) 研究出來的方式維護程式碼,那真的要除掉一個 bug 得耗費許多心力。
因此學習開發軟體不外就先建立 MVC 開發模式的觀念囉!利用 NetBeans 就是建立 JavaFX FXML 專案,建立新專案點擊 NetBeans 右上方工具列的 New Project 按鈕

接著就會出現選擇專案範本視窗,這裡在左側選 JavaFX

右側選 JavaFX FXML Application ,然後點擊下方的 Next 按鈕

下一個是輸入專案名稱及選擇儲存路徑,這裡專案名稱為 EncryptGUI ,路徑請自己選擇

輸入完之後,最後點擊下方的 Finish 按鈕

接著會自動載入專案中的三個原始碼檔案

從左側的轉案管理部分,可以看到專案的檔案組織

主要有以下這三個三個原始碼檔案
- EncryptGUI.java
- FXMLDocument.fxml
- FXMLDocumentController.java
這裡 EncryptGUI.java 是啟動程式, FXMLDocument.fxml 是 MVC 模式中的 V , FXMLDocumentController.java 是 MVC 模式中的 C ,至於 Encrypt 類別將會是 MVC 模式的 M 。
專案範本會載入預設的程式碼,先來按上方的執行鍵來看看預設的視窗囉!

預設的視窗如下

點擊 Click Me! 按鈕,就顯示 Hello World! 文字

下一個單元我們深入來看 FXMLDocument.fxml ,直接修改 FXMLDocument.fxml 來設計 EncryptGUI 的視窗介面。
相關教學影片

中英文術語對照 | |
---|---|
Model-View-Controller | MVC 模式 |
class | 類別 |
object | 物件 |
object-oriented | 物件導向 |
semantic error | 語意錯誤 |
software engineering | 軟體工程 |
user interface | 使用者介面 |
重點整理 |
---|
1. MVC 模式是 Model-View-Controller , M 是計算核心, V 是介面檔案, C 是 M 與 V 之間的控制器。 |
2. NetBeans 的 FXML 專案預設的 FXMLDocument.fxml 為 V , FXMLDocumentController.java 為 C ,我們上一篇開發的 Encrypt.java 則為 M 。 |
問題與討論 |
---|
1. MVC 模式是什麼? |
2. 利用 MVC 模式開發應用程式有什麼優點? |
練習 |
---|
1. 仿造 EncryptGUI 專案,建立 JavaFX FXML 專案,命名為 HelloDemo 。 |
2. 仿造 EncryptGUI 專案,建立 JavaFX FXML 專案,命名為 GuessGameDemo 。 |