第3回 EclipseのVEでSWTアプリを作る
(後編)

米持幸寿
2005/12/28


米持先進技術工房 @IT分室では、テクノロジー・エバンジェリスト 米持幸寿氏が、J2EEの最新技術情報を提供します。最新技術の中身をいち早くキャッチアップしたい読者のためのコーナーです。

 本稿ではEclipseのVisual Editor(以下VE)を使ってSWTアプリケーションを作成する方法を解説します。前編ではVEを利用する環境を構築しました。後編ではいよいよVEを使い、SWTパネルをデザインしてみましょう。VEでパネルをデザインする基本は、次のステップです。

  1. Eclipseを起動する
  2. Javaプロジェクト(あるいは、Javaを継承したプロジェクト)を作成する
  3. [新規]でビジュアル・クラスを追加する
  4. ビジュアル・クラス(基本はShellかCompositeのサブクラス)に、ビジュアルエディタで部品を張り付けていく
  5. [実行]→[JavaBeans]で実行してテストする
  6. 4.、5.を繰り返す
  7. ビジュアル・クラスのソースコードはできるだけいじらないようにし(VEだけで編集する)、さらにサブクラスを作るなどしてリスナやデータ処理を追加してアプリケーションを完成させる

 作業を始める前にEclipseの基本的な操作は覚えてください。@IT内に記事がたくさんあります。

Visual Editorの準備


(1)ワークスペースにJavaプロジェクトを追加

 メニューから[ファイル]→[新規]→[プロジェクト]で、[Java プロジェクト]を選択して[次へ]ボタンをクリックし、[プロジェクト名]に適当に名前を付けて[終了]ボタンをクリックします。

(2)JavaプロジェクトのビルドパスにSWTを追加

  1. Javaプロジェクトのプロパティを開き、ビルドパスのライブラリータブを開きます。[パッケージ・エクスプローラ]ビューで、作成したJavaプロジェクトのアイコンを右クリックし、[プロパティー]を選択します。左側で[Java のビルド・パス]を選択し、右側に表示されるタブの[ライブラリー]をクリックします。
    図1 ビルドパスの設定

  2. 右側にある[ライブラリーの追加]ボタンをクリックすると、[ライブラリーの追加]パネルが表示されます。
    図2 SWTライブラリの選択
     
  3. SWTを選択して[次へ]ボタンをクリックします。[SWT Library Options]パネルが表示されます。
    図3 JFaceの選択

  4. [Include support for JFace Library]を選択し、[終了]ボタンをクリックします。

  5. 前のウィンドウに戻りますので、[OK]ボタンをクリックして閉じます。

(3)SWTのサンプルを確認

 まずは、普通のJavaクラスを作って、SWTがどのようにコーディングされるものか確認しておきましょう。 プロジェクトにFirstCompositeクラスを追加してください。上記のリンク先のファイルをローカルファイルとして保存し、それをPackage ExplorerビューのJavaプロジェクトにドラッグ&ドロップします。(default package)に追加されます。

 このクラスを、メニューから[実行]→[構成および実行]→[Java Bean]で実行してみてください。

図4 FirstComposite の実行結果

 ソースコードを見て、基本を押さえてください。SWTでは、第1引数に、親として別の部品のインスタンス参照を渡すことで親子関係(包含関係)が築かれます。これで、ラベル、入力フィールド、ボタンなどがCompositeの上に乗った状態になります。部品がどこに置かれるかは、レイアウトで決まります。

 レイアウトが設定されていない(null)とき、上に載る部品に対して[setBounds]することで自由な場所に置くことができます。レイアウトに[FillLayout、FormLayout、GridLayout、RowLayout]などをセットした場合、追加された順番と、LayoutDataと呼ばれるデータに従って自動的にレイアウトされます。このサンプルでは、GridLayoutを使って3列2行の表の形式に自動レイアウトしています。

 では、これと同じレイアウトをVEで作ってみましょう。

(4)ビジュアル・クラスを追加

 パッケージ・エクスプローラ上でパッケージを右クリックし、[新規]→[Visual Class]を選択してください。パッケージが分かる人はパッケージを作成しても構いません。ここではcom.yoneというパッケージを作成しています。

図5 ビジュアル・クラスの追加

 任意の名前を付けてください(ここでは[MyComponent]という名前にしたことにします)。[Style]から[SWT-Composite]を選択。[終了]ボタンをクリックしてください。

 以上で、ビジュアルエディタが起動して、追加したビジュアル・クラスを編集することができます。

 VEでは、4つのビューを使ってパネルを編集していきます。

図6 ビジュアルエディタのビュー
  • WYSIWYGエディタ
    ビジュアルエディタの心臓部で、このビューを使ってパネルを編集します。

  • ソースエディタ
    WYSIWYGエディタの下にJavaソースコードエディタが同時表示されます。部品をクリックしたときや、部品やアクション(イベント処理)を追加したときに、該当個所が表示され、編集できます。

  • プロパティーエディタ
    部品をクリックして選択状態にすると、その部品の属性が設定できます。

  • JavaBeans
    ビジュアル・クラスに追加されている部品が、親子関係でツリー表示されます。ここでも部品をクリックして選択状態にすることができます。自動的に追加されていく部品などを確認することができます。

  1/2

 INDEX

第3回 EclipseのVEでSWTアプリを作る(後編)
Page1
Visual Editorの準備
  Page2
GridLayoutで部品を並べる



Java Solution全記事一覧



Java Agile フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Java Agile 記事ランキング

本日 月間
ソリューションFLASH