介面 (interface) 是使用者 (user) 與軟體 (software) 之間溝通的橋樑，設計良好的介面可以讓使用者易於學習與使用軟體
早期電腦使用命令列介面 (command line interface) ，像是我們發展 Encrypt.java 就是在命令列編譯的，至於命令列介面或圖形介面 (graphical interface) 孰優孰劣則因習慣而異，對初學者或不打算深入研究的人來講，自然不喜歡命令列一個指令一個指令的繁複，雖說對新手是繁複，反而對很多程式老手而言，命令列才是工作效率的最佳選擇。
可是命令列介面對一般使用者 (user) 就沒那麼友善了，圖形介面有視窗、按鈕、圖示、顏色等等指引，相對好用很多，因此提供給一般使用者的軟體現在都優先採用圖形介面，也就是說， MVC 中模式的 V ，現在也多是指圖形介面。
提款機、互動式導覽機或智慧型手機都有觸控介面，基本上觸控介面是基於圖形介面的，滑鼠按鍵跟游標變成由觸控螢幕感應手指按了哪個圖示。
在 NetBeans 裡快速的點 EncryptorFXML.fxml 兩次，就會開啟 JavaFX Scene Builder
JavaFX Scene Builder 開啟後如下
分成三大區域，中間就是視窗編輯區，左邊是 Library ，也就是視窗元件區，左邊則是調整屬性、排版及程式碼的區域。
先簡單的點擊〔Click Me!〕按鈕，右邊就會出現相對應的屬性
切換到 Code ，也就是程式碼的頁籤，可以看到 fx:id 為 button ， On Action 則是 handleButtonAction
fx:id 會對應到 EncryptorController 中的屬性名稱，因此由屬性就能控制 GUI 元件。至於 On Action 就是按鈕的預設事件，也就是按下這個按鈕後啟動 EncryptorController 裡的 handleButtonAction 方法。下面還有很多不同的事件，意思大致上跟英文一樣。
我們切換到按鈕下面的文字標籤， Code 中的 fx:id 就是 label
由於我們的 GUI 需要三個文字標籤、兩個文字輸入欄位以及七個按鈕，現在就用預設版本來改囉！首先，在空白的文字標籤輸入 Input:
然後按住滑鼠左鍵，移動文字標籤到編輯視窗的左上角
放掉滑鼠左鍵後，文字標籤就會改變位置。下面我們在文字標籤上按滑鼠右鍵，重製一個文字標籤，當然這裡也可以到視窗元件區拉一個新的文字標籤過來
這樣就有兩個文字標籤了，我們把第二個文字標籤改成 Output: ，然後在右邊屬性區找到 Alignment ，將兩個文字標籤的 Alignment 都改成 CENRER_RIGHT ，這樣文字標籤中的文字就會向右對齊
接下來到視窗元件區找到 TextField ，然後拉兩個放到兩個文字標籤後
拖曳視窗邊緣就可以調整大小
再把按鈕放到適當的位置
Click Me! 要改成 New
用重製或拖曳的方式弄好其他六個按鈕，按鈕名稱分別是 Load 、 Save 、 Encode 、 Decode 、 Clear 及 Copy
最後在底下新製一個文字標籤，並把內容設定為 something happened.. ，我們的 GUI 就大功完成了
現在按〔New〕可能會有奇怪的反應，其他六個按鈕則不會有動作，下一個單元我們繼續調整每個按鈕，讓每個按鈕都能有預期的動作。
中英文術語對照
| 介面 | interface |
| 使用者 | user |
| 軟體 | software |
| 命令列介面 | command line interface |
| 圖形介面 | graphical interface |
| 使用者 | user |
重點整理
- 介面是使用者與軟體之間溝通的橋樑，圖形介面是對一般使用者比較友善的介面。
- 在 NetBeans 裡快速的點 EncryptorFXML.fxml 兩次，就會開啟 JavaFX Scene Builder 。
- 在 JavaFX Scene Builder 中可以直接用拖放的方式增加或調整視窗元件，右邊的屬性區也能直接修改元件的屬性。
- fx:id 為 EncryptorController 中對應的屬性名稱， On Action 則是 EncryptorController 中對應的方法名稱。
問題與討論
- 比較圖形介面跟命令列的優缺點，試著找出為什麼老手覺得命令列更有工作效率的原因。
- 為什麼在 JavaFX Scene Builder 的屬性區填上 fx:id 就可以對應到 EncryptorController 的屬性名稱，又為什麼 On Action 可以對應到 EncryptorController 的方法名稱？
the end
沒有留言:
張貼留言