Eclipse Visual Editor Projectの導入

Eclipseとその競争相手とのメリットの比較に関するディスカッション・スレッドを読めば、ものによってはあったりなかったり良かったり悪かったりする様々な機能に関する話題を見付けられます。最近まで、Eclipseに関してよく取り上げられたのは、GUIビルダー（グラフィカル・ユーザー・インターフェースを作成するためのグラフィック・ツール）の欠落に関する話題でした。幸運なことに、2003年11月に発売されたEclipse Visual Editor Projectそしてその直後にリリースされた（完全なWYSIWYG（What You See Is What You Get）グラフィカル・エディターによりAWT/Swing作成を可能にする）Visual Editor 0.5により、その問題は解決されました。

Eclipseそのもの同様に、Visual EditorはIBMが貢献したコードを基にしています。WebSphere Studio Application Developer 5.xのVisual Editorに精通する開発者は、それとEclipseのVisual Editorがほとんど同一であることに気付かれるはずです。Visual Editor使用法を学ぶには、この記事の最後にある参考文献にリストされているWebSphere Studio Visual Editor関連の文書に目を通してください。

Eclipse.orgの傘下にある他の多くの（Eclipseを含む）プロジェクト同様に、Visual Editor Projectの明確に定められた目的はかなり野心（グラフィック編集ツールを作成するツールを作成すること）に満ちあふれています。初期リリース版Visual EditorのAWT/Swingへのサポートは完全ですが、Visual Editorの目標はそれよりはるかに高いのです。プログラミング言語そしてサポートされたグラフィック・ツールに対して中立なる様に、技術的な土台は再設計されています。

近い将来、AWT/Swing以外のツールキット（例：SWT）のVisual Editor実装、そして潜在的にJava言語以外の言語（例：C++）の実装をお目にかかれることでしょう。SWTサポート追加の作業は既に進行しており、実際に（Eclipse 3.0と同時期に2004年中期に完成される予定の）Visual Editor リリース1.0に同梱される予定です。

上に戻る

Visual Editorの蓋を開けると……

AWT/Swing用GUIビルダーとしてのVisual Editorは、GUIの開発者には十分納得のいくものです。しかし、好奇心旺盛な開発者には、多くの秘密がまだまだ残されています。単独でも役に立つ興味深い技術をVisual Editorは活用します。もしも独自のグラフィカル・エディターまたはモデリング・ツールの作成に興味をいだかれるのでしたら、現存のVisual Editor実装は達成可能な可能性のかけらにしか過ぎないことに気付かれるでしょう。

Visual Editorが利用する最も明白なツールはGEF（Graphical Editing Framework）です。図形のエディターまたはWYSIWYGテキスト・エディターを作成するグラフィカル・エディターの開発を楽にするために、GEFはネイティブのEclipseグラフィカル・ツールキット（SWT）の上に構築されます。SWT（または、そういう意味では類似するAWT/Swing）の中にあるグラフィック要素に詳しいのであれば、長方形、矢印、そして楕円形のように特殊な図形を描いて操作することが難しいのはご存知でしょう。そのような図形とそれらが象徴するデータ・モデルの関係を管理するとなれば、難しいのはなおのことです。

GEF は2つの部分に分けられます。1つは、形状や図形の作成を手伝う軽量級の描画とレンダリングのパッケージである、Draw2Dプラグインです。もう1つは、中でもデータ・モデル/ビュー間マッピング用のコントローラー・フレームワーク、選択と作成のツール、そしてツール・パレットを追加する、GEFプラグインです。

GEFはモデルから中立したフレームワークですが、Visual Editor（そしてコードを生成する他のグラフィック・ツール）の一部として、（XML Metadata Interchange（XMI）を使用して内部的に保管された）モデル、Javaクラス、そしてグラフィック的表現の中でマッピングするために、それはEclipse Modeling Framework（EMF）を舞台裏で使用します。これらのマッピングが全て1対1であることを保証するのは、EMFの重要な機能のひとつです。XMIはモデルを正規に表記すると認められると同時に、コード、図形、そして再びコードを経由するラウンドトリップ(round-tripping)で何も失われません。それだからこそ、Visual Editorはモデルの表記（Javaソース・コード）を1つ保存すればよく、グラフィカル・エディター外でソース・コードを編集する自由があたえられるのです。

GEFとEMFについてのより多くの情報は、この記事の参考文献の章にあるリンクをご利用ください。

上に戻る

Visual EditorでAWT/Swingアプリケーションを開発

