用IntelliJ IDEA的GUI Designer開發Swing程式

原來IntelliJ IDEA的GUI Designer已經進步到非常方便了，透過簡單的拖拉就能快速的建立Swing視窗。以下是使用IDEA 13的簡要操作紀錄，目標是建立一個資料庫連線設定對話窗。

GUI Form表單建立

1. 在置放原始程式的資料夾按右鍵→【New】→【GUI Form】即能建立圖形介面表單。
   

2. 接著在New GUI Form對話窗輸入表單名稱與類別名稱，【Create bound class】必須勾選，IDEA會依名稱建立.java與.form的檔案，前者是Java原始檔，後者存放圖形元件。
   

3. 進入GUI Designer畫面，左上方是表單的元件清單，其下方是元件特性設定區，中間是圖形畫面，右方是所有元件的調色盤，在調色板按了某個元件後，將游標移入中間就能將之放入，放入時要決定對齊的方式。GUI Form預設會新增一個JPanel容器元件。
   

4. 我們要在底部放兩個按鈕，先放上一個JPanel面板，再把按鈕放在這個面板之上。先由調色盤點選JPanel，再將游標移到底部直到出現藍框並標示為【(bottom)】為止再放開。
   

5. 再點選JButton在底部靠左放入第一個按鈕。
   

6. 再放入第二個按鈕，蓋框要涵蓋面板剩餘空間。
   

7. 兩個按鈕都放置好後會自動調整位置，變成更個均等的按鈕，佔滿整個底部面板。
   

8. 再來對按鈕做細部設定。先點擊左邊按鈕，再修改【field name】與【text】特性。
   

9. 再於最頂端新增JLabel當做功能說明字串。
   

10. 在第一個JLabel下方再插入一個JLabel。對齊藍線在其正下方。
    

11. 在第一個JLabel下方再放一個JLabel，再於其右方欄位裡放入輸入用的JTextField。
    

12. 重覆上述操作共放入5個JLabel、5個JTextField。
    

13. 編輯【text】與【field name】特性，最後畫面如下。
    

14. 點選任意一個元件後按〔F4〕（Jump to source）跳至Java原始碼該元件宣告處。將游標移到最後面按〔Alt+Insert〕以自動產生程式碼，此時使用【Form main()】來產生顯示此GUI表單的main()。
    

15. 然而此時系統卻會彈出無法繫結到根元件的錯誤訊息。只要回GUI Designer，點擊第一個JPanel元件，並且在【field name】輸入一個名稱（如Panel1）就可以正常產生main()程式碼。
    

    public static void main(String[] args) {
      JFrame frame = new JFrame("SetupForm");
      frame.setContentPane(new SetupForm().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("SetupForm");
      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

畫面大致完成，接著再添加處理邏輯。

1. 點擊第一個JButton按鈕，由右鍵功能表裡點擊【Create Listener】。
   

2. 再由【Create Listener】選單裡選要使用的動作Listener，我們先選用【ActionListener】。
   

3. 再選用可以使用的methods，ActionListener只需要實作actionPerformed()。

4. 按OK後會跳回原始碼分頁，並且該method的樣板已經自動產生好，我們只要再加入程式碼就可以了。

參考資訊

• IDEA的GUI Designer Reference
• 在IDEA外部執行產生好的class時會有找不到類別定義的錯誤，此時只要把IDEA/lib/forms_rt.jar加到classpath裡就會正確執行。

＃＃

• 使用IntelliJ IDEA 12的Android UI Designer輕鬆寫Android App (1則留言, 2012/08/09)
• 原來IntelliJ IDEA也有中文的網站 (0則留言, 2008/08/22)
• IntelliJ IDEA直接開啟專案的方法 (0則留言, 2010/06/03)
• IDEA的編輯web.xml的圖形介面 (0則留言, 2005/06/06)
• [Java] 終於解決IntelliJ-IDEA 8.0.1的中文輸入法問題 (7則留言, 2008/12/04)
• IntelliJ IDEA也有內建剪貼簿功能，方便複製貼上程式碼 (0則留言, 2013/07/21)
• IntelliJ IDEA 12的任務功能，與Issue/Bug Tracking System整合 (0則留言, 2013/07/20)
• 方便的IntelliJ IDEA資料庫功能 (0則留言, 2013/07/19)
• IntelliJ IDEA與Tomcat整合的除錯設定 (0則留言, 2012/11/23)
• IDEA12快速尋找編輯檔案的幾個方法 (0則留言, 2013/01/20)
• [Java] 常用的IDEA Plugins (0則留言, 2005/06/02)
• IDEA 5.0試用版的測試結果：怎一個慘字了得！ (2則留言, 2005/05/28)
• [Java] IDEA 5.0觀看JSP檔案的不同View (0則留言, 2005/08/04)
• [Java] IDEA 5.0正式釋出 (0則留言, 2005/08/02)
• Servlet 3.0的檔案上傳寫法 (2則留言, 2012/06/19)

The post 用IntelliJ IDEA的GUI Designer開發Swing程式 appeared first on 簡睿隨筆.