Visual EditorはSwingとSWTのGUIを作成するためのEclipseプラグインで、Visual Basic感覚でGUIを作成することができます。元々IBMのWebSphere Studioに付属していたものがベースになっているので、フリーでありながら完成度の高いGUIビルダで、今後の展開も期待できるツールです。
先日(2004/09)、待望の1.0がリリースされました。Eclipse3.0.1に対応し、SWTのサポートも追加されています。今回はVisual Editorの使い方を簡単に紹介します。
Visual Editor(以下VE)に必要な媒体は、VE自体も含めて全部で4つです。
これらはVisual Editor Projectのサイトからすべてダウンロードできます。Visual EditorはRuntime, SDK, Example等複数の種類の媒体がありますが、ここではRuntimeをダウンロードします。
VEにはサンプルアプリケーションがいくつか含まれています。まずこれを起動して画面構成を把握してみます。
ファイル＞新規＞サンプルを選択し、表示されたダイアログのツリーからサンプル＞Swing＞BasicSwingComponentsを選択すると、以下のような画面が表示されます。
画面中央にSwingコンポーネントを使った画面が表示され、その下にエディタビューがあります。その左にはSwingのコンポーネント等をD&Dで埋め込むために使うコントロールパレットがあります。このパレットはデフォルトでエディタビューの右側に隠れて表示されているかもしれないので（筆者の環境ではそうでした）、矢印ボタンをクリックし、またドラッグして見やすいサイズに変更してやります。
画面の右に表示されているのはプロパティービューで、各コントロールのプロパティを設定するためのものです。Visual Basicではお馴染みのものですね。このビューは最初画面下のコンソールビュー等と同じ位置にタブで表示されているかもしれませんが、タブをドラッグして任意の場所に持ってこれます。上はそのようにして配置した例です。
基本的には上の画面のフォームデザイナ（フレームが表示されている部分）にコントロールを貼り付け、プロパティビューで必要に応じてプロパティを設定し、それだけで対処できないような場合にエディタで直接編集するといった流れになるでしょう。VEではフォームデザイナとエディタは常に同期が取られており、一方を変更するともう一方に変更が即座に反映されます。ただ、これはかなり重たい処理ですので、画面上の「Pause」ボタンをクリックして同期しないようにすることも可能です（下図）。
VEでの作成方法の概要を理解するために、簡単なアプリケーションを作成していきます。まずはSwing版です。
テーブルといくつかのボタンを含む画面を作成してみます。
まずはフレームを作成します。ファイル＞新規＞その他＞Java＞Swing＞JFrame Visual Class を選択します。クラス名入力画面が表示されるので、
クラス名を入力して終了します。
これでフレームの雛形が出来ました。エディタビューには雛形のソースコードが表示されます。このエディタにはmainメソッドが生成されていますが、デフォルトは空です。そのため、以下のようにmainを実装して、動作確認がとれるようにしておきます（TableSampleはここで作ったフレームのクラス名）。
public static void main(String[] args) {
new TableSample();
}
ただ、このまま実行してもフレームが表示されません。デフォルトでは非表示で生成されているからです。そこで、フォームデザイナのフレームをクリックして選択し(タイトルバーをクリックして「フレーム」を選択することに注意）し、プロパティービューで「visible」プロパティーの値をtrueに設定します。また、「defaultCloseOperation」プロパティーの値をEXITにして、×ボタンクリックでアプリケーションが終了するようにします。
この状態で実行するとフレームが表示され、×ボタンクリックで終了させることができます。
コントロールパレットからSwing Componentsを選択し、その中のJTable on JScrollPaneを選択し、フォームデザイナのフレーム上にマウスをポイントします。すると、以下のように表示されます。
JFrameのデフォルトレイアウトがBorderLayoutですので、上のようにBorderLayoutのどこに貼り付けるかを指定できます。ここではCenterに貼り付けることにしましょう。Centerにポイントを合わせてマウスクリックで表が貼り付けられます。
上のようにサンプルデータを伴って表示されます。ただ、これを実行するとわかりますが、上のようにテーブルの中身は表示されません。どうやら行や列を追加した時のイメージを確認できるように、上のように見せてくれているようです。
次に表を以下のように設定します。
デフォルトではセル単位の選択ができないようになっているので、これを選択できるようにしてみます。これはプロパティビューで行います。コントロールの多くの設定はこのプロパティビューで行うことができます。フォームデザイナでテーブルを選択して、プロパティビューを見ると、以下のようにテーブルのプロパティが表示されます。
この中のcellSelectionEnabledの値をtrueに設定します。これでセル単位での選択を可能にするためのコードが追加されます。その他の設定も同様に行います。
基本的にはプロパティビューでコントロールの設定を行っていく流れになりますが、プロパティでは設定できないものもあるので、それはソースを直接編集する必要があります。例えばテーブルを編集不可にするためのプロパティは無いので、ソースを直接編集します。エディタで以下のコードを探します。
private DefaultTableModel getDefaultTableModel() {
if (defaultTableModel == null) {
defaultTableModel = new DefaultTableModel();
テーブルを編集不可にするには、DefaultTableModelのisCellEditableをオーバーライドすればよいので、
defaultTableModel = new DefaultTableModel() {
public boolean isCellEditable(int row, int column) {
return false;
}
};
のように編集します。
次に初期値を設定するために、まずテーブルモデルを設定します。フォームデザイナでテーブルを選択して、プロパティビューで「model」プロパティの値をクリックすると、右端に選択画面を開くためのボタンがあるのでそれをクリックします。すると以下のようにダイアログが表示されます。
ここでDefaultTableModelを選択し、OKを押すとソースコードにgetDefaultTableModelというメソッドが追加されます。このメソッドで初期化を行います。以下、編集例です。
Object[] row1 = {"1", "マウス", "2980"};
Object[] row2 = {"2", "キーボード", "3980"};
Object[] row3 = {"3", "液晶モニタ", "60000"};
Object[] row4 = {"4", "パソコン本体", "90000"};
Object[] row5 = {"5", "LANケーブル", "500"};
defaultTableModel.addRow(row1);
defaultTableModel.addRow(row2);
defaultTableModel.addRow(row3);
defaultTableModel.addRow(row4);
defaultTableModel.addRow(row5);
これでフォームデザイナには以下のように表示されます。カラム名や行の中身は表示されませんが、カラム数や行数は反映されています。
実際に実行すると以下のウィンドウが表示されます。
次にボタンを配置します。まずは複数のボタンを配置するJPanelを新規に生成します。ファイル＞新規＞その他＞Java＞Swing＞JPanel Visual Class でパネルを生成します。
JFrameの場合と同じようにコントロールパレットからJButtonを選択し、パネルへ追加します。
追加した時点ではボタンに表示するテキストもまだ設定されていません。ここでプロパティービューで「Text」プロパティの値を設定します。これでフォームデザイナ上のボタンに設定したテキストが表示されます。
更にもう一つボタンを追加します。同じ操作を行ってボタンを配置すると以下のように並んで表示されます。JPanelのデフォルトレイアウトのFlowLayoutに従っている為です。レイアウトマネージャを無効にして、自由にコンポーネントを配置する方法も後ほど紹介します。
今作ったパネルを表を含んだフレームに追加します。先ほど作ったフレームクラスを開き、ツールバーのBeanの選択ボタン（以下）をクリックします。
Beanの選択画面が表示されるので、さっき作ったJPanelクラスを入力してOKをクリックします。そしてJavaBeansビューでパネルを追加したいコンポーネントを選択してマウスクリックします。この場合はフレームのContentPaneに貼り付ければよいので、以下の画面にあるjContentPaneを選択します。
これで以下のように、フレームにボタンを含むパネルが追加されます。
パネルを追加すると上のように、BorderLayoutのNORTH部分に追加されるので、これを例えばSOUTHにしたい場合は、追加したパネルを選択して、プロパティービューで「constraint」プロパティの値をSouthにすればよいです。これで以下のようにパネルがフレームの下に移動します。
VEではイベント処理の雛形メソッドを自動で生成してくれるので、これも簡単に作れるようになっています。やり方は、イベント処理を行わせたいコンポーネントを選択して、右クリック＞Events＞イベント処理メソッド を選択します。もしボタンを選択した場合は、イベント処理メソッド部分がactionPerformedとして表示されます。これを選択すると以下のコードが追加され、フォーカスも移ります。
jButton.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e) {
System.out.println("actionPerformed()"); // TODO Auto-generated Event stub actionPerformed()
}
});
このようにしてイベント処理メソッドの雛形を作成してくれるので、後は中身を実装するだけです。
画面サイズを固定にして良い場合は、レイアウトマネージャを無効にして自由にコンポーネントをレイアウトした方が良い場合もあります。VEではレイアウトマネージャを無効にしたレイアウトも可能で、またコンポーネント同士の位置を合わせたりすることも可能です。
ここではさきほど作ったフレームで、テーブルの代わりにテキストエリアを貼り付けたものを作成します。
新規にフレームを作成し、以下のようにフレームのプロパティを設定します。
| プロパティ | 値 |
|---|---|
| resizable | false |
| visible | true |
レイアウトマネージャを無効にするので、フレームのリサイズを不可にしています。
次にフレームのContentPane（フレームの真ん中を選択すれば良いでしょう）を選択して以下のプロパティを設定し、レイアウトマネージャを無効にします。
| プロパティ | 値 |
|---|---|
| layout | null |
それからコントロールパレットでJTextAreaを選択して、フレームに追加します。初期状態ではかなり小さいのでドラッグして適当な大きさに設定します。
サイズや位置のピクセル単位の調整はソースを編集します。setBoundsメソッドが見つかるのでそこで値を調整します。
次はボタンを２つ追加します。これもテキストエリアと同じように追加後サイズや位置の調整が必要ですが、まずは適当な位置に適当な大きさで配置してみます。
2つのボタンは位置も大きさも合っていません。ここで送信ボタンの位置と大きさに閉じるボタンを合わせるには、まず閉じるボタンを選択し、Ctrlを押しながら送信ボタンを選択して両方選択した状態を作って、画面上の「Show customize layout window」というキャプションの付いたボタンをクリックします（以下）。
すると、以下のようにサイズ調整のためのダイアログが表示されるので、高さと幅及び位置調整を行います。
フレームのサイズも調整して最終的には以下のようになりました。
また、VBのようにGridを表示してレイアウトすることもできます。フレームのContentPaneを選択して、右クリック＞Show Gridを選択します。
これでGridに合わせてコンポーネントをレイアウトできるようになります。
次はSWTアプリケーションです。SWTについての解説は、SWTメモ等を参照して下さい。
SWTならではということで、簡易ブラウザを作ってみます。
ファイル＞新規＞その他＞Java＞Visual Classを選択します。以下のクラスの新規作成ダイアログが表示されます。
上の画面左下のツリーからSWT＞Applicationを選択してクラス名入力で終了ボタンをクリックすると雛形が作成されます。
レイアウト無しで自由に配置する方法もありますが、ここではGridLayoutを使います。GridLayoutといっても、あるコントロールだけ大きさを変えることも可能です。
デフォルトではShellにレイアウトが設定されていないので、これをGridLayoutに変更します。フォームデザイナでShellを選択し、layoutプロパティをGridLayoutに変更します。また、layoutプロパティを更に展開し、numColmnsプロパティ（列数を表す）を3に設定します。
以下にShellに設定するプロパティをまとめます。階層構造を持つプロパティは.(ドット）で表しています。
| プロパティ | 値 |
|---|---|
| layout | GridLayout |
| layout.numColmns | 3 |
| text | 簡易ブラウザ |
| visible | true |
ラベル、URLの入力フィールド、画面遷移ボタン、ブラウザコントロールをこの順番で追加します。列数を3に設定したので、ブラウザコントロールが2行目に配置されます。以下、それぞれのコントロールに設定するプロパティです。BORDERプロパティは見栄えのために設定しています。
【Label】
| プロパティ | 値 |
|---|---|
| text | アドレス |
【Text】
| プロパティ | 値 |
|---|---|
| border | BORDER |
| layoutData.grabExcessHorizontalSpace | true |
| layoutData.horizontalAlignment | FILL |
【Button】
| プロパティ | 値 |
|---|---|
| text | 移動 |
【Browser】
| プロパティ | 値 |
|---|---|
| border | BORDER |
| layoutData.grabExcessVerticalSpace | true |
| layoutData.horizontalAlignment | FILL |
| layoutData.horizontalSpan | 3 |
| layoutData.verticalAlignment | FILL |
移動ボタンが押されたら、指定したURLへ移動させるようにイベント処理を組み込みます。フォームデザイナで移動ボタンを右クリック＞Events＞widgetSelectedを選択します。これで雛形が作成されるので以下のように実装します。
public void widgetSelected(org.eclipse.swt.events.SelectionEvent e) {
browser.setUrl(text.getText());
}
最終的には以下のような画面になりました。BrowserコントロールはWindows環境ならIEコンポーネントが使われるようですね。今回作成したアプリケーションにはWebのProxy設定を行っていないのに表示できているので（筆者の環境ではProxyが必要）、IEの設定が使われているようです。
書籍
Webサイト