【Java】 Window Builderを使って、SwingでGUIをサクッと作るよ(｀・ω・´)

• Twitter
• Facebook
• B! はてブ
• Pocket
• Feedly

『JavaでGUIアプリを作るぉ(｀・ω・´)』という場合、AWTやSwingといったGUI作成用のJavaツールキットを用います。

EclipseでVisual Studioのリソースエディタみたいにマウス操作主体でGUIを作成するには、
『Window Builder』というプラグインを導入する必要があります。

『Window Builder』のインストール方法や、SwingでのGUI階層構造、GUI作成の実践などは以下から。。。

Window BuilderをEclipseにインストール

Eclipseのメニューで [Help]-[Install New Software...] を選択。　上図のような[Install]画面が開きます。

[Work with:]欄にEclipseのバージョンに合わせたURLを入力して、[type filter text]と表示された欄に『swing』と入力します。
->　私の環境はEclipse Ver.3.7.0 (通称 indigo)なので、『http://download.eclipse.org/releases/indigo』を使いました。

一覧に [General Purpose Tools]-[Swing Designer] が表示されたらチェックONにして、[Next >]をクリックします。
ライセンスの同意を求められたら、『同意』して先に進みます。

SwingのGUI階層構造イメージ

Pane(領域)に、Layout(配置の決まり)を設定し、そこにボタンなどのComponent（UI部品）を置きます。

Componentの配置はLayoutクラスが自動的に調整してくれて、『横一列に並べる』や『グリッド状に並べる』など、
Layoutを選ぶだけでいろいろな配置が可能です(｀・ω・´)ｳﾏｰｗ

この構造はさらに階層化可能で、上図のような少し複雑な構造にすることも出来ます。

ではGUIをサクッと作ってみましょうｗ

まずパッケージ内に適当にクラスを作ります。こんな感じでｗ

package t2wonderland.java;

import javax.swing.*;

//WindowにあたるJFrameクラスを継承
public class Sample extends JFrame {
 private static final long serialVersionUID = 1L;
 
 public Sample(){
 // Windowサイズと、閉じるボタン押下時の処理を追加
        this.setSize(400,300);
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 }

 public static void main(String[] args) {
  // Windowを表示
  Sample sample = new Sample();
  sample.setVisible(true);  
 }

}

この例では、Javaプロジェクトに『t2wonderland.java』という名前のパッケージを作成し、
その中にJFrameクラスを継承した『Sample』という名前のクラスを作りました。

そのクラスファイルを右クリックして [Open With]-[WindowBuilder Editor] を選択します。

すると上図のような画面でソースコードが表示されるので、[Design] タブをクリックします。

すると上図のような、Visual Studioを使ったことがある人なら見覚えがありそうな画面が表示されます。

まず、[Palette]-[Layouts]-[BoxLayout]を選択し、
選択した状態のまま [Structure]-[Components]-[getContentPane()] をクリックします。

[getContentPane()]を選択した状態で、画面左下の [Propeties]-[Layout]-[Constructor]-[axis] を選択し、
[Y_AXIS]に設定しておきますｗ

[Palette]-[Components]-[JTextPane]を選択し、
選択した状態のまま [Structure]-[Components]-[getContentPane()] をクリック。
[JPanel]についても同様に追加して、上図のようにします。

[Structure]-[Components]-[panel]に[BoxLayout]を設定し、[JButton]を2つ追加すればメモ帳っぽいGUIの完成です(｀・ω・´)

個人的にはMFCアプリケーションを作るときよりも、何倍もGUIが作りやすいなと感じました・・・ｗ
ボタンとかが追加されても自動的に再配置してくれるところとか、感動ものです。。。

参考資料

ボタンを押した際のファイル保存・読込処理などの実装は、以下の記事が詳しいのでそちらを参照下さいm(_ _)m
【codezine】 Java入門 (6) - テキストファイルアクセスと例外処理