チュートリアル1(モックアップ)

モックアップの作成

実際に簡単なサイトを構築してみます。まずはモックアップの作成です。

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ログイン</title>
</head>
<body>
<form action="hello.html">
ユーザーID <input size="20" type="text" name="user_id"><br>
パスワード <input size="20" type="password" name="password"><br>
<br>
<input type="image" src="button1.gif"></form>
</body>
</html>

こんにちはxxxさん。

ログアウト

hello.html

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Hello</title>
</head>
<body>
<p>こんにちは<span name="user_id">xxx</span>さん。</p>
<p><a href="login.html">ログアウト</a></p>
</body>
</html>

ログインできません。

戻る

error.html

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>エラー</title>
</head>
<body>
<p>ログインできません。</p>
<p><a href="login.html">戻る</a></p>
</body>
</html>

画像(button1.gif)を含め、４ファイルのサイトです。このうち、error.htmlは静的ページ、login.htmlとhello.htmlは動的ページとします。

スケルトンソースの生成

モックアップファイルは、srcディレクトリに存在し、outディレクトリにソースファイルその他を出力することとします。
また、tutorial1というパッケージにし、画像やerror.htmlは、サーブレットコンテナのコンテキストにします(つまり、サーブレットと同じ階層のURLになるという意味)。

java paraselene.mockup.Make -html src -out out -package tutorial1 -other ./ -exclude error.html

-htmlはモックアップの格納場所。
-outは出力先。
-packageはパッケージ名。
-otherは静的コンテンツのURL接頭辞。
-excludeは静的ページとなるファイル。index*.htmlのようにワイルドカードが使えます。また、ディレクトリ階層に関係なくそのファイル名と一致したものを除外します。

引数なしで実行するとヘルプが出ますので、詳しくはそちらを参照して下さい。
デフォルトのHTML文字コードはUTF-8です。そうでない場合、引数で文字コードを指定して下さい。
※詳しくはスケルトン生成ツールを参照。

生成物の確認

正常終了すると、out/Readme.html が作成されますので、これをブラウザで確認します。以下、その抜粋です。

以下のファイルを生成しました。内容を確認して下さい。

<out>
<exclude>	除外されたファイルがコピーされています。これらを、Webサーバー等の所定の場所に配置して下さい。この中に存在するファイルの一覧は、後述の除外ファイル一覧を参照して下さい。
<src>
<base>	この中のソースファイルは変更しないで下さい。
<logic>	ロジック記述のためのスケルトンソースファイルが格納されています。自由に変更可能ですが、クラス名は変更しないで下さい。この中に存在するクラスの一覧は、後述のlogicクラス一覧を参照して下さい。
<view>	この中のソースファイルは変更しないで下さい。
DummyPage.java	NullPage派生クラスのスケルトンソースファイルです。自由に変更可能ですが、クラス名は変更しないで下さい。
Gate.java	サーブレット本体のスケルトンソースファイルです。 doGetやdoPostはスーパークラス側で実装されており、その動作は変更できません。それ以外に関しては自由に変更可能ですが、クラス名は変更しないで下さい。
SuperPage.java	動的ページのスーパークラスのスケルトンソースファイルです。全ページで共通となる処理や、ユーティリティ的なメソッドを記述できます。自由に変更可能ですが、クラス名は変更しないで下さい。
build.xml	Antのビルドファイルです。この場所で実行するとビルドを行います。ただし、paraselene.jarにクラスパスを通しておいて下さい。また、必要に応じて、このファイルを変更して使用して下さい。 ant 引数なしで実行するとソースをコンパイルします。この階層に<classes>ディレクトリを作成し、クラスファイルが出力されます。 ant doc docを引数にするとjavadocを生成します。この階層に<doc>ディレクトリを作成し、htmlファイルが出力されます。 ant clean cleanを引数にすると、<classes>と<doc>ディレクトリを削除します。
web.xml	WEB-INF配下に配置するweb.xmlの雛形です。これをそのまま、または必要箇所をコピーして使用して下さい。

logicクラス一覧
No	モックアップファイル名	ページタイトル	クラス名	PageID	実行時URL ※getAliasURI()が優先されます。	特記
1	/hello.html	Hello	tutorial1.logic.HelloHtml	tutorial1.base.PageType. HELLO_HTML	on.ex257q.na
2	/login.html	ログイン	tutorial1.logic.LoginHtml	tutorial1.base.PageType. LOGIN_HTML	on.i8qot9.na

除外ファイル一覧
No	モックアップファイル名	解決パス
1	/button1.gif	.//button1.gif
2	/error.html	.//error.html

out/src の中の全てのソースをコンパイル( servlet API とparaselene.jar にクラスパスを通して下さい、Apache Commons は不要です)し、tomcat に配置してみます。
tomcat 自体にも paraselene.jar はクラスパスが通るようにして下さい(tomcat のクラスパスには上のクラスパスの他、Apache Commons が必要です)。
$CATALINA_HOME/webapps/tutorial1/ の直下に out/exclude にある全てのファイル(画像と error.html)を置きます。
$CATALINA_HOME/webapps/tutorial1/WEB-INF/ の直下に out/web.xml を置きます。
$CATALINA_HOME/webapps/tutorial1/WEB-INF/classes の直下に、コンパイル済みのクラスファイルを置きます。

実行

最初はログインページですが、当然 login.html では参照できません。
Readme.html の logic クラス一覧にある「実行時 URL 」を使います。サーバーが localhost で、tomcat が 8080 ポートなら、
http://localhost:8080/tutorial1/on.i8qot9.na
でアクセスします。
ログインボタンでページ遷移し、ログアウトリンクでログインページに戻る事が確認できますが、ブラウザから確認できる HTML ソースはモックアップのものと少し異なります。

ログイン画面

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:

<html>
<head>
<meta content="text/css" http-equiv="Content-Style-Type">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ログイン</title>
</head>
<body>
<form action="lu.tmzfgi.mo.i8qot9.on.ex257q.na">
<input name="paraselene$form" value="g" type="hidden">
ユーザーID <input name="user_id" type="text" size="20"><br>
パスワード <input name="password" type="password" size="20"><br>
<br>
<input src=".//button1.gif" type="image"></form>
</body>
</html>

<META http-equiv="Content-Type" content="text/html; charset=UTF-8">は除去されます。
文字コード(MIMEタイプ)は、HTTPヘッダによりブラウザへ通知します。

こんにちはxxxさん。

ログアウト

Hello 画面

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

<html>
<head>
<meta content="text/css" http-equiv="Content-Style-Type">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello</title>
</head>
<body>
<p>こんにちは<span name="user_id">xxx</span>さん。</p>
<p><a href="lu.tnqbr4.mo.ex257q.on.i8qot9.na">ログアウト</a></p>
</body>
</html>

チュートリアル2(view と logic)へ

最終更新: 2009/10/21

特に明示されていない限り、本Wikiの内容は次のライセンスに従います：CC Attribution 3.0 Unported

文書の先頭へ

API リファレンス

ダウンロード

サイトマップ

チュートリアル1(モックアップ)

モックアップの作成

スケルトンソースの生成

生成物の確認

コンパイル

実行

URL について

リクエストID

遷移元ページ

遷移先ページ