Eclipseプラグイン実践テクニック(5)

Eclipse Formsでリッチクライアントアプリ開発


NTTデータ先端技術
竹添直樹
NTTデータ 基盤システム事業本部 岡本隆史
2007/1/19


今回の主な内容


 Eclipse FormsによるUIは一味違う

 Eclipseプラグイン開発では、基本的にSWT(Standard Widget Kit)を用いてユーザーインターフェイスを構築します。SWTはネイティブ・ウィジェットをラップしたGUIツールキットであり、デスクトップ環境と親和性の高いユーザーインターフェイス(UI)を提供します。

編集部注:SWTについての詳細は、「米持先進技術工房@IT分室、第2回 EclipseのVEでSWTアプリを作る(前編)」を参照してください。

 しかし、Eclipseのユーザーインターフェイス全般を考えた場合、ダイアログなどではよいものの、ビューやエディタ内部で複雑なユーザーインターフェイスを提供する場合、SWTで構築すると違和感が出てきます。例を挙げてみましょう。

図1 SWTで作成したエディタ
図1 SWTで作成したエディタ (画像をクリックすると拡大表示します)

 これはTODOリストを編集するためのエディタの例ですが、SWTで作ると何だか妙にゴテゴテしていて違和感を感じるのではないでしょうか。

 次に以下の画面を見てください。

図2 Eclipse Formsで作成したエディタ
図2 Eclipse Formsで作成したエディタ (画像をクリックすると拡大表示します)

 どうでしょう。項目自体はSWTの場合とまったく同じですが、違和感はなくなったのではないでしょうか。Webページの見た目に近いものがあります。このユーザーインターフェイスはどこかで見たことがありますね。そう、プラグイン開発の必須機能であるPDE(Plug-in Development Environment)マニフェストエディタでも、同様のユーザーインターフェイスが採用されています。

 Eclipse上でこのようなユーザーインターフェイスを提供するライブラリが、Eclipse Formsなのです。Eclipse FormsはもともとPDEのマニフェストエディタのために開発されたもので、当初はPDEの一部として提供されていましたが、現在はPDEからは独立したプラグインとなっています。今回は、このEclipse Formsの利用法について見ていくことにします。

編集部注:PDEマニフェストエディタについての詳細は、「Eclipse徹底活用、第8回 Eclipseプラグインを作る(1)」を参照してください。

 Eclipse Formsを使ってみよう


初めてのEclipse Forms

 Eclipse Formsはorg.eclipse.ui.formsプラグインによって提供されていますので、まずはこのプラグインを依存関係に追加しておく必要があります。

編集部注:プラグインを依存関係に追加し、Eclipseの機能を拡張する方法についての詳細は、「とっても簡単Eclipseプラグイン、第2回 「Hello♪」を表示するだけのEclipseプラグイン」を参照してください。

 Eclipse Formsでは、org.eclipse.ui.forms.widgets.FormToolkitというユーティリティクラスを用いてウィジェットを作成します。通常は、FormToolkitからFormオブジェクトを作成し、その配下にラベルやテキストフィールドなどのウィジェットを配置していきます。リスト1はEclipse Formsを使用した最もシンプルなフォームの例です。

リスト1 Eclipse Formsの使用例のコード
// ツールキットを作成
FormToolkit toolkit = new FormToolkit(parent.getDisplay());

// ツールキットを使用してフォームを作成
Form form = toolkit.createForm(parent);

// フォームのタイトルを設定
form.setText("Eclipse Formsについて");

// フォーム本体のレイアウトを設定
Composite body = form.getBody();
body.setLayout(new TableWrapLayout());

// ツールキットを使用してラベルを作成
Label label = toolkit.createLabel(body,
    "Eclipse Formsはorg.eclipse.ui.formsプラグインに"
    + "よって提供されていますので、まずはこのプラグインを依存関"
    + "係に追加しておく必要があります。", SWT.WRAP);

 表示は図3のようになります。

図3 最もシンプルなEclipse Formsのフォームの例
図3 最もシンプルなEclipse Formsのフォームの例

 ここでは、FormToolkit#createForm()でフォームを作成しましたが、代わりに、FormToolkit#createScrolledForm()で作成できるScrolledFormも使用できます。ScrolledFormはコンテンツが表示領域に収まり切らない場合、スクロールバーが表示されるフォームです。