前述のとおり、現在入手可能なリリース0.5は、完全なAWT/Swing GUIビルダーです。それはEclipse 2.1.xと共に機能し、他のIDEで入手可能なGUIビルダーと比較しても優れています。まずひとつとして、（経験豊かなGUI開発者が手作業で開発するものと比較しても劣らない）高品質コード（修正を困難にする特殊な成果物無し）を生成します。もうひとつとして、その強力な構文解析能力は完全なコードのラウンドトリップを促しますので、ソース・コードの変更はほぼ直接にグラフィカル・エディターに反映されます。

Swingアプリケーションを手動で構築するうえで最も面倒なのは、レイアウト・マネージャーを利用してコンポーネントの配置を管理することです。それはWYSIWYGのグラフィカル・エディターですので、Visual Editorは希望する外観そして振る舞いをユーザー・インターフェースにて確認する行為を容易にします。さらに、異なるレイアウト・マネージャー間のマッピングを自動的に行なうので、（希望するレイアウトと全く同一のものを容易に得させる）ヌル(null)のレイアウト(null layout)を活用してアプリケーションの外観を作成でき、（ウィンドウのサイズが変更されたときにレイアウトに良い振る舞いをさせる）グリッド・バッグ・レイアウト(grid-bag layout)に切り替えられます。

次の章では、Visual Editor 0.5とその興味深い機能に簡単に目をとおします。理解するには、Visual Editor 0.5とともにEclipse 2.1.xをインストールするべきです。さらに、Visual Editorは他に2つのプラグイン（EMFとGEF）を必要とします。ダウンロード用のリンク、そしてインストール情報については、参考文献をご覧ください。

上に戻る

Visual Editorのツール

Visual Editorのインストール後には、次に新規のJavaプロジェクトを作成するときに新たな機能が盛り込まれていることに気付かれるでしょう。VEPExampleと呼ばれるプロジェクトを作成したと想定しましょう。Package Explorer内のプロジェクト名を右クリックしコンテキスト・メニューからNewを選択すれば、Visual Classを作成するための新たなオプションにお目にかかれるでしょう。このオプションをクリックすれば、「Create a new Java Class using the Visual Editor」と言う新規の名前の付いた見慣れたダイアログ・ボックスが現われます。名前とはまた別の相違点は、スーパークラスを選択するときに使うラジオボタンやチェック・ボックスが多数あることです。典型的には、アプリケーションのUI要素を含むためにJPanelを作成し、そのパネルをJFrameに追加します。ここで簡潔さを求める手段として、フレームを作成しそれに要素を直接追加します。Swingアプリケーション開発に関するさらに詳しい情報を、参考文献の章で記されるチュートリアルのシリーズで入手してください。

そのクラスの名前（例：Test）をNameに入力し、「Which visual class would you like to extend?」と記されたセクションで「frame」と「swing」が選択されていることを確認してください。「Which method stubs would you like to create?」では、main()（下記の図1を参照）を選択してください。

選択後、 Finishを押してビジュアル・クラスを作成し、Visual Editorで開いてください。通常のJavaエディターと異なり、Visual Editorには3つの部分にはっきりと分かれていることに気付かれるはずです。上部にあるのは、ランタイムにてレンダリングされるときにビジュアル・クラスがどのように映るかを示すグラフィカル・エディターです。左側にあるのは、アプリケーションにドラッグ・アンド・ドロップできるウィジェットのリストです。下部にあるのは、ソース・コードです（図2参照）。

ソースの下に向かってスクロールし、（アプリケーション・ウィンドウの初期サイズを設定する）initialize()メソッドを探すことにより、ソースとグラフィカル・ビュー間の相互作用を観察できます。

private void initialize() {
this.setSize(300, 200);
this.setContentPane(getJContentPane());
}

最初の数字（横幅）を新規の数値（例：600）に変更すれば、瞬時にしてVisual Editor上部のグラフィック表示は横幅を変え、その新たな数値を反映します。仮にソース・コードの変更を頻繁に行なうのであれば、Eclipseステータス・バーのStop Round Trippingボタンをクリックして同期を切ることもできます。そうしなければ、そのエディターは期待どおりの反応の良さを示さないことになります。

Visual Editorに付け加え、Javaパースペクティブに新たなビュー2つがあることに気付くでしょう。左下にはJava Beansビュー、そして右上にはPropertiesビューです。ご存知のとおり、Swingの設計機能の一つとして、（作成したてのフレーム・クラスそしてそれに追加する他のウィジェットのような）コンポーネントがそれぞれJava Beanであることがあげられます。クラス内にあるそれらのコンポーネントへ容易にナビゲートすることをJava Beansビューはうながします。最初の時点では、（現在Visual Editor内にあるクラスを参照する）「this」より下層の唯一の入力は、jContentPanelです。ご存知だとは思いますが、JFrameには直接何も追加せず、代わりにそのコンテントのパネルに追加します。jContentPanelをクリックすれば、フレーム・クラス内のgetJContentPanel()に移行できます（図3参照）。

