はじめに
Vaadinの1番の特徴は、その豊富なコンポーネントにあります。強化されたGUIは、JavaScriptライブラリなどでよく見られますが、Javaのフレームワークではあまり見ることがありません。Vaadinのコンポーネントは、HTMLのフォーム関係のコントロールとは何がどう違うのでしょうか。今回は、主なコンポーネント類を一挙に紹介していくことにしましょう。
対象読者
- Javaで手ごろなフレームワークを探している技術者
- 最近のフレームワークをごくざっと理解しておきたい方
- Web開発の手法がどうも気に入らない、と常々考えているJavaプログラマ
リンクについて
今回は、Vaadinに用意されているさまざまなコンポーネントについて説明をしていきましょう。まずは、Webにはつきもののリンクについてです。クリックして他のページなどに移動するハイパーリンクは、「Link」というクラスとして用意されています。これは、次のような形でインスタンスを作成します。
new Link( 表示テキスト, 《ExternalResource》);
第1引数にはリンクとして表示するテキストを、第2引数にはExternalResourceというクラスを指定します。これは外部のリソースを利用するためのもので、引数にリンクするページのアドレスを指定してインスタンスを作成します。
// import com.vaadin.ui.*; を追記
public void init() {
mainWindow = new Window("Myvaadin Application");
VerticalLayout layout = (VerticalLayout)mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
Link link = new Link("Googleに移動", new ExternalResource("http://www.google.co.jp/"));
layout.addComponent(link);
setMainWindow(mainWindow);
}
これは、クリックするとGoogleのサイト（www.google.co.jp）にジャンプするリンクです。ここではnew Linkでインスタンスを作成し、このとき第2引数にnew ExternalResourceでGoogleサイトのアドレスを指定したインスタンスを渡しているのが分かります。
リンクボタンについて
リンクには、実はもう1つの形があります。それは、前回にも説明した「Button」を使うというものです。Buttonは、普通にインスタンスを作って組み込めばプッシュボタンになりますが、ちょっと設定を変えることで、リンクとして利用することもできるようになります。
public void init() {
mainWindow = new Window("Myvaadin Application");
VerticalLayout layout = (VerticalLayout)mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
Button button = new Button("リンクをクリック！");
button.setStyleName(Button.STYLE_LINK);
button.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
mainWindow.showNotification("リンクをクリックしました。");
}
});
layout.addComponent(button);
setMainWindow(mainWindow);
}
例えば、このようにすると、「リンクをクリック！」というリンクが表示されます。これをクリックすると、画面にメッセージが表示されます。ここでは、Buttonを作成して組み込んでいるのですが、ボタンの「setStyleName」というメソッドを呼び出し、Button.STYLE_LINKに設定をしていることが分かるでしょう。これで、ボタンは通常のプッシュボタンではなくリンクの形で表示されるようになるのです。
クリックして実行している「showNotification」というメソッドについても触れておきましょう。これはWindowクラスに用意されているもので、引数に指定したテキストをWebページ内に表示する働きをします。ぼーっと文字が浮かび上がってすぐ消えるので、ちょっとしたメッセージを表示するのにはとても重宝します。
Linkによるリンクが他のページへの移動のためのものであるのに対し、Buttonによるリンクは、「リンクとして表示される」というだけで、実際の利用方法はプッシュボタンとまったく同じであることが分かります。
