第7回 SWTでレイアウトを使わずに部品を配置するには

米持幸寿
2006/11/9


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

 連載を少し休んでいる間に、Eclipse 3.2になってしまい、ビジュアルエディター(以下、JVE)も高速化されてきました。今回から、レイアウト1つ1つを説明していきます(JVEについては連載第2回を、SWTで使用できるレイアウトの種類については連載第6回を参照してください) 。

 しかし、まずはレイアウトを使わないで部品を配置する方法を解説します。

レイアウトとして「null」を設定する

 SWTにおいてレイアウトを使わない、ということは、レイアウトのオブジェクトとして「null」を設定することを意味します。この場合、Compositeに配置される部品は、すべて相対位置で直接的に配置されることになります。

 前回までの連載と同様に、以下の作業からnullレイアウトの作業に入ります。

  • Javaパースペクティブを開く
  • Javaプロジェクトを作成する
  • Javaパッケージを作る
  • SWTのCompositeを指定して「Visual Class」を追加する

 さて、ビジュアルクラスを作成したばかりの状態では、Compositeには最初からGridLayoutが設定されています。部品を画面上に自由に配置したいな、と思う場合は、レイアウト設定を外します。外すには、次の操作をします。

  • JVE上で、追加したコンポーネントをクリックして選択する
  • 下の「プロパティー」ビューのLayoutプロパティーの値「GridLayout」をクリックする
  • 編集モードになるが、もう1回クリックする
  • ドロップダウンが表示されたら、「null」を選択する
  • エンターを押下して確定する
図1 レイアウトの削除

 これで、GridLayoutが削除され、nullレイアウトとなりました。JVEにはグリッド点が表示されます。

 nullレイアウトでは、部品を自由に置くことができます。パレットから部品を選び、JVE上で、置きたい場所をクリックするか、左上から右下に向かって斜めにこするようにドラッグすると、部品が自由な場所に置けます。

図2 クリックして配置

図3 ドラッグして配置

 配置した部品はクリックして選択すると線で囲われ、四角いインジケーター(リサイズ・ハンドルといいます)が出ますので、ドラッグして大きさを変えることができます。

図4 大きさの変更

 Label、Text、Buttonなどを適当に並べてみます。

図5 適当に並べたところ

ツールできれいに整頓

 さて、先ほど並べた部品はきれいには並びませんでした。ツールを使ってこれを整頓しましょう。

  • まず、背景をクリックしてどれも選択されていない状態にする
  • 上の3つのLabel、Text、Buttonを、Shiftキー(またはCtrlキー)を押したままでクリックし、3つとも選択された状態にする
  • ツールバー上で、「Show customize layout window(レイアウトのカスタマイズというウィンドウを表示)」というボタンを探してクリックし、レイアウトを調整するためのウィンドウを表示させる
図6 3つの部品を選択

 選択された3つの部品は、ハンドルが白いものと黒いものに分かれます。最後にクリックしたものが黒で、基準となる部品という意味になります。

図7 レイアウトのカスタマイズ

 nullレイアウトで有効な、「レイアウトのカスタマイズ」にあるComponentページのボタンは、次のような意味です。


左側面で並べる

上側面で並べる

幅をそろえる

分散ボックスを表示

左右方向中央で並べる

上下方向中央で並べる

高さをそろえる

横方向へ分散

右側面で並べる

下側面で並べる

部品のPreferred Sizeに変更する

縦方向へ分散

 先ほどの3つのボタンを選択したまま、次の順番でボタンを押してみてください。

  1. 高さをそろえる
  2. 下側面で並べる
  3. 横方向へ分散
図8 3つを自動調整

 この操作によって、高さが「変更」ボタンに合わされ、縦方向で並び、横向きのスペースが均一になるように並びます。均一化するときは、「分散ボックス」を表示して枠を調整すれば、詰めたり、離したりすることもできます。

 ちょっと高さが高いようなので、中央のリサイズ・ハンドルをドラッグして高さを調節します。3つすべてが連動して大きさが変えられます。

図9 高さを調節

 次に、住所のLabelをクリックして単独選択し、上のLabelをShiftキーを押しながらクリックして2つを選択します。次の順番でカスタマイズ・ボタンを押してください。

  1. 高さをそろえる
  2. 幅をそろえる
  3. 右側面で並べる

 Text2つ、右側のButton2つも、同じ作業で調整します。そうしたら、住所用のLabel、Text、Button3つのオブジェクトを選択し、「上側面で並べる」をクリックして並べます。

図10 下の段の整形後

 ちょっと間隔が空いているようです。3つが選択されたままの状態で、Shiftキーを押しながらマウスでドラッグして、上に近づけましょう。Shiftキーを押したまま移動すると、十字方向へ垂直(水平)移動となるため、横方向へずれません。

 同様の手順で、更新、キャンセルボタンを調整し終わったらコンポーネントを「実行」→「Java Bean」で実行してみます。

図11 実行結果

 注意点としてnullレイアウトでは、自動調整が働かないことになります。部品の位置は、Compositeの相対座標なので、フォントの大きさが変わったときには文字が小さく表示される、入り切らない、ということが起こります。この部品を別の部品に張り付けたとき、一部が隠れてしまう、すき間ができる、などの問題も起こります。ある特定の環境(Windowsのみ、など)を想定でき、なおかつダイアログなど再利用がない場合には、簡単な画面作成方法です。しかし、部品としての再利用性は低いと考えた方がいいでしょう。

 次回は、SWTで活用できる別の種類のレイアウトについて説明します。

筆者プロフィール
米持幸寿(よねもち ゆきひさ)
1987年に日本アイ・ビー・エム入社。メインフレームOS、ミドルウェアの障害対応、障害解析ソフトウェアの開発、ワークフローシステム開発、オブジェクト指向開発、Web開発などを経験。2000年より、ソフトウェアのテクノロジー・エバンジェリストとして活動中。


米持先進技術工房
テクノロジー・エバンジェリストとして活躍する米持氏が主催する、J2EEの最新技術情報を提供するWebサイト。
http://www-6.ibm.com/jp/developerworks/tips/ytech/


Java Solution全記事一覧



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

注目のテーマ

Java Agile 記事ランキング

本日 月間