Eclipse e4 の見どころ

XWT を中心に紹介します

e4 プロジェクトは次世代の Eclipse です。e4 はコンポーネント・ベースのパーベイシブ・アプリケーションやツールのためのプラットフォームを提供します。この記事では、XWT や宣言型のスタイル設定など、e4 の新機能をいくつか学びます。XWT は新しいツールキットであり、SWT/JFace アプリケーションの構造を XML で宣言することで定義し、ビジネス・ロジックを Java™ コードで記述することができます。XWT を使用すると、モデルと表示とを分離することができる一方、元来 SWT/JFace アプリケーションのために作成していたレイアウト用のコードや UI 関連のコードの大部分が必要なくなります。この記事ではサンプル・アプリケーションを使って、XWT インターフェースとデータ・バインディング機能を紹介します。

Yi Ming Huang, Software Engineer, IBM

Yi Ming Huang は、China Development Lab で Lotus ActiveInsight に取り組んでいるソフトウェア・エンジニアです。ポートレット/ウィジェット関連の Web 開発で経験を積んだ彼は、REST、OSGi、および Spring 技術に興味を持っています。



2009年 12月 08日

はじめに

e4 プロジェクトは現在インキュベーション・フェーズにある、次世代の Eclipse です。Eclipse V4.0 は 2010年にリリースされる予定です。e4 は現在の Eclipse と OSGi 技術を確固たる基礎として、コンポーネントの作成と再利用を容易にすることを主要な目的として構築されています。さまざまなコンピューティング環境 (Web/RIA、デスクトップ、サーバー、クラウド、組み込みなど) にわたり広く使われている統一的なプラットフォーム、そしてより多くの技術が、シームレスに Eclipse に統合されるはずです。その一例として、以下のようなものがあります。

  • ソフトウェア・コンポーネントをより適切に分離する、OSGi に基づく高度なプログラミング・モデル。
  • SWT/JFace アプリケーションの構造を宣言型で定義するための新しいツールキットまたはフレームワークである XWT。
  • アプリケーション・コードを明示的に変更せずに UI コンポーネントを表示するための CSS (Cascading Style Sheets)。
  • SWT (Standard Widget Toolkit) Browser Edition と呼ばれる、SWT の新しいエディション。これを利用すると、既存の SWT アプリケーションをブラウザーの Flash プレーヤーで実行することができます。
  • JavaScript で作成され、Eclipse ランタイムで実行されるソフトウェア。

この記事では e4 の主な機能をいくつか学びます。また、e4 の新しい XWT インターフェースとデータ・バインディング機能を使用するサンプル・アプリケーションも作成します。XWT は SWT/JFace の UI コンポーネントを XML で作成するための宣言型のツールキットです。


新しい機能

e4 には、プログラミング・モデルからランタイム拡張機能まで、いくつかの新機能があります。これらの新機能によって、Eclipse プラットフォームは将来にわたって拡張可能なものになります。このセクションでは、注目に値するいくつかの機能の概要を簡単に説明します。詳細については「参考文献」を参照してください。

サービス・プログラミング・モデル

元々のサービス・プログラミング・モデル (OSGi、つまり Eclipse の拡張機能レジストリ) には、サービス・ブローカー、サービス・プロバイダー、サービス・コンシューマーという 3 者があります。プロバイダーは自分自身をブローカーに登録し、コンシューマーはブローカーを参照して求めているサービスを探索します。こうすることでサービス・プロバイダーとサービス・コンシューマーをうまく分離できますが、プロバイダーとコンシューマーは特定のサービス・ブローカーを明確に認識している必要があります。

e 4 での強化されたサービス・プログラミング・モデルでは、コンテキストの概念を導入しています。コンテキストはサービス・ブローカーの一部であり、サービスの発見方法や、サービスをサービス・コンシューマーに提供する方法を、保管し、知るためのメカニズムです。サービス・コンシューマーは依存性注入技術を使用して、必要なサービス・プロバイダーの実装を実行時に注入します。こうすることによって、サービス・コンシューマーはサービス・ブローカーについての情報を持っている必要がなくなります。サービス・プロバイダーはさまざまな技術を使用することで、自分自身をサービス・ブローカーに宣言、あるいは登録することができます。図 1 はサービス・プログラミング・モデルの進化を示しています。

