ページ一覧

ページ内

Swing (IntelliJ)

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

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

IntelliJ では、Swing UI Designer というのがあります。

実際のプログラム作成過程を見ながら、使い方を見てもらえばよいかと。

プログラム例

以下は、鎌田の作成した簡単なペイントツールです。 といっても、四角形を書けるだけですが。

主な構成部品は

  • PaintTool2: アプリ本体, GUI tool で作成したもの。
  • CustomView: 自作のDraw系コンポーネント（ペイント画面相当、Drawで説明）

だけです。

GUI tool で作成したのは、PaintTool2 の方です。

IntelliJ でみると、src directory 中に PaintTool2 というdirectory みたいなものがあり、その中に、class と (GUI) form が入っています。GUI form (実際には、こんな感じの XML ファイルで画面構成をおこなうと、PaintTool2 クラスに、「勝手に」部品初期化メソッドが追加される感じです。 なので、クラス単体では動作せず、IntelliJ の中で、form ファイルと一体で動作する形になっています。（class file + form file でも動作）

Viewの構成

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

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

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

  • 1: File　→　New → Swing UI Designer → GUI Form を選択、クラス名 (PaintTool2)を指定し、Create Bound Class を指定。Layout は、今回は BoarderLayout 選択。（git に登録するか聞かれますが、お好きにどうぞ)
    • PaintTool2という「くくり」で、form ファイルとクラスが作成されました。
    • form で、GUI の設定をおこなうと、対応クラスに、対応するコンポーネント用フィールドや Listener および、コンポーネントの初期化コード（ユーザには直接見えません。設定を変更して、File→Seetings→Editor→GUI Designer で、Generate GUI into: を Binary class ではなく、Java source code にすると、初期化ルーチンが見えるようになります）が準備されるようになります。

IJ画面1

  • 2: GUI Form で、 Windows 内部のメイン Panel を作成することになります。Form 中の JPanel を選んで、名前(contentPane)を付けます。(上図)
    • 対応クラスにも対応フィールドが生まれたかと。
  • 3: CustomView を配置してみましょう。
    • 注: CustomView.java を事前にコンパイルしておく必要があります。「金づちマーク (build project)」を押して、コンパイルを済ませておきましょう。
    • Form の Palette から Non-Palette Component を選んで、Class: CustomView (1. で準備済みのクラス)を画面中央に配置します。
    • cuttomView というフィールド名もつけておきます。
    • サイズも設定しておきましょう。property 一覧で、show expert properties で、preferredSize を 600, 400` とかにしておきましょう。
    • 将来的には、mouse listener なども追加することになります。
  • 4: 画面下側のパネルを配置すべく、まずはPalette からJPanelを画面の下側に。
    • layout: FlowLayot にしておきます。
  • 5: 今度は、先ほどの操作用JPanelの中に、ボタンを二つ配置します。Component Tree 上で、JPanel を選択してから、JButton をdrag & drop する方が確実かも。
    • property editor 上で、フィールド名もbtnReset, btnUndo にしました。ボタンの文字も、reset, undo に変更。

IJ画面1

  • 6: ちなみに、この時点で対応クラスをみても、フィールド名が並んでいるだけ。
  • 7: form 画面に戻って、event handler をボタンに登録しましょう。
    • ボタンを選んで、右クリック、「create listener」→「actionListener」を追加し、OK です。対応クラスに、Listener が追加されます。
    • これを、undo, reset ボタンの両方に加える。
    • 同様に、customView にも MouseListener (MousePressed, MouseReleased) や MouseMotionListener (MouseDragged) を追加しています。

これで、画面構成＆ハンドラ生成ができました。（ハンドラの中身は、自分で書かないとですけどね。）

ただ、対象クラスを実行するにも、 main method がないので作成します。

  • 8: 対象クラスのトップ（メソッド内などで無い場所）にカーソルをおいた状態で、Menu から Code→Generate (ショートカットキーもある)で、form main を選ぶと、当該 contentPane を設定した JFrame を作成するためのメソッド群が生成されます。
    • フレームのタイトルとか、適時修正してもらえばよいかと。
    • この段階で、PaintTool2 を右クリックして、run main() すると、立ち上がるはずです。まだ、イベントハンドラの中身からですけど。

Read more

Swing (eclipse) Draw