Eclipse Visual Editor Projectで、GUIを作成

グラフィカル・インターフェースを作成するためのグラフィック・ツール

数多くのEclipse.org のプロジェクトと同様に、Visual Editor Projectの目的は、ツールを作成するためのツール(この記事では、グラフィカル・ユーザー・インターフェースを作成するツール)を作成することです。Visual Editor Projectにおいて最も興味深い事は、既にリファレンス実装(reference implementation)をリリースしていることです。Visual Editorリリース0.5は(公開まで長らく待たせたEclipseの機能である)AWT/SwingアプリケーションのGUIビルダーです。2004年中期に発行予定のリリース1.0に、SWTへのサポートが追加されています。この記事では、Visual Editorの全体像と背景にある技術を、(AWT/Swing アプリケーションを構築する際のVisual Editor 0.5の機能の短いデモンストレーション、そしてVisual Editor 1.0でのSWTサポートの下見と共に)紹介します。

David Gallardo (david@gallardo.org), Software consultant

David Gallardoはソフトウェアの国際化対応、Java Webアプリケーション、データベース開発を専門とする独立系のソフトウェア・コンサルタントおよび著述家です。15年以上の間、彼はプロのソフトウェア・エンジニアであり、多くのオペレーティング・システム、プログラム言語、およびネットワーク・プロトコルについての経験があります。彼の最近の経験には、企業間 (B2B) e-commerce企業TradeAccess, Inc.における先進的なデータベースおよび国際化対応の開発が含まれています。その前まで、彼はLotus Development CorporationのProduct Developmentグループにおけるシニア・エンジニアであり、Dominoを含むLotus製品にUnicodeおよび国際言語サポートを提供するクロス・プラットフォーム・ライブラリーの開発に貢献しました。



2004年 5月 04日

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を参照)を選択してください。

図1. 新規ビジュアル・クラスを作成
図1. 新規ビジュアル・クラスを作成

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

図2. Visual EditorでSwingクラスを編集
図2. Visual EditorでSwingクラスを編集

ソースの下に向かってスクロールし、(アプリケーション・ウィンドウの初期サイズを設定する)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参照)。

図3. Java Beansビュー
図3. Java Beansビュー

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

図4. ヌル(null)のレイアウト・マネージャーを選択
図4. ヌル(null)のレイアウト・マネージャーを選択

この変更を加えた後、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ボタンをクリックしてください。

図5. 整理整頓するためにアライメント・ツールを使用
図5. 整理整頓するためにアライメント・ツールを使用
図6. 2つのウィジェットを示すフレーム
図6. 2つのウィジェットを示すフレーム

この時点でアプリケーションを実行しようとしても、当然ですがほとんど何も起きません。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参照)。

図7. SWTビジュアル・クラスを作成
図7. SWTビジュアル・クラスを作成

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

図8. グラフィカル・エディターにSWTシェルを追加
図8. グラフィカル・エディターにSWTシェルを追加

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

図9. Hello, SWT!
図9. 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参照)

図10. 起動構成にWindows SWT DLLへのパスを追加
図10. 起動構成にWindows SWT DLLへのパスを追加

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

図11. 「Hello, SWT!」入りのアプリケーション・ウィンドウ
図11. 「Hello, SWT!」入りのアプリケーション・ウィンドウ

まとめ

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


ダウンロード

内容ファイル名サイズ
os-ecvisual/test.zipos-ecvisual/test.zipKB

参考文献

コメント

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, Java technology
ArticleID=237194
ArticleTitle=Eclipse Visual Editor Projectで、GUIを作成
publish-date=05042004