図 1. サービス・プログラミング・モデル
このスクリーンショットには、サービス・プログラミング・モデルの進化が示されています。

モデル化された UI

これまで Eclipse プラットフォームの UI を生成する際には、ワークベンチを明示的にハードコーディングすることで、ワークベンチのウィンドウ、ワークベンチのページ、エディター領域、そしてビュー・スタックをレイアウトしていました。このため、Eclipse ベースのアプリケーションの構造をカスタマイズしようとする場合には制約がありました。

e4 では、UI 要素をモデルに抽象化するレイヤーを導入しています。アプリケーションは、このモデルを再構成、あるいは拡張することで、さまざまな表示をすることができます。また、モデルが即座に変更されるようにすることも可能です。つまり UI の変更が即座にモデルに反映され、モデルが変更されることになります。

宣言型のスタイル設定

e4 ではプラガブル・スタイリング・エンジンを導入しており、このエンジンを使用してウィジェットの表示スタイル (大きさ、フォント、色など) をカスタマイズします。スタイルの定義は、CSS の標準的なセレクターや擬似クラスをサポートする外部 CSS ファイルで行うことができます。

スタイルとコンテンツを分離することは Web 用に導入された素晴らしい発想であり、こうすることで Web コンテンツを HTML で作成し、スタイル設定を CSS ファイルの 1 ヶ所に保持することができます。それと同じことを SWT の開発にも適用できるようになります。ウィジェットのスタイル設定をハードコーディングする必要はなく、外部の CSS ファイルにスタイル設定を保持することができます。

Web からデスクトップへ

e4 では、多様なターゲット・プラットフォームや多様な言語にわたってコンポーネントを再利用可能にしようとしています。e4 では、バンドルを JavaScript で作成して Java ベースの OSGi ランタイムに統合できるようになります。その際、Eclipse の JavaScript フレームワークが、OSGi ランタイムから見えないところでマニフェストを解析して JavaScript バンドル間の依存関係を解決してくれます。バンドルは、ベースにある実装技術をまったく意識せずに JavaScript サービスを登録、参照することができます。

デスクトップから Web へ

デスクトップ・アプリケーションを Web に移行することができます。e4 では、SWT Browser Edition (SWT/BE) と呼ばれる SWT のエディションを導入しており、SWT コンポーネントを Flash で描画することができます。

SWT には一般的なグラフィカル・プログラミング・インターフェースとネイティブのツールキットが用意されており、これらを利用することで、Windows® や Linux®、そして今やブラウザーで、コンポーネントを描画することができます。e4 では現在、Flash と ActionScript で SWT コンポーネントを描画することができます。また JavaScript の Silverlight バージョンにも対応する予定になっています。

XWT

XWT は SWT のための XML UI であり、SWT/JFace ウィジェットを XML によって宣言型で作成する (.xwt) ためのフレームワークです。XWT では、アプリケーションやウィジェットの階層構造のすべてが XML によって宣言型で定義されます。また、ウィジェットやイベント・コールバック、ビジネス・ロジックなどを実装可能な Java ファイルを作成することもできます。ベースとなるアプリケーション・モデルを UI コンポーネントによってバインドし、UI コンポーネントにデータを提供することができます。

XWT を使用するメリットはかなり大きく、外部 CSS と併せて使用することで、ビジネス・ロジックと UI 関連の側面を明確に分離することができます。そのため、作業が容易になり、また SWT コードの保守も容易になります。


XWT を使う

このセクションでは、簡単なアプリケーションを作成しながら XWT について学びます。このアプリケーションでは、e4 の新しい XWT パースペクティブを使用し、XWT のデータ・バインディング機能について調べます。ここで使用するソース・コードのダウンロード方法については「ダウンロード」を参照してください。

