本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

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:idbuttonOn 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



用重製或拖曳的方式弄好其他六個按鈕,按鈕名稱分別是 LoadSaveEncodeDecodeClearCopy



最後在底下新製一個文字標籤,並把內容設定為 something happened.. ,我們的 GUI 就大功完成了



現在按〔New〕可能會有奇怪的反應,其他六個按鈕則不會有動作,下一個單元我們繼續調整每個按鈕,讓每個按鈕都能有預期的動作。


中英文術語對照


介面interface
使用者user
軟體software
命令列介面command line interface
圖形介面graphical interface
使用者user

重點整理


  1. 介面是使用者與軟體之間溝通的橋樑,圖形介面是對一般使用者比較友善的介面。
  2. 在 NetBeans 裡快速的點 EncryptorFXML.fxml 兩次,就會開啟 JavaFX Scene Builder 。
  3. 在 JavaFX Scene Builder 中可以直接用拖放的方式增加或調整視窗元件,右邊的屬性區也能直接修改元件的屬性。
  4. fx:idEncryptorController 中對應的屬性名稱, On Action 則是 EncryptorController 中對應的方法名稱。

問題與討論


  1. 比較圖形介面跟命令列的優缺點,試著找出為什麼老手覺得命令列更有工作效率的原因。
  2. 為什麼在 JavaFX Scene Builder 的屬性區填上 fx:id 就可以對應到 EncryptorController 的屬性名稱,又為什麼 On Action 可以對應到 EncryptorController 的方法名稱?

the end

沒有留言: