Visual Editor For Eclipse(インストール)

提供者：
イー・ベンチャーサポート(株)
宮本信二
Sinji Miyamoto

---

GUI構築用フレームワークプラグインのVisual Editorを紹介しましょう。Swing／SWTのビジュアルな編集機能を提供し，ほかのGUIベースプラグインを開発するためのものです。

---

Visual Editorとは

　Visual EditorはGUI構築用のフレームワークです。Eclipse ToolsプロジェクトのVisual Editorサブプロジェクトで開発が行われおり，このフレームワークを利用してGUIツールの開発が行われていくことが想定されています。また，Visual Editor自体にSwing／SWT用のGUIエディタの実装も含まれているので，Swing／SWTの画面を作成していくことができます。ライセンスはCPL（Common Public License Version 1.0）で配布されており，無償で利用することができます。

ダウンロードとインストール

Visual Editorのインストール

　Visual Editorは，GEF（Graphical Editing Framework）とEMF（Eclipse Modeling Framework）を利用していますので，GEFとEMFもあわせてインストールする必要があります。これらはすべて，Visual EditorのWebサイト（http://www.eclipse.org/vep/）からダウンロードを行います。ここでは，執筆時点の最新版の1.0M2をダウンロードしました（図1）。なお，1.0はEclipse 3上で動作します。

▲図1　Visual Editor（M2）のダウンロードページ

　図1-1からダウンロードしたVE-runtime-1.0M2.zipを展開すると，eclipseというフォルダが作成されます。このフォルダをEclipseをインストールしたフォルダに上書きします。GEF（図1-3），EMF（図1-2）についても同様にZIPファイルを展開し，Eclipseをインストールしたディレクトリに上書きします。コピー後，Eclipseを再起動します。

インストールの確認

　Eclipseを再起動した後，インストールされたことを確認します。Eclipseのメニューから［Help］－［About Eclipse Platform］を選択します。次に［Feature Details］を選択すると，次のようなフィーチャー一覧画面が表示されます（図2）。この画面で，インストールした，EMF，GEF，VE（Visual Editor）が表示されていることを確認します。

▲図2　インストールの確認

設定画面

　Visual Editorの設定は，設定ページをメニューの［Window］－［Preferences］で開き［Java］－［Visual Editor］を選択して行えます（図3）。ここでエディタの表示方式（エディタ内のデザイン画面とソース画面を並べて表示するかタブ切り替えにするか）や，生成するコードのオプションなどを設定できます。ここでは，特に設定は行わずデフォルトのままで進みます。

▲図3　設定画面

SWTアプリケーションの作成

　ここでは，Visual Editorを利用して，簡単なSWTアプリケーションを作成してみます。先に適当なJavaプロジェクトを作成しておきます。

SWT用のライブラリ

　SWTを編集，実行するには，SWTのJARをクラスパスに通しておく必要があります。次のように行います。

