Jigloo 開發(fā) SWT 的入門教程

1、Jigloo 開發(fā) SWT 的入門教程 作者: 轉(zhuǎn)載請注明出處.經(jīng)常有朋友苦于自己做了一個(gè)轉(zhuǎn)換工具算法, 想用圖形界面封裝一下給同事使用, 卻不知道如何下手. 本文就介紹一下如何用 Jigloo 開發(fā)一個(gè)簡單的 SWT 應(yīng)用把自己編寫的 public static String doConvert(String input) 方法封裝成圖形界面的版本. 本文適用于從未有過 GUI/SWT 開發(fā)經(jīng)驗(yàn)但是熟悉 Eclipse IDE 的基本使用以及插件安裝的讀者, 讀者同時(shí)應(yīng)該對 Java 語言有了解和使用的經(jīng)驗(yàn). 本文不講述 SWT/Swing 以及 GUI 設(shè)計(jì)的相關(guān)知識.如果有讀者希望用 S

2、wing 來進(jìn)行這個(gè)界面的設(shè)計(jì), 那么請您留言發(fā)表建議, 如果需要的話我將講述 Jigloo 開發(fā) Swing 的入門教程, 要實(shí)現(xiàn)的目的和本文相同, 但是步驟相對簡單, 因?yàn)椴恍枰惭b Swing(JDK 自帶了). 筆者的 Code Manager .SWT 即是用 Jigloo 完成了大部分的界面開發(fā)工作.期望對如何使用 Jigloo 有深入了解的讀者可以在安裝 Jigloo 插件后閱讀 Eclipse 幫助文檔中的 Jigloo GUI Builder Guide 一節(jié)了解更多的技巧, 例如: 如何在大文件模式下使用 Jigloo, 如何避免解析某些代碼, Jigloo 如何解析界面代

3、碼以及如何打開由其它界面設(shè)計(jì)器制作的界面文件等. 這些幫助文檔可以通過菜單 Help - Help Contents 來打開. 一. 搭建開發(fā)環(huán)境 1. SWT 類庫的下載和安裝 SWT 是 IBM 出品的類似于 AWT 的組件包, 基于 OS 組件封裝模擬而成, 由 C 代碼和 Java 代碼混合而成. 首頁: . 詳細(xì)介紹可以 Google. 本文以 Windows 版本為例進(jìn)行講解. 需要注意的是并非所有平臺都能運(yùn)行 SWT, 詳情請參考 SWT 項(xiàng)目主頁的介紹. 并且不同的平臺需要對應(yīng)平臺的 SWT 運(yùn)行庫.截圖: 下載 SWT 3.3 M5 swt-3.3M5-win32-win32

4、-x86.zip:Download from: China Actuate Shanghai (http)Windows 版本. 用 3.3 的好處是它運(yùn)行的時(shí)候不需要再指定 library 路徑了.然后參考 Developing SWT applications using Eclipse 一文中的說明搭好基于 Eclipse 的開發(fā)環(huán)境.以下為文章內(nèi)容的中文翻譯:因?yàn)镾WT 被集成為 Eclipse plug-in API 的一部分, 獨(dú)立運(yùn)行的應(yīng)用程序開發(fā)最好基于 SWT 獨(dú)立版的下載. 這個(gè)文檔講幫助你安裝. 首先, 從SWT homepage下載適于您的平臺的 SWT 的.zip 文

5、件. SWT .zip 文件可以導(dǎo)入到你的工作區(qū). 選擇 File 菜單, 然后選擇 Import, 選中 Existing Projects Into Workspace 向?qū)? (新版本的 eclipse 中, 你可以在 General 分類下找到 Existing Projects Into Workspace). 定位向?qū)Ю锩娴穆窂降侥阆螺d的 .zip 文件所在的目錄. 這將會(huì)在工作區(qū)里創(chuàng)建一個(gè)名為 的工程. 您自己的 Java 項(xiàng)目可以將 SWT 項(xiàng)目作為依賴添加進(jìn)來. 打開Java 項(xiàng)目的 Properties 對話框, 在 Java Build Path 設(shè)置頁中,包含 org.

6、eclipse.swt 項(xiàng)目. 將 SWT 項(xiàng)目作為依賴項(xiàng), 你可以使用 Eclipse 的一些方便的功能例如 Javadoc 視圖和代碼提示(code assist). 現(xiàn)在你可以在你的項(xiàng)目中運(yùn)行任何的主類, 通過選中類然后選擇菜單 Run Run As Java Application.2. Jigloo 的下載和安裝 Jigloo 能識別大多數(shù)的 FormBuilder 創(chuàng)建的 GUI, 例如 JBuilder 等, 運(yùn)行速度比較快, 比 Visual Editor 好用. 可以編輯 AWT,Swing/SWT 的界面. 個(gè)人用免費(fèi), 商用需收費(fèi). Note: Jigloo is fre