Eclipse Formsのウィジェットの種類

 最初の例でも使用しましたが、FormToolkitには各種ウィジェットを生成するために、表1のようなファクトリ・メソッドが用意されています。

表1 FormToolkitが提供するウィジェット作成用メソッド一覧
メソッド 説明
・Label createLabel(Composite parent, String text)
・Label createLabel(Composite parent, int style)
ラベルを作成
・Text createText(Composite parent, String text)
・Text createText(Composite parent, String text, int style)
テキストフィールドを作成
・Button createButton(Composite parent, String text, int style) ボタンを作成
・Table createTable(Composite parent, int style) テーブルを作成
・Tree createTree(Composite parent, int style) ツリーを作成
・Composite createComposite(Composite parent)
・Composite createComposite(Composite parent, int style)
Compositeを作成
・Hyperlink createHyperlink(Composite parent, String text, int style) ハイパーリンクを作成
・ImageHyperlink createImageHyperlink(Composite parent, int style) 画像リンクを作成

 これらのファクトリ・メソッドはSWTのウィジェットを返却します。Eclipse FormsはSWT上に構築されているため、そのほかのSWTウィジェットやイベントリスナ、レイアウト・マネージャと組み合わせて利用することも可能です。

 例えば、FormToolkitから作成することができないコンボボックスなどを使用する場合は直接SWTのウィジェットを使用する必要があります。

 先ほど作成したフォームにウィジェットを追加してみましょう。

リスト2 ウィジェットの使用例のコード
// テキストフィールドを作成
Text text = toolkit.createText(body, "テキストフィールド", SWT.NULL);
text.setLayoutData(new TableWrapData(TableWrapData.FILL));

// ボタンを作成
toolkit.createButton(body, "SWT.PUSH", SWT.PUSH);
toolkit.createButton(body, "SWT.CHECK", SWT.CHECK);

// コンボボックスを作成
Combo combo = new Combo(body, SWT.READ_ONLY);
combo.add("Eclipse");
combo.add("NetBeans");

// ハイパーリンクを作成
toolkit.createHyperlink(body, "Hyperlink", SWT.NULL);

// 画像リンクを作成
ImageHyperlink imageLink = toolkit.createImageHyperlink(body, SWT.NULL);
imageLink.setImage(Activator.getDefault().getImageRegistry()
                                        .get(Activator.IMAGE_FILE));
imageLink.setText("ImageHyperlink");

 リスト2のフォームは図4のように表示されます。

図4 さまざまなウィジェットの使用例
図4 さまざまなウィジェットの使用例


なんと、セクション
も作成できる

 FormToolkitからはウィジェットだけでなく、セクションを作成できます。表示する項目が多い場合は、機能や分類ごとにセクションを分けて表示すると分かりやすくなります。セクションはFormToolkit#createSection()で作成します。リスト3では、見出し付きのセクションを作成しています。

リスト3 セクションを作成
// セクションを作成
Section section = toolkit.createSection(form.getBody(), Section.TITLE_BAR);
section.setText("セクション");
section.setLayoutData(new TableWrapData(TableWrapData.FILL_GRAB));

// セクションの内容を作成
Label label = toolkit.createLabel(section, "セクションの内容");
section.setClient(label);

 表示は図5のようになります。

図5 タイトル付きのセクションの表示例
図5 タイトル付きのセクションの表示例

 FormToolkit#createSection()でセクションを作成しています。このとき、スタイルオプションには、Sectionクラスで定義されている定数値を指定できます。

 例えば、Section.TITLE_BAR|Section.TWISTIE|Section.EXPANDEDと指定すると、図6のようにセクションの折り畳みが可能になります。

図6 折りたたみ可能なセクションの表示例
図6 折り畳み可能なセクションの表示例

 
1/3

 INDEX
第5回 Eclipse Formsでリッチクライアントアプリ開発
Page1
Eclipse FormsによるUIは一味違う
Eclipse Formsを使ってみよう
  Page2
Eclipse Formsならではのレイアウト・マネージャを使う
  Page3
フォームにHTMLテキストを表示させるには?
Eclipse RCPにも役立つ



Java Solution全記事一覧



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

注目のテーマ

Java Agile 記事ランキング

本日 月間