2015年4月7日 星期二

[Java]用NetBeans做出GUI介面

最近因為作業發現一個有趣的東西叫GUI
本來呢是用eclipse寫程式碼
然後做出了一個這樣的東西




















是很好看沒錯
但是花了我整整一個下午和晚上覺得眼睛快瞎掉才做出這樣一個東西
後來才知道eclipse可以下載套件來做GUI
但是我試過了覺得不怎麼好用
剛好呢那天又安裝好了netbeans這個超強大的軟體
隔天早上花了大概不到一小時就做出了一個整齊的GUI介面
不過這裡只記錄怎麼做出一個GUI介面的空殼
還沒有功能喔!!

(*覺的圖太小字太小可以點開放大來看XD)

首先new一個project



















new一個file 要注意這跟平常單純寫程式碼的東西不一樣喔



















然後就會進入到一個神奇的介面














操作方法很簡單
把你要的"物件"丟到中間的"設計面板"排好就可以了
然後你想更改文字 顏色之類的等等都在綠色框框裡
現在是"Free Design"模式
等等會在提到另外一個
總之現在就可以很開心的拉東西進去了~~












拉完之後可以開始改他的名稱
但是要注意改的是他的"文字"還是"變數名稱"

這是一開始做好的介面



















假設你想把按鈕的字改掉
要注意你切換到的是"Properties"
你可以在那裏更改顏色 大小 文字之類的

















沒錯改完之後你的按鈕就變成紅色的Send囉



















為了讓後面在使用程式碼的時候變數有可讀性
當然把變數名稱改一改也比較好
這時候你就要切換到"Code"

















這樣到時候看程式碼的時候就不會不知道什麼jButton1是什麼鬼了XD

做完了這個介面 我們來看看程式碼長得怎樣



是不是覺得有看沒有懂= =
好像這是在Free Design的模式下會是這個樣子
所以我們來把它改得好看一點

照著下面的圖做 把模式改成"GridBagLayout"
點選"Customize"

















中間出現的一個視窗就是讓你可以更改他的大小和位置
也就是一個矩陣的概念
自己想怎麼調就怎麼調
點選物件的話左下方還可以直接讓你更改數字
不用一個一個拉得很久還不知道有沒有一樣大

完成後可以點選紅色框框裡的那顆小眼睛
就是你run出來的樣子喔














然後回去看看程式碼 是不是變超整齊的














跟前一天用eclipse寫了一個下午的程式碼根本一樣!!
基本上連喬巴這種程式超爛的人都看得懂了你一定也看得懂
不過這邊灰色的這塊程式碼是不能更改的
但是其實也不需要去改他吧
畢竟改圖案比改程式碼簡單太多了
只要回去design那裡調整一下這裡的程式碼也會跟著變動
是不是超方便的QQ
所以 超推 快下載NetBeans試看看吧XD

還有其實這篇寫到一半喬巴就想睡覺了
所以截圖的部分也越來越懶惰XD
如果有什麼小地方有問題的就在留言問吧 哈哈

====補充一下====
其實小眼睛跟上面的三角形(run)跑出來的東西會不一樣喔
小眼睛只是給你看你介面長怎樣
三角型是會根據你程式碼給予的功能來呈現
指是現在做出來的東西只是空殼還沒有功能
不過介面還是稍微有點不同










只是想表達run出來是半圓形的卷軸很美 哈哈哈哈