Java 入門指南 V2.00 - 單元 22 - 設計介面

Java 入門指南 V2.00 - 單元 22 - 設計介面

Java 入門指南 V2.00 - 單元 22 - 設計介面

介面 (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

沒有留言:

訂閱：
張貼留言 (Atom)

window.___gcfg = { 'lang': 'zh-TW' };