7、e for non-commercial use, but purchase of a Professional License is required for commercial use (after successfully evaluating Jigloo). 注: 3.95 版本上筆者測試運(yùn)行過的 Eclipse 版本有 3.2, 3.3. 為了便于講述, 本文所使用的 Eclipse 版本是 3.3.0, Jigloo 3.95, JDK 1.5. Eclipse:2.1.*, 3.0*, 3.1*, 3.2, 3.3 Java:1.3, 1.4 or 5.0 Platforms

8、: Windows, Linux (gtk) and Mac OSX. (On a Mac, only SWT GUIs can be built). 下載地址: jigloo_395.zip二. Jigloo 簡單使用 1. 初識 Jigloo 首先我們要如上所示新建一個(gè)名為 MyProject 的 Java 工程: 選擇菜單 File - New - Project., 然后選擇在第一個(gè)分類中選擇 Java Project, 點(diǎn)擊 Next, 然后輸入 MyProject, 并按照上節(jié)所講設(shè)置好依賴關(guān)系. 然后請復(fù)制下列代碼然后在 MyProject 的 src 目錄上點(diǎn)擊右鍵, 選擇Pa

9、ste, 這樣這個(gè)轉(zhuǎn)換類就出現(xiàn)在了工程中:public class Converter public static String doConvert(String input) return input + is converted.; 然后我們選擇菜單 File - New - Other., 在所出現(xiàn)的 New 對話框中打開分類 GUI Forms - SWT, 選中 SWT Composite, 如下圖所示:在接下來的向?qū)υ捒蛑斜３帜J(rèn)的輸入值不變即可:接著將會(huì)自動(dòng)用 Jigloo 界面設(shè)計(jì)器打開新生成的文件, 顯示如下:在 Outline(大綱) 頁面中顯示如下內(nèi)容:(1) 按鈕切換

10、是否顯示柵格;(2) 按鈕彈出一個(gè)窗口預(yù)覽當(dāng)前設(shè)計(jì)界面(不經(jīng)過編譯);(3) 按鈕編譯并運(yùn)行生成的代碼;(4) 按鈕啟動(dòng)/停止分析代碼改動(dòng)(由代碼生成設(shè)計(jì)界面);(5) 按鈕切換是否顯示繼承的組件;(6) 按鈕切換界面從 SWT 到 Swing 或者反向轉(zhuǎn)換(注意會(huì)有代碼錯(cuò)誤出現(xiàn), 并非 100% 準(zhǔn)確);(7) 列出了界面中的組件層次大綱, 單擊可以選中相應(yīng)的組件.在編輯器頁面中顯示如下內(nèi)容:(8) 正在設(shè)計(jì)中的界面, 點(diǎn)擊紅色控制(handle)點(diǎn)并拖拉可以調(diào)整組件的大小, 位置;(9) SWT/Swing 組件選擇面板, 單擊一個(gè)組件, 然后再單擊一次(8), 即可將組件放到界面中, 同

11、樣也可以繼續(xù)調(diào)節(jié)大小,位置;(12) 顯示的是代碼視圖, 這是生成的代碼, 也可以再下面修改代碼, 完畢后上面將會(huì)重新解析繪制設(shè)計(jì)中的界面;在 GUI Properties 頁面中顯示如下內(nèi)容:(10) 按鈕切換屬性列表顯示為拖拉面板(SashForm)或者多頁面板(TabbedPane);(11) 屬性列表, 依次為: 屬性(Properties), 布局(Layout), 事件(Event).2. 拖拉快速搭建界面 拖放, 預(yù)覽. 首先我們在(7)中選擇 this - Composite, Grid, 然后在(11)中選擇 Layout 面板, 點(diǎn)擊樹節(jié)點(diǎn) Layout(*), 在右側(cè)下拉

12、列表框中選擇其值為 Absolute( 絕對布局).我們選擇這個(gè)布局主要是為了快速開發(fā)的關(guān)系, 雖然這不是一個(gè)很好的選擇. 詳細(xì)信息可以自行瀏覽 SWT 開發(fā)相關(guān)的資料.好了, 接下來在(9)中選擇面板 Controls, 然后點(diǎn)擊兩次 Text 控件, 放到設(shè)計(jì)面板上, 拖拉使其不要重疊并放置在合適的位置上, 這兩個(gè)組件按照默認(rèn)值即可, 分別為 text1, text2. 如果發(fā)現(xiàn)放 Text2 的時(shí)候無法添加上去, 請把它放到 Outline 中的 (7) 的 this - Composite, Grid 即可.最后我們把一個(gè) Button 添加上去, 在添加對話框中修改 Text 值為

