UriFragmentUtilityによるフラグメント管理
最後に、ページの表示や状況を示すのに用いるフラグメントについて触れておきましょう。Webアプリケーションで、1つのページでさまざまな状況に応じて異なる作業を行わせたい場合、例えばパラメータを指定してページにアクセスする、といった手法をとることがあります。Vaadinのフラグメントは、これに似た働きを提供します。
HTMLでは、フラグメントは<a>タグを使い、ページの特定の場所にジャンプするのに用います。Vaadinでは、フラグメントで表示そのものを変えることができます。実際の利用例をあげておきましょう。
package com.example.myvaadin;
import com.vaadin.Application;
import com.vaadin.ui.*;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.UriFragmentUtility.*;
public class MyvaadinApplication extends Application {
UriFragmentUtility urifu = null;
Window mainWindow = null;
Panel mainpanel = null;
Panel otherpanel = null;
@Override
public void init() {
mainWindow = new Window("Myvaadin Application");
setMainWindow(mainWindow);
final VerticalLayout layout = (VerticalLayout) mainWindow.getContent();
layout.setMargin(true);
layout.setSpacing(true);
urifu = new UriFragmentUtility();
mainWindow.addComponent(urifu);
urifu.addListener(new FragmentChangedListener() {
public void fragmentChanged(FragmentChangedEvent source) {
String s = source.getUriFragmentUtility().getFragment();
if ("other".equals(s)){
layout.removeComponent(mainpanel);
layout.addComponent(otherpanel);
} else {
layout.removeComponent(otherpanel);
layout.addComponent(mainpanel);
}
}
});
Label label = new Label("<h1>Vaadin Sample</h1>",Label.CONTENT_XHTML);
layout.addComponent(label);
mainpanel = getMainPanel();
otherpanel = getOtherPanel();
layout.addComponent(mainpanel);
}
Panel getMainPanel() {
Panel mainpanel = new Panel("Main Page");
mainWindow.addComponent(mainpanel);
Label label = new Label("<h1>Main</h1><p>これは、MainPageです。</p>",Label.CONTENT_XHTML);
mainpanel.addComponent(label);
Button btn = new Button("移動する");
btn.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
urifu.setFragment("other", true);
}
});
mainpanel.addComponent(btn);
return mainpanel;
}
Panel getOtherPanel() {
Panel otherpanel = new Panel("Other Page");
mainWindow.addComponent(otherpanel);
Label label = new Label("<h1>Other</h1><p>これは、OtherPageです。</p>",Label.CONTENT_XHTML);
otherpanel.addComponent(label);
Button btn = new Button("戻る");
btn.addListener(new Button.ClickListener() {
@Override
public void buttonClick(ClickEvent event) {
urifu.setFragment("main", true);
}
});
otherpanel.addComponent(btn);
return otherpanel;
}
}
これは、Panelの表示を2つ用意しておき、ボタンをクリックして切り替えるサンプルです。ここでは、「UriFragmentUtility」というインスタンスを作成し、addComponentでmainWindowに組み込んでいます。これがフラグメントを管理するクラスです。ここで「setFragment」を呼び出すと、引数に指定したStringにフラグメントを設定できます。
フラグメントを変更すると、UriFragmentUtilityに組み込んだFragmentChangedListenerの「fragmentChanged」メソッドが呼び出されます。ここで、UriFragmentUtilityの「getFragment」メソッドで現在のフラグメントを取得し、その値に応じてそれまでのPanelをmainWindowから取り外し、別のPanelを組み込んでいるのです。
フラグメントを利用することで、フラグメントの変更と、フラグメントに応じた処理をきれいに分割し記述できるようになります。さまざまな表示を必要に応じて切り替えて使うような場合には、フラグメントによる管理を覚えておくと役立つでしょう。
まとめ
今回は、主としてデータの扱いを中心に説明を行いました。かなり詰め込んだため、説明もやや端折り気味でしたが、ソースコードをよく読めばそれほど難しいことを行っているわけではないと分かるでしょう。
Vaadinのような「JavaとJavaScriptを融合するフレームワーク」は、今後、ますます需要が高まってくる分野と言えます。現時点でもGWTを筆頭にいくつもの著名なフレームワークが使われています。しかし、名前をよく耳にする割には、実際に使ったことがない、という人も多いのではないでしょうか。
Webの開発は「サーバーサイドとクライアントサイド」の両方を作成します。これまで、両者を別々に作るのが当たり前でしたが、Vaadinを使うと、両者が完全に融合し、どこからどこまでがサーバ側で動き、どれがクライアント側で動いているのかわからなくなっていることに気が付くはずです。こうした開発スタイルは、今後さらに広まっていくことは間違いないでしょう。