Hello XWT

最初のステップとして、Eclipse V3.5 ベースの空のプラグイン・プロジェクトを作成します。RCP (Rich Client Platform) アプリケーションを作成したり、あるいは他のアプリケーション・テンプレートを使用したりはしません。作成の手順は以下のとおりです。

  1. ゼロの状態から XWT サンプルを作成します (図 2、図 3)。
    図 2. 新規プラグイン・プロジェクトの作成
    この画像には、新たにプラグイン・プロジェクトを作成する際の画面が示されています。
    図 3. 新規プラグイン・プロジェクトの作成 (続き)
    この画像には、新規プラグイン・プロジェクトを作成する際の続きの画面が示されています。
  2. 新しく作成された Hello プロジェクトの中に、以下のプラグインをプロジェクトの依存関係として追加します。これらのプラグインは XWT とデータ・バインディングを使うための最低要件です。
    • org.eclipse.swt
    • org.eclipse.jface
    • org.eclipse.core.runtime
    • org.eclipse.e4.xwt
    • org.eclipse.core.databinding
    • org.eclipse.core.databinding.property
    • org.eclipse.jface.databinding
    • com.ibm.icu

    これでプロジェクトがセットアップできました。

  3. 新しい UI 要素を作成して XWT のプログラミングを開始します。Eclipse では XWT の UI 宣言 (xwt ファイル) と Java クラスを自動的に作成してくれます (図 4)。
    図 4. UI 要素を作成する
    このスクリーンショットには、XWT プログラミングを開始するために UI 要素を作成する際の画面が示されています。

    XWT という新規パースペクティブが開かれていることに気付くと思います。このパースペクティブには、ビューとパレットが含まれています。ビューには、アプリケーションの UI のプレビューが表示されます。パレットからは、SWT/JFace コンポーネントがコード・エディターにドラッグ・アンド・ドロップされます。

  4. ボタン・コントロールを XML コードにドラッグ・アンド・ドロップします。すると図 5 のようになるはずです。
    図 5. ボタンを 1 つ含む XWT
    この画像には、ボタンを 1 つ含む XWT が示されています。

    アプリケーションの構造、つまりウィジェットの階層構造が XML で宣言されている (.xwt) ことに注意してください。これによって、レイアウトを最初に Java クラスで作成するという大量の作業が必要なくなります。ベースとなっている Java クラスには、イベント・ハンドラーやコンストラクター等々が含まれています。Adobe Flex をよく知っている人であれば、ここに Adobe Flex と共通しているところがあると思うかもしれません。

  5. 「Say Hello」ボタンにクリック・ハンドラーを追加するには、<Button> タグに「SelectionEvent=”sayHello”」を追加し、「Generate Java codes (Java コードの生成)」をクリックします。すると、HelloWorld.java の中にイベント・ハンドラーが生成されます。UI レイアウトのコードとアクションやイベントのコードは、XWT と Java のソース・コードに明確に分離されます。図 6 はその一例を示しています。
    図 6. ボタンに SelectionEvent を追加する
    この画像には、UI レイアウトのコードとアクションやイベントのコードが XWT と Java のソース・コードに分離されることが示されています。
  6. HelloWorld.java を変更し、クリック・ハンドラーに内容を追加します (リスト 1)。これによってメッセージ・ボックスが開かれ、「Hello XWT」と表示されます。
    リスト 1. sayHello メソッド
    public void sayHello(Event event) {
    	Button btn = (Button) event.widget;
    	MessageDialog.openInformation(XWT.findShell(btn),
               "Hello XWT", "Hello XWT");
    }

    これは非常に簡単でした。

  7. 最後のステップとして、このアプリケーションを起動する main 関数を作成します。Application という名前のクラスを作成し、簡単な main 関数を作成します (リスト 2)。
    リスト 2. main 関数
    public static void main(String[] args) {
    	URL content = 
    		HelloWorld.class.getResource("HelloWorld.xwt");
    	try {
    		XWT.open(content);
    	} catch (Exception e) {
    		e.printStackTrace();
    	}
    }

    Application.java を Java アプリケーションとして実行すると、期待通りの動作をします。