13、OK.拖放各個(gè)組件(包括 Composite)來布局到合適的大小和位置, 如下圖所示: 這時(shí)候可以點(diǎn)擊工具欄按鈕 (2) 或者 (3) 預(yù)覽設(shè)計(jì)成的界面. Jigloo 已經(jīng)幫你寫好了大部分的代碼, 因此無需擔(dān)心界面無法顯示.3. 加入事件響應(yīng)代碼 首先點(diǎn)擊一下界面上的 OK 按鈕, 然后選擇(11)中的 Event 面板, 然后展開SelectionListener , 單擊 widgetSelected 節(jié)點(diǎn)右側(cè)的not handled 下拉框, 然后選擇 handler method, 這樣將會(huì)生成一個(gè)點(diǎn)擊 OK 后觸發(fā)的事件調(diào)用方法, 如下圖所示:接著編輯器中的鼠標(biāo)將會(huì)定位到剛才生成的

14、事件方法中, 默認(rèn)生成的代碼如下所示:private void button1WidgetSelected(SelectionEvent evt) System.out.println(button1.widgetSelected, event= + evt);/TODO add your code for button1.widgetSelected我們在 TODO 后面加入下列代碼即可完成我們所需要的功能了:text2.setText(Converter.doConvert(text1.getText();這段代碼將會(huì)設(shè)置文本框2中的文本內(nèi)容為先前編寫的轉(zhuǎn)換代碼所處理過的內(nèi)容, 輸入的內(nèi)容

15、是 text1 中顯示的文本. 相當(dāng)于調(diào)用如下一段代碼:String input = text1.getText();String output = Converter.doConvert(input);text2.setText(output);setText(String) 和 getText() 方法分別對組件顯示的文本內(nèi)容進(jìn)行讀寫操作.4. 測試 點(diǎn)擊 (3) 按鈕,運(yùn)行, 修改 text1 中的值, 然后點(diǎn)擊 OK 按鈕, 可以看到運(yùn)行結(jié)果正常. 如下圖所示:三. 打包發(fā)布應(yīng)用 1. 目錄布局以及復(fù)制依賴文件 我們這個(gè)項(xiàng)目僅僅依賴 swt.jar, 首先在 MyProject 下新建

16、一個(gè)文件夾 lib, 然后從項(xiàng)目 org.eclipse.swt 下將swt.jar復(fù)制到當(dāng)前項(xiàng)目的 lib 下, 即可, 最后的文件目錄結(jié)構(gòu)如下示:MyProjectclasseslibsrc2. 編寫啟動(dòng)腳本 在根目錄下編寫 運(yùn)行.bat, 內(nèi)容如下所示:java -cp classes;libswt.jar NewComposite雙擊運(yùn)行此批處理文件可以看到主窗口.3. 用 pack200 打包發(fā)布(可以大大減小個(gè)頭) 如果使用的是 JDK 1.5, 可以用 pack200 來減小 swt.jar 的大小, 注意用戶下載后必須先解壓才能運(yùn)行程序.pack200用法以及批處理文件語法請自

17、行查找相關(guān)資料.壓縮所用的兩個(gè)批處理文件如下:壓縮.bat 發(fā)布的時(shí)候運(yùn)行一次pack200 libswt.jar.gz libswt.jardel libswt.jar解壓縮.bat 用戶下載后需要運(yùn)行一次unpack200 libswt.jar.gz libswt.jar四. FAQ 歡迎提問, 并來 Wiki 留言交流.一些常見小問題.Q: 我編輯下面的代碼后發(fā)現(xiàn) GUI Properties 面板和組件層次大綱消失了?A: 點(diǎn)擊一下界面設(shè)計(jì)器中的按鈕后 GUI Properties 面板將會(huì)再次出現(xiàn).Q: 我想給窗口設(shè)置一個(gè)標(biāo)題, 并且給兩個(gè)文本框設(shè)置默認(rèn)的值為空, 怎么辦?A: 修改

18、 Properties 屬性中的 text 即可, 文本框的可以先在界面設(shè)計(jì)器中選中組件, 然后在GUI屬性頁修改即可. 主窗口的稍微復(fù)雜一點(diǎn), 如下圖所示需要先選中 Shell, 然后再修改:Q: 我想使用多行文本編輯器(TextArea), 而文中的例子是單行文本框, 怎么辦?A: 將這段操作改為 接下來在(9)中選擇面板 Controls, 然后點(diǎn)擊兩次 TextArea 控件, 放到設(shè)計(jì)面板上, 拖拉使其不要重疊并放置在合適的位置上, 這兩個(gè)組件按照默認(rèn)值即可, 分別為 text1, text2. 如果發(fā)現(xiàn)放 Text2 的時(shí)候無法添加上去, 請把它放到 Outline 中的 (7) 的 this - Composite, Grid 即可, 而不是使用原來的 Text 控件.Q: 發(fā)現(xiàn)關(guān)閉 Eclipse 再打開剛才設(shè)計(jì)的代碼的時(shí)候沒有出現(xiàn) Jigloo 界面設(shè)計(jì)器, 我如何才能打開它進(jìn)行編輯? A: 有時(shí)候 Eclipse 不能記住上次打開某文件的時(shí)候所用的編輯器, 因此首