GWTベースのJava用RIAフレームワーク「Vaadin」

Vaadinとは

今回はJavaアプリケーション向けのRIAフレームワークである「Vaadin」を紹介する。Vaadinは、JavaによるWebアプリケーション開発において、JavaのコードだけでAjaxを利用したリッチなUIを実現するためのフレームワークである。近年のWebアプリケーション開発では、すでにAjaxが必須の技術となってきている。Ajaxを素直に使おうとすればJavaScriptを記述する必要があるが、Javaに慣れ親しんだ開発者であれば、できればJavaをベースとしたフレームワークだけでUIを構築したいと思うこともあるだろう。

そのような場合の選択肢のひとつとしては、ICEFacesやRichFacesのような、AjaxをサポートしたJSFコンポーネントライブラリを使うという方法が挙げられる。これらのツールについてはまた別の機会に触れたいが、今回紹介する「Vaadin」は、JSFを使わない、もうひとつの選択肢を提供してくれるフレームワークである。

VaadinはGWT(Google Web Toolkit)をベースに開発されているため、UIの見た目はGWTのそれとよく似ている。しかし、GWTのように自分でHTMLを記述する必要はなく、すべてJavaのコードだけでUIの構築ができるようになっている。VaadinのUIコンポーネントモデルは、AWT/Swingに似ていると言えばイメージしやすいかもしれない。すなわち、UIコンポーネントごとにクラスが定義されており、コンテナとなるコンポーネントに対してレイアウトを設定し、各UIコンポーネントを配置していくという形である。したがって、AWT/Swingに慣れた開発者であれば違和感なく使うことができるだろう。

VaadinでどのようなUIや機能が提供されるのかは、公式サイトにあるデモアプリケーションで見ることができる(図1)。[View Source]をクリックすれば各デモプログラムのソースコードを見ることができるが、Swingのプログラムに良く似ていることに気づくだろう。デモを見てもわかるように、Vaadinには非常に多くのUIコンポーネントが用意されている。これらを駆使することで、Javaのコーディングだけで、Webブラウザから利用可能なRIAアプリケーションを開発することが可能となる。

Vaadinのインストール

それでは、実際にVaadinを使ってみよう。Vaadinには、公式のEclipseプラグインと、有志によるNetBeansプラグインが用意されている。スタンドアロンで動作するバイナリも配布されているが、特に理由がなければEclipseかNetBeansのプラグインを利用するのがいいだろう。

Eclipseプラグインは、アップデートマネージャにおいて図2のようにアップデートサイトとして「http://vaadin.com/eclipse」を追加すればインストールおよびアップデートができるようになる。NetBeansプラグインは、ダウンロードサイトより「Vaadin NetBeans plugin NBM installation package」をダウンロードし、プラグインマネージャで図3のようにダウンロードした.nbpファイルを追加してインストールする。いずれも基本的な機能は変わらないが、EclipseプラグインにはUIコンポーネント開発用のビジュアルエディタ(ただし現在はまだテスト版)が付属すること、NetBeansプラグインはVaadinのバージョンが最新でないことなどの違いがある。今回は、ひとまずNetBeansプラグインの方を使うものとして話を進める。

Vaadinを使ったWebアプリ開発

NetBeansでVaadinを使う場合、プロジェクトの種類は通常のJava Webアプリケーションと同様に[Java Web] - [Webアプリケーション]を選択すればよい。プロジェクト名やアプリケーションサーバなどの設定も通常と同様に行う。そして最後のフレームワークの選択画面で、図4のように「Vaadin」を選択し、下部に必要な設定を記入する。Vaadin Servlet Name以外は任意に変更することができる。

• Vaadin Servlet Name - Vaadinを利用したWebアプリケーションのベースとなるサーブレット名
• Vaadin URL Pattern - Vaadin関連のプログラムが配備されるURL
• Vaadin Application Class - Vaadinを利用したWebアプリケーションのメインクラス名
• Main Package - Vaadin Application ClassをはじめとするVaadin関連のクラスが所属するパッケージ

プロジェクトが作成されると、その構成は図5のようになるはずだ。この例では、フレームワークの設定でVaadin Application Classを「MyVaadinApplication」としたので、「MyVaadinApplication.java」というクラスファイルが生成されている。これが作成するアプリケーションのメインのクラスとなる。

MyVaadinApplication.javaの中身は以下のようになっている。詳細は次回説明するが、まずベースとなるWindowオブジェクトを生成し、そこにLabelオブジェクトを使ってテキストを配置しているということが読み取れるだろう。

リスト1

public class MyVaadinApplication extends Application {
    @Override
    public void init() {
    Window mainWindow = new Window("MyVaadinApplication");
        Label label = new Label("Hello Vaadin user");
    mainWindow.addComponent(label);
    setMainWindow(mainWindow);
    }
}

とりあえず作成された雛形のままでプロジェクトを実行してみると、Webブラウザでの表示は図3.4のようになり、MyVaadinApplicationが呼び出された結果がアプリケーションに反映されているのがわかる。このときアクセスしているURLは「http://example.co.jp/VaadinSample/vaadin/」(コンテキストルートが「http://example.co.jp/VaadinSample/」の場合)である。

最初にMyVaadinApplicationが実行される仕組みは、web.xmlから読み取ることができる。Vaadinを使ったプロジェクトのweb.xmlは次のようになっており、「/vaadin/」以下に対するアクセスでcom.vaadin.terminal.gwt.server.ApplicationServletが実行されるようになっている。このサーブレットにパラメータとしてメインのクラス名(この場合はMyVaadinApplication)を渡している。そして実行時のコンテキストパスについても、プロジェクトのプロパティ設定を見ると図3.6のように「/vaadin/」になっていることが確認できる。

リスト2

<servlet>
    <servlet-name>VaadinApplication</servlet-name>
        <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
        <init-param>
            <param-name>application</param-name>
            <param-value>jp.co.mycom.toolde.vaadin.MyVaadinApplication</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>VaadinApplication</servlet-name>
        <url-pattern>/vaadin/*</url-pattern>
    </servlet-mapping>

このように、Vaadinで提供されるサーブレットを間に挟むことによって、JavaコードのみでのUIの生成を実現しているという仕組みである。