• [プロジェクトのプロパティー］－［Java Build Path］－［Libraries］タブを選択する
• [Add Library］を選択する（図4）
• Standard Widget Tookit（SWT）を選択し，［Next］を選択する
• ここでは［Include support for JFace library］はチェックせず（任意），［Finish］を選択する
• [OK］をクリック

▲図4　SWTライブラリの追加

　なお，図4で［Add JARs］ボタンなどからswt.jarを追加した場合は，Visual EditorでSWTアプリケーションの編集が行えませんので，上記のようにしてSWTライブラリを追加するようにします。SWTでなくSwingのアプリケーションを作成する場合はこの設定は不要です。

Visual Classの作成

　Visual Editorは通常のJavaクラスと同じような方法で，作成・編集していきます。作成するクラスを「Visual Class」と呼びます。

　まず，新規にVisual Classを作成します。パッケージエクスプローラでソースフォルダやパッケージを選択し，メニューの［New］－［Visual Class］（あるいは［Other］－［Java］－［Visual Class］）を選択し，［Next］をクリックします。

▲図5　新規Visual Classの作成

　次に必要なクラス情報を入力し，［Finish］を選択します。ここでは以下のように指定しました。

設定項目	設定
Package（パッケージ）	hoge
Name（クラス名）	SWT1
style	Application－SWT
public static void main（）	チェック

▲図6　Visual Classの作成2

　新規Visual Classを作成すると，最初に以下のような画面が表示されます（図7）。まず，エディタ右側のPaletteの三角をクリックしてパレットを表示させます。

▲図7　Visual Classを作成したところ

　このパレットのウィンドウは最初，少し表示がせまくて作業がしにくいので，左にドラッグして広げておきます（図8）。

▲図8　パレットを広くしておこう

一部の環境や手順の違いによって，クラス作成段階で最初のシェルが作成されない場合があるようです。この場合は，パレットからShellを選択し，デザインサブビュー上で範囲選択することでシェルを作成できます。

▲図A　表示されないときはパレットからShellを作る

ウィジットを配置する

　Visual Classを新規作成した段階で図7のようになっていますが，これはsShellコンポーネントが配置された状態です。ここから，Visual Editor上で，SWTのウィジットを編集してVisual Classを構築していきますが，Visual Editorの画面の役割を織り交ぜて説明していきましょう。

　Visual Editorには図9のような機能があります。

▲図9　Visual Editorで編集する様子

　以下のエディタ，ビューを利用してウィジットを配置していきます。

(1)VEエディタ/パレット

　パレット上で，配置するウィジットを選択します。ここでウィジットを選択してから，VEエディタのデザインサブビューか，Java Beansビューの任意の場所を選択することで配置できます。なお，SWTのウィジットは，パレット上ではSWT Controls（テキストフィールド，ボタンなど）とSWT Container（Composite，Shellなど子要素を持てるもの）にフォルダでグループ化されています。配置したいウィジットを探して選択します。

(2)VEエディタ/デザイン

　VEエディタのデザインサブビューは，配置したウィジットをGUIで視覚的に確認，編集していくことができます。このビュー上で，ウィジットを選択したり，ドラッグしてサイズ変更，移動を行うことができます。

(3)VEエディタ/ソース

　ソースサブビューでは，生成されたソースが表示されます。JavaEditorの機能がそのまま利用できます。

(4)Java Beansビュー

　Java Beansビューでは，配置したウィジットが階層的に表示されます。デザインサブビュー同様，ウィジットの選択や移動が可能です。

(5)プロパティービュー

　プロパティービューでは，デザインビューやJava Beansビューで選択したウィジットのプロパティーを確認，編集します。Layout，LayoutDataの指定，テキストやボーダーの指定などは，ここで行うことができます。

＊

　なお，プロパティーやJava Beansビューが開いていない場合は，［Window］－［Show View］から開き，開いたビューを自分が扱いやすい位置に移動します。デフォルトではビューは，画面右下にタブ切り替えで表示されます。上の画面では，プロパティービューを右側に，Java Beansビューを左下に移動しています。

イベントコードを作成する

　GUIを操作すると，イベントが発生します。これにどう応答するかを記述することでGUIの構築を行います。

　イベントコードは，VEエディタのデザインサブビューか，Java Beansビュー上でウィジットを選択し，右クリックして表示されるポップアップメニューの［Events］を選択して行います。

▲図10　イベントコードの追加

　たとえば，［widgetSelected］を選択すると，ソースにwidgetSelectedのイベントコードが追加されます（ほかのイベントの場合は［Add Event］から選択します）。ソースサブビュー上で，追加されたコードにロジックを追加します。

▲図11　コードの追加

　ここでは，widgetSelectedイベントへの応答コードとして次のような1行を追加してみましょう。

browser.setUrl(text.getText());

実行する

　作成したアプリケーションを実行します。通常のJavaアプリケーション同様にSWT1クラスを実行します。SWTアプリケーションの場合は，SWTのネイティブライブラリをライブラリパスに含める必要があります。SWT1の起動構成の，VM Argmentsに以下のように指定します。<Eclipseのディレクトリ>にはEclipseをインストールしたディレクトリを指定します。

-Djava.library.path=<Eclipseのディレクトリ>/plugins/org.eclipse.swt.win32_3.0.0/os/win32/x86

　この入力例はOSがWindowsの場合です。

▲図12　起動構成

　実行すると，図13のような画面が表示されます。

▲図13　実行したところ

GUIプラグインが増えそうな期待

　ここでは，Eclipse 3で追加されたBrowserウィジットを利用して簡易ブラウザを作成しました。手でコードを記述したのはwidgetSelectedのbrowser.setUrl(text.getText());の一行だけです。Visual Editorを使うと，ウィジットの配置が非常に簡単になります。ただし，GUIで配置できるといっても，APIの知識やレイアウト関連の知識は必要です。

　Visual Editorは現在のバージョンはM2で，まだ正式リリースバージョンではありません。若干動作が重く，また一部動作が怪しい部分があります。現段階では，まだ安定度がいまひとつではありますが，無償で利用できるGUI用プラグインとしてVisual Editorは今後も期待のプラグインです。

参考
dW Build GUIs with the Eclipse Visual Editor project
http://www-106.ibm.com/developerworks/opensource/library/os-ecvisual/