Java Beansプロパティーを表示するPropertiesビュー（Java Beansビューとは別のビュー）を、Visual Editorは追加します。ここでは例として、JavaBeans内のjContentPaneを選択した後、それが使用するレイアウト・マネージャーを変更できます。（それに取りかかる前に、Editorウィンドウ内のソース・コードに目をとおし、java.awt.BorderLayoutオブジェクトと共にjContentPane.setLayout()を呼び出すことによりそれがレイアウト・マネージャーを設定することを確認しておくのがよいでしょう。）一部のプロパティーはフリー・テキスト入力を可能にしますが、他のプロパティーはより適切なインターフェースを提供します。レイアウト・マネージャーのプロパティーは、有効なレイアウト・マネージャーのみに選択肢を限定するためにドロップダウン方式のリストを使用します。デフォルト値であるBorderLayoutをクリックし、表示されるリストを上にスクロールしてnullのレイアウト・マネージャーを選びます（図4を参照）。

この変更を加えた後、jContentPane.setLayout()がnull値で呼び出されているのがソース・コードでもわかります。PropertiesビューとEditor間の相互作用がどちらの方向にも機能することを自らに証明したければ、ソース・コード内のnullを新規のjava.awt.BorderLayout()に変更し直し、Propertiesビューで値が自動的に変更されるのを確かめるべきでしょう。

上に戻る

ユーザー・インターフェースを作成そして使用可能にする

アプリケーション用のフレームを一度作成すれば、ユーザーのアプリケーションとの相互作用を可能にするウィジェットを追加できるようになります。メッセージを入れたり切ったりするチェック・ボックスを追加しましょう。まず、JCheckboxウィジェットをクリックすることから始め、グラフィカル・エディター内のフレームの中をクリックしてください。nullのレイアウト・マネージャーを使用しているのであれば、コンテント・ペイン内ならどこにでもそれを配置できることに気付くはずです。BorderLayoutを使用しているのであれば、それをNorth、South、East、West、またはCenterのどこかへ配置できます。

次に、JLabelウィジェットをクリックし、あらかじめ追加したチェック・ボックスにあるNextをクリックします。Propertiesビューを使用して、テキストを「Unchecked」に変更してから、テキストが適当に入るようにテキスト・ボックスのサイズを調整します。（別の方法として、ボックスを拡張してから左上のコーナーをクリックする手もあります。こうすれば、テキストをタイプ入力できるテキスト・フィールドが表示されます。）

この時点で、望むのであれば、アライメント・ツールを使ってウィジェットを整理整頓できます。Controlキーを押しながらチェック・ボックスとテキスト・フィールドをそれぞれ順番にクリックして、両方を選択してください。そして、図5にて示されるとおり、Show Alignment WindowボタンとAlign Topボタンをクリックしてください。

この時点でアプリケーションを実行しようとしても、当然ですがほとんど何も起きません。Swingが面倒を見ますので、チェック・ボックスにチェックを入れたり外したりできます。しかし、実際にそれに何かをしてもらうには、何らかのコードを追加する必要があります。Swingイベント・モデルに詳しいのであれば、アクション・リスナーをチェック・ボックスに追加する必要があることをご存知のはずです。そうすることにより、ユーザーがそれを変更する場合には、リスナーは何らかの行動を実行できます。Visual Editorを使用してリスナーを追加するには、グラフィカル・エディター内のチェック・ボックスを右クリックして、表示されるコンテキスト・メニューからEvents > Action Performedを選択します。これは（匿名のクラスとして実装される）アクション・リスナーのコードを、チェック・ボックスの初期化コードに追加します。

private javax.swing.JCheckBox getJCheckBox() {
if (jCheckBox == null) {
jCheckBox = new javax.swing.JCheckBox();
jCheckBox.setBounds(45, 75, 21, 21);
jCheckBox
.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) {
System.out.println("actionPerformed()");
// TODO Auto-generated Event stub actionPerformed()
}
});
}
return jCheckBox;
}

ここでおわかりのとおり、TODOアノテーションと共にコードをどこに追加すべきであるかが明白になります。チェック・ボックスが変更されると同時にそのとなりのラベルも同様に変化しチェック・ボックスの状態を反映するように、コードを変更しましょう。これが、変更後のコードです。

