Related Posts Plugin for WordPress, Blogger...

[教學] eclipe + VE 撰寫第一個 Java 圖形界面程式(Java GUI Hello World)

先前介紹過 Java IDE – eclipse,也說明如何用 eclipse 寫最簡單的 Hello World,只要照著簡單的步驟,就可開啟 Java 程式開發的大門,但是光有文字命令的界面,可能會讓人感覺太低階,少說也要有個圖形界面才夠唬人;用 VE 寫(拉) GUI 程式,就畫面排版跟 GUI 元件的使用,沒有太多的手動輸入部份,稍微在元件加點事件邏輯進去,看起來就有模有樣了,其實 Java GUI 也沒有這麼難。

VE 已停止開發,欲使用 GUI Layout Toole 可參考:
[介紹] eclipse 插件 - Java GUI Layout 輔助工具 WindowBuilder
[教學] eclipe + WindowBuolder 撰寫第一個 Java 圖形界面程式(Hello World) 

開啟 eclipse(已安裝 VE 插件),新增一個 Visual Class。
image

輸入 1.Class Name 2.選擇父類別 JFrame(非必須,本例以 JFrame 為 base) 3.選擇創建程式進入點(不創建 main Method 也可以,到時候用 JavaBean 的方式 Run。) 4.完成。
image

Visual Class 建立完成後,會發現跟一般 Class 不同,多了 GUI Layout 的部份,這部份就是滑鼠拉一拉能完成的,完全不須寫任何 Code。
image

幫視窗標題列設定名稱,在 JFrame 點選滑鼠右鍵選擇 Set Title,再輸入名稱即可。
image

設定元件配置(佈局 Layout)方式,在 JFrame 畫面點選滑鼠右鍵,Set Layout→GridBagLayout(個人最常使用的 Layout)。
image

點選 JTextArea 後(滑鼠左鍵要放掉,不是拖曳喔)將滑鼠移到 JFrame 畫面上,於 Layout 0|0 位置點選滑鼠,將文字區域元件放置到視窗內,接著在彈出訊息框決定元件名稱,按下 [OK] 按鈕。
image

點選 JTextField 後將滑鼠移到 JFrame 畫面上,於 Layout 0|1 位置點選滑鼠,將文字輸入欄元件放置到視窗內。(省略之細節與上步驟相同)
image

點選 JButton 後將滑鼠移到 JFrame 畫面上,於 Layout 1|1 位置點選滑鼠,將按鈕元件放置到視窗內。(省略之細節與上步驟相同)
image

元件都到位了,但是看起來怪怪的。
image

調整元件細部設定,讓畫面協調一些,點選 JTextArea 元件,按滑鼠右鍵選擇 Customize Layout...。
image

將 Span 的 Width 調成 2,讓元件的寬度佔兩個單位。
image

一樣點選 JTextField 元件,按滑鼠右鍵選擇 Customize Layout...,點選 Fill 橫向擴展按鈕(←→),讓元件填滿整個單位。
image

點選 JButton 元件,按滑鼠右鍵選擇 Set Text,輸入按鈕要顯示的文字。
image

調整過後畫面就比較協調了吧
image

設定一些事件監聽,讓元件有些功能,不是虛有其表,點選 JButton 元件,按滑鼠右鍵選擇 Events→actionPerformed。
image

VE 會在程式碼區自動產生一段 JButton 事件監聽的程式碼。
image

將這段程式碼稍作修改
System.out.println("actionPerformed()"); // TODO Auto-generated Event stub actionPerformed()
改成
jTextArea.append(jTextField.getText().isEmpty() ? "" : jTextField.getText() + "\n");
jTextField.setText(null);

這兩段程式碼的意思是,檢查 jTextField 的內容是不是空值,不是空的話在 jTextArea 增加 jTexeField 取得的內容並增加斷行,空的話不在 jTextArea 增加內容;第二行則是清空 jTextField 的內容。

這樣就寫完了,來執行看看吧!按下執行按鈕→Run As→選擇 Java Application。
image

執行畫面
image

在 JTextField 輸入一段文字
image

按下 [送出] 按鈕 JTextField 的文字就被貼到 JTextArea 上囉
image

簡單幾個動作就完成了一個 Java GUI 程式,尤其是 Layout 的部份一目了然,以往手工打造總是程式設計師的惡夢,覺得 Java 的物件容器 Layout 不好用,但是可以把視窗最大化、改變視窗大小試試,就能發現物件容器的好處絕非固定座標 Layout 可以取代的,當然 Java 也可以使用固定座標 Layout(用 JDesktopPane),縱使固定座標 Layout,有 VE 的協助對效率也是有相當的提昇,此例簡單的程式,用手工打造,可是要 125 行的程式碼,但經過 VE 的幫忙,手動輸入的部份僅僅 2~5 行,而且 VE 自動產生的程式碼很有水準,值得不熟悉 Java GUI 的初學者拿來學習參考。

VE 已停止開發,欲使用 GUI Layout Toole 可參考:
[介紹] eclipse 插件 - Java GUI Layout 輔助工具 WindowBuilder
[教學] eclipe + WindowBuolder 撰寫第一個 Java 圖形界面程式(Hello World) 
張貼留言