使用windowbuilder外掛程式開發圖形介面

標籤：swt

先介紹一下JFrame與Frame視窗上的區別：

  JFrame視窗是內建預設有一個Panel容器的，Frame視窗則是沒有的，它們預設的布局都是邊界布局。

JFrame預設的是邊界布局，JPanel預設的是流式布局。

  要使用JFrame視窗內建的容器或讓容器不顯示之類的操作都得先使用getContentPane();來得到容器後才能對這個容器進行操作。例如設定視窗的背景顏色(使容器不顯示)：

650) this.width=650;" src="https://s3.51cto.com/oss/201710/26/5149c830e18902f5f27fef13e626477c.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式239.png" alt="5149c830e18902f5f27fef13e626477c.png" />

運行效果：

650) this.width=650;" src="https://s2.51cto.com/oss/201710/26/6c5f4ac25c7a246d4d5b6c550ccdecd2.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式251.png" alt="6c5f4ac25c7a246d4d5b6c550ccdecd2.png" />

功能表列對象、功能表項目與菜單子項：

650) this.width=650;" src="https://s4.51cto.com/oss/201710/26/2e6b4eea540ea1826f15c35e71d2d6b9.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式275.png" alt="2e6b4eea540ea1826f15c35e71d2d6b9.png" />

在視窗最上面的這一排選項就是功能表列，想在視窗上添加功能表列，首先使用功能表列類JMenuBar構建出功能表列對象，才能往裡面添加其他組件。

  構建出對象後，再使用JMenu功能表項目類構建出功能表項目對象，然後使用功能表列對象訪問add();方法把構建出來的功能表項目對象添加上去。接著使用視窗對象訪問setJMenuBar();方法把功能表列對象設定一下。程式碼範例：

650) this.width=650;" src="https://s5.51cto.com/oss/201710/26/993b5b62fed9405df7cebf4b4a88042d.png" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式452.png" alt="993b5b62fed9405df7cebf4b4a88042d.png" />

運行效果：

650) this.width=650;" src="https://s4.51cto.com/oss/201710/26/1ceab80d60ceb284d94e8f484a1b7cfb.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式465.png" alt="1ceab80d60ceb284d94e8f484a1b7cfb.png" />

功能表項目裡還可以添加菜單擴充項和菜單子項，功能表項目的菜單擴充項裡還可以再加菜單子項。菜單擴充項其實就是功能表項目裡的功能表項目，新構建一個功能表項目後再添加進一個功能表項目裡就是擴充項了。

  JMenuItem是菜單子項類，先使用這個類構建出菜單子項對象就可以將這個對象添加進功能表項目裡了。程式碼範例：

650) this.width=650;" src="https://s4.51cto.com/oss/201710/26/69b92e0eb38ce68cce8587bfd258f7d8.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式610.png" alt="69b92e0eb38ce68cce8587bfd258f7d8.png" />

650) this.width=650;" src="https://s3.51cto.com/oss/201710/26/54288b05ffb3ef12ddf3578e6d90705e.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式612.png" alt="54288b05ffb3ef12ddf3578e6d90705e.png" />

運行效果：

650) this.width=650;" src="https://s1.51cto.com/oss/201710/26/31b60103865f387084a8749f52a22ab9.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式620.png" alt="31b60103865f387084a8749f52a22ab9.png" />

安裝SWT外掛程式：

  什麼是SWT？

SWT是IBM開發的一款使用在Eclipse上的圖形化開發的外掛程式。

SWT(Standard Widget Toolkit) Standard Widget Toolkit是一個開源的GUI編程架構，與AWT/Swing有相似的用處，著名的開源IDE-eclipse就是用SWT開發的。 在SWT之前，Sun已經提供了一個跨平台GUI開發套件AWT (Abstract Windowing Toolkit).AWT架構底層使用原生視窗組件(native widgets)構建，只能使用各個平台視窗組件的子集。

在以前SWT是需要收費的，需要啟用才能使用。但是現在SWT已經被Google公司所收購，並更名為WindowBilder Pro，現在這款外掛程式是免費的了，直接在Eclipse裡的安裝新軟體(Install New SoftWare)選項裡的介面添加進網址即可直接安裝使用。

 

安裝步驟：