jCheckBox
.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) {
jLabel.setText(
jCheckBox.isSelected() ? "Checked" : "Unchecked");
}
});

ここで、アプリケーションをテストしましょう。

上に戻る

Visual Classを実行

便利なことにVisual Editor のおかげでmain()クラスを必要とせずともJava Beansを起動できます。結局はそれを包括することになるアプリケーションとは別の（例えばJPanelのような）コンポーネントをテストする場合特に便利です。そのようにして作成した簡単なテスト・アプリケーションを起動するには、EditorにてTest.javaが選択されていることを確認し、メインのEclipseメニューからRun > Run As > Java Beanを選択してください。

別の方法として、これはJFrameですので、以下のようにmain()メソッドを完成させることによりTestをJavaアプリケーションとして実行できます。

public static void main(String[] args) {
Test test = new Test();
test.setDefaultCloseOperation(EXIT_ON_CLOSE);
test.setVisible(true);
}

メインメニューからRun > Run As > Java Applicationを選択してそれをスタートしてください。どちらの方法で実行しても、チェック・ボックスをクリックすればラベルは指示通りに変化します。

Eclipseに特別精通していなくても、コードがどのようなものかを知りたければ、参考文献の章にあるリンクを使えばダウンロード可能です。

上に戻る

SWTをサポートするVisual Editor 1.0の下見

この記事が執筆されている時点では、Visual Editor 1.0のテスト版はSWTサポートの下見を提供しますが、最終バージョンはこれとは異なりそうです。ここでは軽く目を通しますが、新バージョンを実際に使用する場合には再度の調整そして適応が必要であるかも知れないことを念頭に置いてください。

（ここで使用しているI20040325統合構成のような）非リリース・ビルドとしてのVisual Editor 1.0をダウンロードするのであれば、それに対応するEclipse、EMF、そしてGEF構成をもダウンロードする必要があります。これらがリリース・ビルドだとは限りませんし、様々なバージョンを混ぜたり無理やり合わせたりはできません。VEPダウンロード・ページ（参考文献参照）は、どのビルドが必要とされるかを指定し、それらへのリンクを紹介します。

Eclipse、Visual Editor、EMF、そしてGEFをインストールしたら、Eclipseを起動して新規Javaプロジェクトを作成しましょう。SWTを使用するには、Javaビルド・パスにSWTライブラリーを追加します。プロジェクトを右クリックしてProperties > Java Build Pathを選択します。Librariesタブをクリックし、Add Libraryボタンをクリックし、Standard Widget Toolkit (SWT)を選択してから、Nextをクリックします。次のダイアログにあるデフォルト設定「Use Platform SWT Level」を受け入れ、Finishをクリックします。OKをクリックしてプロパティーのダイアログ・ボックスを閉じます。

前と同じように、プロジェクトを右クリックしてNew > Visual Classを選択することにより、新規Visual Classを作成します。そのクラスの名前（例：SWTTest）を入力します。しかしながら今回は、拡張するビジュアル・クラスとして「frame」を選択する代わりに、「other」を選択します。さらに、スーパークラスがjava.lang.Objectであることを確認し「Which method stubs would you like to create?」の下に位置するmain()メソッドのとなりにあるボックスにチェックを入れてください（図7参照）。

最初の時点では、グラフィカル・エディターのキャンバスは空白です。アプリケーションを作成するには、SWT Shellを追加します。Visual Editorの左側にあるウィジェットのパレットは（AWTとSwingウィジェットに加えて）複数のSWTウィジェットが並んでいるのがわかります。 Shellをクリックしてから、キャンバス上でクリックとドラッグを実行してアプリケーション・ウィンドウを作成してください（図8参照）。

これでシェルにウィジェットを追加できます。ここではテキスト・フィールドを1つだけ追加します。 Textをクリックしてから、クリックとドラッグでシェル内にそれを配置します。フィールドの左上のコーナーをクリックして、「Hello, SWT!」のように何かテキストを入力します。

これらのステップの後に、Visual Editorが（下記のとおりにシェルを初期化する）createSSHell()メソッドを作成したのに気付くはずです。

private void createSShell() {
sShell = new org.eclipse.swt.widgets.Shell();
text = new org.eclipse.swt.widgets.Text(sShell,
org.eclipse.swt.SWT.NONE);
sShell.setSize(new org.eclipse.swt.graphics.Point(209, 85));
text.setBounds(new org.eclipse.swt.graphics.Rectangle(23,
9, 153, 27));
text.setText("Hello, SWT!");
}

