用IntelliJ IDEA的GUI Designer開發Swing程式

由 · 發表於: · 更新於: | 瀏覽數: 2 / 67053

標籤：

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

GUI Form表單建立

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    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()就能編譯並執行了，執行畫面如下：
main3

17.其實還有一段GUI啟始的程式碼被直接寫到編譯後的.class檔裡，如果想要把額外增加的啟始程式也在.java裡出現的話，開啟設定視窗→【GUI Designer】→將【Generate GUI into】換成【Java source code】即可，內容大致如下：
setting1

    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

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

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

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

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

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

參考資訊

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

＃＃

您可能也會有興趣的類似文章

簡睿

服務於軟體業的資訊老兵。興趣廣泛，學習力佳，樂於分享所知所學。

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *