用IntelliJ IDEA的GUI Designer開發Swing程式
原來IntelliJ IDEA的GUI Designer已經進步到非常方便了,透過簡單的拖拉就能快速的建立Swing視窗。以下是使用IDEA 13的簡要操作紀錄,目標是建立一個資料庫連線設定對話窗。
GUI Form表單建立
- 在置放原始程式的資料夾按右鍵→【New】→【GUI Form】即能建立圖形介面表單。
-
接著在New GUI Form對話窗輸入表單名稱與類別名稱,【Create bound class】必須勾選,IDEA會依名稱建立.java與.form的檔案,前者是Java原始檔,後者存放圖形元件。
-
進入GUI Designer畫面,左上方是表單的元件清單,其下方是元件特性設定區,中間是圖形畫面,右方是所有元件的調色盤,在調色板按了某個元件後,將游標移入中間就能將之放入,放入時要決定對齊的方式。GUI Form預設會新增一個JPanel容器元件。
-
我們要在底部放兩個按鈕,先放上一個JPanel面板,再把按鈕放在這個面板之上。先由調色盤點選JPanel,再將游標移到底部直到出現藍框並標示為【(bottom)】為止再放開。
-
再點選JButton在底部靠左放入第一個按鈕。
-
再放入第二個按鈕,蓋框要涵蓋面板剩餘空間。
-
兩個按鈕都放置好後會自動調整位置,變成更個均等的按鈕,佔滿整個底部面板。
-
再來對按鈕做細部設定。先點擊左邊按鈕,再修改【field name】與【text】特性。
-
再於最頂端新增JLabel當做功能說明字串。
-
在第一個JLabel下方再插入一個JLabel。對齊藍線在其正下方。
-
在第一個JLabel下方再放一個JLabel,再於其右方欄位裡放入輸入用的JTextField。
-
重覆上述操作共放入5個JLabel、5個JTextField。
-
編輯【text】與【field name】特性,最後畫面如下。
-
點選任意一個元件後按〔F4〕(Jump to source)跳至Java原始碼該元件宣告處。將游標移到最後面按〔Alt+Insert〕以自動產生程式碼,此時使用【Form main()】來產生顯示此GUI表單的main()。
-
然而此時系統卻會彈出無法繫結到根元件的錯誤訊息。只要回GUI Designer,點擊第一個JPanel元件,並且在【field name】輸入一個名稱(如Panel1)就可以正常產生main()程式碼。
public static void main(String[] args) { JFrame frame = new JFrame("ConnectionForm"); frame.setContentPane(new ConnectionForm().Panel1); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); }
16.產生出main()就能編譯並執行了,執行畫面如下:
17.其實還有一段GUI啟始的程式碼被直接寫到編譯後的.class檔裡,如果想要把額外增加的啟始程式也在.java裡出現的話,開啟設定視窗→【GUI Designer】→將【Generate GUI into】換成【Java source code】即可,內容大致如下:
public static void main(String[] args) { JFrame frame = new JFrame("ConnectionForm"); frame.setContentPane(new TestForm().Panel1); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); } { // GUI initializer generated by IntelliJ IDEA GUI Designer // >>> IMPORTANT!! <<< // DO NOT EDIT OR ADD ANY CODE HERE! $$$setupUI$$$(); } /** * Method generated by IntelliJ IDEA GUI Designer * >>> IMPORTANT!! <<< * DO NOT edit this method OR call it in your code! * * @noinspection ALL */ private void $$$setupUI$$$() { Panel1 = new JPanel(); Panel1.setLayout(new com.intellij.uiDesigner.core.GridLayoutManager(6, 2, new Insets(0, 0, 0, 0), -1, -1)); final JPanel panel1 = new JPanel(); panel1.setLayout(new com.intellij.uiDesigner.core.GridLayoutManager(1, 2, new Insets(0, 0, 0, 0), -1, -1)); Panel1.add(panel1, new com.intellij.uiDesigner.core.GridConstraints(5, 0, 1, 2, com.intellij.uiDesigner.core.GridConstraints.ANCHOR_CENTER, com.intellij.uiDesigner.core.GridConstraints.FILL_BOTH, com.intellij.uiDesigner.core.GridConstraints.SIZEPOLICY_CAN_SHRINK | com.intellij.uiDesigner.core.GridConstraints.SIZEPOLICY_CAN_GROW, com.intellij.uiDesigner.core.GridConstraints.SIZEPOLICY_CAN_SHRINK | com.intellij.uiDesigner.core.GridConstraints.SIZEPOLICY_CAN_GROW, null, null, null, 0, false)); button1 = new JButton();
Create Listener
畫面大致完成,接著再添加處理邏輯。
- 點擊第一個JButton按鈕,由右鍵功能表裡點擊【Create Listener】。
-
再由【Create Listener】選單裡選要使用的動作Listener,我們先選用【ActionListener】。
-
再選用可以使用的methods,ActionListener只需要實作actionPerformed()。
-
按OK後會跳回原始碼分頁,並且該method的樣板已經自動產生好,我們只要再加入程式碼就可以了。
參考資訊
- IDEA的GUI Designer Reference
- 在IDEA外部執行產生好的class時會有找不到類別定義的錯誤,此時只要把IDEA/lib/forms_rt.jar加到classpath裡就會正確執行。
##
您可能也會有興趣的類似文章
- 使用IntelliJ IDEA學習Java程式設計 (IDEA #1) (0則留言, 2019/07/14)
- 用IntelliJ IDEA寫第一支Java程式;程式結構說明;Live Tempate用法(IDEA #4) (0則留言, 2019/08/09)
- 使用IntelliJ IDEA 12的Android UI Designer輕鬆寫Android App (1則留言, 2012/08/09)
- 使用IntelliJ IDEA建立Spring Boot專案 (0則留言, 2016/03/18)
- 如何在啟動IntelliJ IDEA idea64.exe時指定特定JDK (0則留言, 2015/11/14)
- Migration Guide: Eclipse ✈ IntelliJ IDEA (0則留言, 2015/07/07)
- [IntelliJ IDEA] Java / JavaScript除錯小技巧 (0則留言, 2014/08/14)
- [Windows] IntelliJ IDEA自動偵測Windows Defender的排除資料夾設定 (2則留言, 2019/08/24)
- 原來IntelliJ IDEA也有中文的網站 (0則留言, 2008/08/22)
- 由桌面啟動IntelliJ IDEA 14 64-bit執行檔 (0則留言, 2014/11/07)
- IntelliJ IDEA直接開啟專案的方法 (0則留言, 2010/06/03)
- 方便的IntelliJ IDEA Markdown外掛idea-multimarkdown (0則留言, 2015/11/14)
- 第一次執行IntelliJ IDEA與初始設定(IDEA #2) (0則留言, 2019/07/14)
- IntelliJ IDEA的專案結構、模組設定與執行時組態設定(IDEA教學 #6) (0則留言, 2019/08/17)
- Java的資料型態與簡單的計算機程式 (IDEA #8) (0則留言, 2019/08/25)
Sorry, 很久沒用Google sc…