1.開啟Eclipse裡Help選項下的Install New SoftWare選項裡的介面：

650) this.width=650;" src="https://s2.51cto.com/oss/201710/26/1d9bee8f42827b1d1b2bdb01cda226c3.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1429.png" alt="1d9bee8f42827b1d1b2bdb01cda226c3.png" />

2.粘貼：http://download.eclipse.org/windowbuilder/WB/release/4.6/

650) this.width=650;" src="https://s5.51cto.com/oss/201710/26/4f060351fcc8c3d3b614ee761c93ce90.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1571.png" alt="4f060351fcc8c3d3b614ee761c93ce90.png" />

3.等待計算需求與依賴性

650) this.width=650;" src="https://s4.51cto.com/oss/201710/26/26026d530cca260af20a2b53debedd14.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1586.png" alt="26026d530cca260af20a2b53debedd14.png" />

4.不用管，點擊下一步：

650) this.width=650;" src="https://s5.51cto.com/oss/201710/26/41da46b13217da882bb2a7a2eddcc1a3.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1600.png" alt="41da46b13217da882bb2a7a2eddcc1a3.png" />

5.選擇同意並點擊Finish完成：

650) this.width=650;" src="https://s2.51cto.com/oss/201710/26/8bb50c72aa80cf55f01f69f4216e409d.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1621.png" alt="8bb50c72aa80cf55f01f69f4216e409d.png" />

6.等待下載安裝：

650) this.width=650;" src="https://s4.51cto.com/oss/201710/26/5acc2e51a57b3cf5ca1eb4d5187881e8.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1633.png" alt="5acc2e51a57b3cf5ca1eb4d5187881e8.png" />

安裝完成後重啟Eclipse就可以使用這個外掛程式進行圖形化開發了

   重啟Eclipse後，選擇“File”—>New—>Project...—>WindowBuilder—>SWT Designer—>SWT/JFace Project建立項目，例如我建得“FirstSS”，然後右擊所建項目，選擇“New”—>Other...—>WindowBuilder—>Swing Designer或SWT Designer，選擇希望建立的表單類。

650) this.width=650;" src="https://s2.51cto.com/oss/201710/26/a197c118abe9723898548b4b10a2da2a.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1862.png" alt="a197c118abe9723898548b4b10a2da2a.png" />

650) this.width=650;" src="https://s1.51cto.com/oss/201710/26/57dba41193fd11b3f1cca4955445697c.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1865.png" alt="57dba41193fd11b3f1cca4955445697c.png" />

650) this.width=650;" src="https://s3.51cto.com/oss/201710/26/7dfb9a7a65b45c07cb3277e56c60c71e.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1867.png" alt="7dfb9a7a65b45c07cb3277e56c60c71e.png" />

點擊Design進入外掛程式介面：

650) this.width=650;" src="https://s4.51cto.com/oss/201710/26/58486d3261ea53b747a31f4c48b3cdb5.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1885.png" alt="58486d3261ea53b747a31f4c48b3cdb5.png" />

  接下來就可以使用外掛程式進行圖形化介面開發了，只需要點擊上面的組件添加到右邊的視窗裡即可，外掛程式會自動產生代碼。

樣本：

650) this.width=650;" src="https://s4.51cto.com/oss/201710/26/c67e10d1b7dd31d7992729c4e4c3bbe2.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1951.png" alt="c67e10d1b7dd31d7992729c4e4c3bbe2.png" />

這一欄是組件資訊只需要將組件放上去即可

650) this.width=650;" src="https://s4.51cto.com/oss/201710/26/af9e58a7fc5ab7bd40f68d941088ec6a.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1973.png" alt="af9e58a7fc5ab7bd40f68d941088ec6a.png" />

運行效果：

650) this.width=650;" src="https://s1.51cto.com/oss/201710/26/65eca4ffdde492db6da71f1d66858768.png" style="float:none;" title="VIP14-端碗吹水-3.20-GUI第3節安裝圖形化外掛程式1983.png" alt="65eca4ffdde492db6da71f1d66858768.png" />

本文出自 “zero” 部落格，請務必保留此出處http://zero01.blog.51cto.com/12831981/1976488

使用windowbuilder外掛程式開發圖形介面