目次

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

モックアップの作成

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

ユーザーID
パスワード

login.html
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 ソースはモックアップのものと少し異なります。

ユーザーID
パスワード

ログイン画面
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>

URL について

フォームactionやリンク先のURLは次のフォーマットになっています。
lu.リクエストID.mo.遷移元ページ.on.遷移先ページ.na

リクエストID

ページ表示の度に新規発行されます。
もし、同じリクエストIDを受け取った場合、ブラウザの「戻る」で再度クリックされた(または二度押し)か、直接URLをブラウザにコピーペーストしてアクセスされたと想定されます。
※isCheckRepeatSameRequest()メソッドでtrueを返す場合に限り発行されます。スケルトンソース(SuperPage.java)では false を返していますので、実際には上記の例のようにはなりません。

遷移元ページ

最初にブラウザに指定した、
http://localhost:8080/tutorial1/on.i8qot9.na
には遷移元ページ指定が無い状態です。
URL 中に遷移元があれば、Paraselene はセッションにある履歴を参照します。もし履歴が存在しなければ、直接 URL をブラウザにコピーペーストしてアクセスされた、またはセッションがタイムアウトした後にアクセスされたと想定されます。

遷移先ページ

ここへ画面遷移します。

ページの URL は、パッケージ名とファイルパスにより生成します。このため、スケルトンを何度生成し直しても、同じページには同じ URL が付与されます。
ただし、 URL 生成処理にて偶然同じ URL を持つページが発生した場合には URL が変更されますので絶対ではありません。

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