データ・バインディング

e4 のデータ・バインディング機能は XWT にとって非常に有効です。この機能のおかげでモデル・クラスを XWT の UI にバインドすることができると同時に、モデル・オブジェクトのデータ・フィールドは自動的に UI コントロールに入力されます。このセクションのサンプル・コードでは、その動作を説明しています。

  1. Contact という名前の新しい POJO を sample.model パッケージの中に作成します。この Contact クラスはメンバー・フィールドとして namephone を含むことになります。
  2. Contact クラスを右クリックし、「New (新規)」 > 「New UI Presentation (新規 UI 表示)」の順に選択します。するとダイアログが表示されるので、このダイアログで Contact クラスの UI 表示を作成します。図 7 はその一例を示しています。

UI 表示の作成を終えると、基本的な構成の ContactUI.java と Contact.xwt が作成されます。

図 7. Contact クラスの新規 UI 表示
この画像には、Contact クラスの UI 表示を作成するためのダイアログが示されています。

生成された xwt ファイルの {Binding path=phone}{Binding path=name} に注目してください。この 2 つは、テキスト・フィールドがコンテキスト・オブジェクトの phone フィールドと name フィールドにバインドされていることを暗黙的に示しています。

しかし、アプリケーション・コンテキストの中で contact オブジェクトはどこにあるのでしょう。このオブジェクトはアプリケーションを起動すると設定されます。

もう 1 つの Application クラスを作成しましょう。この Application クラスに含まれる main 関数は ContactUI を開いてコンテキスト・オブジェクトをセットアップします。リスト 3 の XWT.open メソッドに注目してください。

リスト 3. ContactUI を開く Application.java
public static void main(String[] args) {
	URL content = 
		ContactUI.class.getResource("ContactUI.xwt");
	Contact c1 = new Contact("Huang", "22771");
	try {
		XWT.open(content,c1);
	} catch (Exception e) {
		e.printStackTrace();
	}
}

Application.java を実行すると、テキストのコントロールに Huang22771 が入力されます。

一方、UI 操作の際にコンテキスト・オブジェクトを取得することも容易にできます。例えば、現在の連絡先情報を一覧表示するボタンを UI 構造に追加するとしましょう。選択イベント・ハンドラーはリスト 4 のようになります。

リスト 4. コンテキスト・オブジェクトを取得する
public void submitContact(Event event) {
	Contact c = (Contact) XWT.getDataContext(this);
	Button btn = (Button) event.widget;
	MessageDialog.openInformation(XWT.findShell(btn),
               c.getName(), c.getPhone());
}

まとめ

e4 には Eclipse のプラットフォームとプログラミング・モデルを最新のものにする機能強化と新機能が数多く含まれています。e4 は現在インキュベーション・フェーズであり、まだコードは完全に安定しているわけではありませんが、こうした興味深い新機能は Eclipse プラットフォームの開発者や Eclipse 技術を採用する人達にとって魅力的です。バージョン 0.9 のビルドを詳しく調べ、試してみてください。


ダウンロード

内容ファイル名サイズ
Source codeos-eclipse-e4.code.zip6KB

参考文献

学ぶために

製品や技術を入手するために

議論するために

  • Eclipse に関する質問を議論するための最初の場所として、Eclipse Platform newsgroups があります (このリンクをクリックすると、デフォルトの Usenet ニュース・リーダー・アプリケーションが起動し、eclipse.platform が開きます)。
  • Eclipse newsgroupsには、Eclipse を利用し、拡張することに関心を持つ人達のために、さまざまなリソースが用意されています。
  • developerWorks blogs から developerWorks のコミュニティーに加わってください。

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Open source
ArticleID=461839
ArticleTitle=Eclipse e4 の見どころ
publish-date=12082009