arcanum_jp’s blog

おっさんの日記

Vaadin勉強その2


 先日Vaadinを勉強し始めたはいいが、プラグインがインストールできなくていきなりorz...となってしまった。今回はプラグインに頼らないために実験したことをメモ。


 とりあえず、Webアプリには違いないのでこんなフォルダ構成にしてみた。



 それでこれをEcliseで「新規」⇒「プロジェクト」⇒「Tomcatプロジェクト」を選択して、プロジェクトを作った。それがこれ。プロジェクト名は「vaadintest1」コンテキスト名も同じなので「http://localhost:8080/vaadintest1」でアクセスできる。




 こっから先はweb.xmlの世界。Webアプリケーションとしてはweb.xmlServlet-mappingタグから追っていけばいい話・・・とweb.xmlを見ると、あらら・・・たーくさんあって目移りしてしまう。でも良く見ると、ひとつのアプリケーションに沢山のサーブレットがあって、それぞれがVaadinのWindowになる起点となるらしい。少なくともダウンロードして起動すると立ち上がるデモは次のWindow(アプリケーション)の集合体。デモが起動したらコンテキストルートに、下記のアプリケーション?Window名を付加すれば起動する。

  1. PortletDemo
  2. VaadinApplicationRunner
  3. Reservr
  4. SimpleReserver
  5. CalendarDemo
  6. FeatureBrowser
  7. Sampler
  8. AddressBook
  9. HelloWorld
  10. Calc
  11. ColorPickerApplication
  12. VaadinTunesLayout
  13. Coverflow
  14. ReindeerThemeStyles



 CodeZineの記事では、すべてのアクセスはこのcom.vaadin.terminal.gwt.server.ApplicationServletに送られてくるとなっていたので、url-patternタグの内容からservlet-mappingタグ⇒servletタグ⇒servlet-nameタグと見ていけば良い。ためしにサンプルにあったCalcサーブレットから追っていったら、ビンゴ!ApplicationServletに行き着いた。Vaadinも何のことはない、他のフレームワークと同じ構成。


 あとは記事にあったようにサンプルのクラスをまず作り、

package jp.arcanum.test;

import com.vaadin.Application;
import com.vaadin.ui.Label;
import com.vaadin.ui.Window;

public class MyvaadinApplication extends Application {

	public void init() {

		Window mainwindow = new Window("バーディン!");
		Label label = new Label("Hello world");
		mainwindow.addComponent(label);
		setMainWindow(mainwindow);

	}

}


 つぎにweb.xmlを書く。これはVaadinのサンプルから最小限のものを抜き出したもの。

<?xml version="1.0" encoding="ISO-8859-1"?>

<!DOCTYPE web-app
    PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
	<display-name>Vaadin Test</display-name>
	<description> Vaadin TestApplication </description>

	<context-param>
		<param-name>productionMode</param-name>
		<param-value>false</param-value>
		<description>Vaadin production mode</description>
	</context-param>

	<servlet>
		<servlet-name>Hoge</servlet-name>
		<servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
		<init-param>
			<param-name>application</param-name>
			<param-value>jp.arcanum.test.MyvaadinApplication</param-value>
		</init-param>
	</servlet>

	<servlet-mapping>
		<servlet-name>Hoge</servlet-name>
		<url-pattern>/*</url-pattern>
		<!-- Hint for the automatic deployment descriptor generator -->
		<!-- portlet style= -->
	</servlet-mapping>

	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.htm</welcome-file>
	</welcome-file-list>

</web-app>


 で、Tomcatの再起動して・・・






 ヤッター!とりあえず画面に文字が出た!次に記事でも出ていた次の画面に突っ込んでみる。セッションの関係上か、再起動したあとは新しいブラウザを開いて実行したほうが無難。


package jp.arcanum.test;

import com.vaadin.Application;
import com.vaadin.event.MouseEvents.ClickEvent;
import com.vaadin.event.MouseEvents.ClickListener;
import com.vaadin.terminal.gwt.client.ui.ClickEventHandler;
import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

public class MyvaadinApplication extends Application {

	Label label = null;
	TextField field = null;

	public void init() {

		Window mainWindow = new Window("Myvaadin Application");
		VerticalLayout layout = (VerticalLayout) mainWindow.getContent();
		Label h1 = new Label("<h1>Vaadin Sample</h1>",Label.CONTENT_XHTML);
		layout.addComponent(h1);
		label = new Label("こんにちは!");
		layout.addComponent(label);
		HorizontalLayout formlayout = new HorizontalLayout();
		formlayout.setSpacing(true);
		layout.addComponent(formlayout);
		field = new TextField();
		formlayout.addComponent(field);
		Button button = new Button("クリック");
		button.addListener(
				new Button.ClickListener() {
					public void buttonClick(Button.ClickEvent event) {
						Object s = field.getValue();
						label.setValue(s);
					}
				}
		);
		formlayout.addComponent(button);
		setMainWindow(mainWindow);

	}

}


入力して・・・



おおお!とりあえず、画面が動いた!スゲー!