Swing (eclipse)

ここでは、Swing + Eclipse WindowBuilder の使い方を見ていきます。

GUI エディタ

GUI プログラムを作成する際、 完成GUI画面を見ながら、画面構成をするためのツールがいくつかあります。

演習室では、Eclipse の追加機能として WindowBuilder を入れてあります。

WindowBuilder の利用

• 新規作成： Java project の中にクラスを作成する代わりに、「新規」→「その他」→「WindowBuilder」`→「SwingDesinger」を選ぶと、各種 GUI コンポーネントが選択できます。例えば、JFrame を選んでみるとよいでしょう。

• ダウンロードしたファイルを WindowBuilderで編集したい時などは、file右クリックで、「次で開く」→「WindowBuilderエディター」とすると、可能ならデザインツールで開けます。

デザインツールの利用

• ソースとDesignというタブがあり、デザイン画面への切り替えが可能です。

• コンポーネント／コンテナの包含・所属関係は、コンポーネント画面に表示。部品を drag&drop することで、生成＆移動も可能です。

• タイトルやサイズといった各コンポーネントの属性は、プロパティ画面で確認／変更可能。

• Paletteに、部品用のコンポーネントが並んでいます。配置先のコンテナを選択後、配置したいコンポーネントをPaletteから選択し、ドロップの際に配置場所を選ぶ。

  • 事前に、コンテナの layout manager 設定を済ませておくこと。
    Layout Manager は、コンテナを選んで右クリックなどで設定可能。properties windows で設定するのでも良い。

Event Handler

設定は、コンポーネント選んで、右クリック"Events"などで可能。テンプレートが、anonymous class のメソッドとして生成される。

プログラム例

こんどは、鎌田の作成した簡単なペイントツール（といっても、四角形を書けるだけですが）を例に、プログラムの構成を見ていきましょう。

主な構成部品は

• PaintTool: アプリ本体。Window Builder で作成。右クリして「次で開く」→「WindowBuilder」してみてください。design view で画面構成を見れます。
• CustomView: 自作のDraw系コンポーネント（ペイント画面相当、Drawで説明）

だけです。

Viewの構成

まずですが、View の説明ということで、PaintToolを紹介します。Designer をつかって、画面構成を作成していきます。

あらかじめ、後述の CustomView は作成してあると思っておいてください。

このプログラムですが、以下の手順で作成しました。

1. まずは、WindowBuilder で、新規 JFrame クラスを選んで、PaintTool を生成。mainメソッドなども自動生成。
2. JFrame　に対し、title やpreferredSize といったProperty設定。サイズは拡張プロパティとして隠れているかも知れません。適当に、ON/OFFしてください。
3. JFrame の ContentPane の Layout は、BorderLayout のまま。
4. Palette からコンポーネントを選択 (Choose Component) を選び、CustomViewを選択、ContentPaneのセンターに配置。
5. 下の操作パネルを配置すべく、まずはPalette からJPanelを ContentPaneの下側に配置。コンポーネント階層でContentPaneを選んでから drag & drop しましょう。
6. 今度は、先ほどの操作用JPanelの中に、ボタンを二つ配置します。ボタンの文字は、reset, undo にしときましょうか。
7. event handler をボタンに登録しましょう。ボタンを選んで、右クリック、「Add event handler」→「action」→「actionPerformed」を追加し、customView オブジェクトの reset(), undo()でも呼んでおきましょう。あとでつくらないとですけど。

ここまでは、ほとんどGUI だけの操作でできます。