« アクティブなエディタの取得方法 | トップページ | 翻訳ビュープラグイン »

2004.10.21

かっこいいタブの作り方(CTabFolder)

Eclipse2.1からEclipse3.0になって最も目立つ変更点,それはIDEの概観である。2.1までは角ばっていたイメージが,3.0からは曲線による丸いイメージに変化している。特に複数のビューやエディタを束ねるためのタブについては,とてもかっこいい仕上がりになっている。例えば「タブブラウザを自作したい」といった場合,このタブを使わない手はない。もちろん,自作プラグインやリッチクライアントにて上記のタブを利用できるようになっている。今回は,このかっこいいタブを使うための方法について紹介する。

CTabFolder1.gif

SWTでは従来からTabFolderクラスにてタブペインを実現するためのコンポーネントが提供されてきたが,Eclipse3.0からはSWTのカスタムコンポーネントとしてCTabFolderクラスが提供されている。このCTabFolderクラスが,かっこいいタブを実現してくれているコンポーネントである。以下に使い方の例を示す。

  CTabFolder tabFolder = new CTabFolder(
        composite, SWT.BORDER | SWT.CLOSE);
  CTabItem taroTab = new CTabItem(tabFolder, SWT.NONE);
  taroTab.setText("タロ(Mr. Taro)");
  CTabItem jiroTab = new CTabItem(tabFolder, SWT.NONE);
  jiroTab.setText("ジロ(Mr. Jiro)");

CTabFolder2.gif

まず,貼り付ける親のコンポーネントとSWTクラスで定義された定数を使って,CTabFolderオブジェクトを生成する。上記では,SWT.BORDER定数を指定することによりタブペイン全体の枠線を描画させ,さらにSWT.CLOSE定数を指定することにより各タブに閉じる(×)ボタンを付与させている。その後CTabItemオブジェクトを2つ生成してタブを追加し,それぞれにタブの名称をセットしている。

これではEclipseのIDEとちょっと見た目が違っているが,もちろん各種setterを使うことによって概観を変更することができる。

まずはEclipseのIDEのように,タブの高さを少し高くして,タブに曲線が使われるようにしてみる。タブの高さの調整はsetTabHeightメソッドを使用し,タブの描画に曲線が使われるようにするためにsetSimpleメソッドを使用する。

  tabFolder.setTabHeight(25);
  tabFolder.setSimple(false);

CTabFolder3.gif

更に,選択されているタブの文字色と背景色を付けてみる。選択されているタブの文字色の変更にはsetSelectionForegroundメソッドを,選択されているタブの背景色の変更にはsetSelectionBackgroundメソッドを使用する。特にsetSelectionBackgroundメソッドでは,複数の白を指定してグラデーションさせることできるようになっている。

  Display display = Display.getCurrent();
  Color titleForeColor =
    display.getSystemColor(SWT.COLOR_TITLE_FOREGROUND);
  Color titleBackColor1 =
    display.getSystemColor(SWT.COLOR_TITLE_BACKGROUND);
  Color titleBackColor2 =
    display.getSystemColor(SWT.COLOR_TITLE_BACKGROUND_GRADIENT);

  tabFolder.setSelectionForeground(titleForeColor);
  tabFolder.setSelectionBackground(
    new Color[] {titleBackColor1, titleBackColor2},
    new int[] {100},
    true
  );

CTabFolder4.gif

DisplayオブジェクトのgetSystemColorメソッドを使って,OSで割り当てられている色(上記ではタイトルで使用される目的で用意されているもの)のColorオブジェクトを取得している。そして,setSelectionForegroundメソッドを使って文字色を,setSelectionBackgroundメソッドで背景色をセットしている。setSelectionBackgroundメソッドの引数には,グラデーションさせたい色のColorオブジェクトの配列と,色の占める割合の数値(%),グラデーションの方向(縦にしたければtrue)を渡す。グラデーションではなく単色でいいのであれば,setSelectionBackground(Color) メソッドを使えばよい。

各タブへのコンポーネントの追加は,CTabItemオブジェクトのsetControlメソッドを使用する。

  Label hello = new Label(tabFolder, SWT.NONE);
  hello.setText("こんにちは!");
  taroTab.setControl(hello);

CTabFolder5.gif

CTabItemオブジェクトのsetImageメソッドでアイコンも指定すれば,よりかっこいいタブペインになるだろう。

|

« アクティブなエディタの取得方法 | トップページ | 翻訳ビュープラグイン »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/12631/1736466

この記事へのトラックバック一覧です: かっこいいタブの作り方(CTabFolder):

« アクティブなエディタの取得方法 | トップページ | 翻訳ビュープラグイン »