次に、クラスをインスタンス化しSWTコードを実行するために、main()メソッドにコードを追加する必要があります。

   public static void main(String[] args) {
      SWTTest test = new SWTTest();
      Display display = new Display();
      test.createSShell();
      test.sShell.open();
      while (!test.sShell.isDisposed()) {
         if (!display.readAndDispatch())
            display.sleep();
      }
      System.out.println("finishing...");
      display.dispose();
   }

これを直接入力した後、ソース・ウィンドウ内で右クリックしてSource > Reorganize Importsを選択することによりDisplayへの参照を解決します。

アプリケーションを実行するには、プラットフォームに特化したSWT共有ライブラリーかDLLをパスに追加する必要があります。起動構成を活用するのもひとつの方法です。Eclipseのメイン・メニューからRun > Run...を選択したあと、表示されるダイアログ・ボックスにあるArgumentsタブをクリックします。VM引き数のボックスでは、ライブラリーへのパスと共に-D引き数を追加します。もしもWindowsでEclipseをC:\eclipseにてインストールしたのであれば、完全な引き数は以下のとおりです。-Djava.library.path=C:\eclipse\plugins\org.eclipse.swt.win32_3.0.0\os\win32\x86（図10参照）

この引き数を追加した後で、RunをクリックしてSWTアプリケーションを起動します。全てがうまくいけば、図11で示されるとおりに、「Hello, SWT!」のメッセージの入ったアプリケーション・ウィンドウが開きます。

上に戻る

まとめ

Visual Editor ProjectはEclipseに（ユーザーを長らく待たせた）GUIビルダーを追加します。初期バージョン（0.5）はAWT/Swingへのサポートを内蔵し、そのおかげでEclipse はGUI開発に関しては他のIDEに負けません。次のバージョン（1.0）は発売間近で（待ち望まれる）SWTサポートを含みます。それより先のことは不透明ですが、堅実な技術的土台のおかげで、他のプログラミング言語やツール・キットへのサポートを含む多くの課題は解決されることでしょう。

上に戻る

ダウンロード

ダウンロード形式について

参考文献

• 前提条件であるGEFプラグインそしてEMFプラグインと一緒に、Eclipse 2.1.x と Visual Editor 0.5をダウンロードするには、Eclipse.orgのVisual Editor Projectページへ移行し、「Developer Resources」の下の階層にある「Download page」を選択しましょう。そして、Build Typeの下でLatest Release 0.5.0を選択します。EMF、GEF、そしてVisual Editorランタイムと共に、適切なバージョンのEclipseへのリンクがあります。
  
  
• Comparing WebSphere Studio Application Developer with VisualAge for Java（developerWorks、2002年10月）で、WebSphere Studio Application Developer 5.xのVisual Editorに関する詳細をお読みください。
  
  
• Visual Editorを使用するには、GEFとEMFのプラグインが必要です。「Eclipse Modeling Frameworkでモデリング: 第1回 」（developerWorks、2004年3月）、そして「Eclipse Development Using the Graphical Editing Framework and the Eclipse Modeling Framework 」（PDF フォーマットのIBM Redbook）にて、Graphical Editing Framework (GEF) と Eclipse Modeling Framework (EMF)についてより多くを学べます。
  
  
• Eclipseとこれらのプラグインのインストールそして使用法に関するより詳しい情報でしたら、Eclipse Platform入門（developerWorks、2002年11月）をどうぞ。
  
  
• チュートリアルCreating a GUI with JFC/Swingをお読みください。
  
  
• developerWorksのOpen source projects のページで、多数のEclipseユーザー用の記事をお選びください。それから、alphaWorksにて最新のEclipse technology のダウンロードをどうぞ。
  
  
• Developer BookstoreのOpen source 関連のページで、オープン・ソースに関するトピックを掲載した書物を割引価格で購入できます。David Gallardo（この記事の著者）が共同執筆したEclipse In Action: A Guide for Java Developersを含むEclipse関連の書物を数冊か見付けられます。
  
  

著者について

この記事を評価する

コメント

上に戻る

目次

• Eclipse Visual Editor Projectの導入
• Visual Editorの蓋を開けると……
• Visual EditorでAWT/Swingアプリケーションを開発
• Visual Editorのツール
• ユーザー・インターフェースを作成そして使用可能にする
• Visual Classを実行
• SWTをサポートするVisual Editor 1.0の下見
• まとめ
• ダウンロード
• 参考文献
• 著者について
• コメント