サンプルアプリケーションの作成

2007-05-11 16:19:41

Ymirを使ってサンプルアプリケーションを作ってみましょう。サンプルアプリケーションとして、指定した2つの数字を足した結果を表示する「足し算アプリ」を作っていきます。

ツールの準備

開発にはEclipse3.2を使用します。また、次のプラグインを予めインストールしておくと開発をスムーズに進めることができます。

Tycho（m2eclipseプラグイン） - http://m2eclipse.codehaus.org/
Maven Additionalプラグイン - http://www.skirnir.net/eclipse/updates/3.2/
sysdeo Tomcatプラグイン - http://www.sysdeo.com/eclipse/tomcatplugin

以下の説明では、上記プラグインを全てインストールしたものとして説明します。

まずEclipseのワークスペースに空のYmirプロジェクトを作成します。空のYmirプロジェクトは、SeasarプロジェクトのMaven2レポジトリに置いてあるSkeletonアーカイブを展開して作成するのが簡単です。Skeletonアーカイブをダウンロードしてきてワークスペースディレクトリに展開して下さい。アーカイブは展開するとEclipseのプロジェクト形式になっていますので、ワークスペースにインポートして下さい。インポートするとワークスペースに「ymir-skeleton」というプロジェクトができます。

Maven Additionalプラグインをインストールした場合は、プロジェクトでこのプラグインを利用する設定にしておくと良いでしょう。プロジェクトのアイコンを右クリックして「Properties」メニューを選択し、表示されるウィンドウの左側のツリー表示から「Maven2 Additional」をクリックして、「Enable Additional Maven Nature」にチェックを入れて「OK」ボタンを押して下さい。こうすることで、プロジェクトの依存するJarファイルがpom.xmlの記述内容に従ってsrc/main/webappに自動的にコピーされるようになります。

次にTomcatにプロジェクトをデプロイします。ワークスペース上の「ymir-skeleton」を右クリックして、「Tomcatプロジェクト→コンテキスト定義を更新」メニューをクリックして下さい。「/ymir-skeleton」というコンテキストパスでプロジェクトがデプロイされます。

最後にTomcatを起動して下さい。

プロジェクトの初期設定

ブラウザからコンテキストルートのURLにアクセスして下さい。以下、コンテキストルートのURLをhttp://localhost:8080/ymir-skeleton/として説明します。

アクセスすると次のような画面が表示されます。

これはYmirの自動生成ロジックが返している画面です。今後開発を進めていく中でしばしばこのような形でYmirが指示を求めてきますので、適宜指示を与えて下さい。

ここではプロジェクトを作ってから最初のアクセスということでプロジェクトに関する情報を要求していますので、適切な値を埋めて「OK」ボタンを押して下さい。

projectRoot: Eclipseのプロジェクトディレクトリのパスを入力して下さい。デフォルト値のままで良ければそのままで構いません。
rootPackageName: 開発するWebアプリケーションのJavaソースコードのルートパッケージ名を入力して下さい。ここでは「com.example」と入力して下さい。
extension.beantable.enable: ここではデフォルトのまま（「利用しない」）で構いません。

「OK」ボタンを押すとプロジェクトの初期設定が完了します。この後は画面に表示される指示に従ってEclipseプロジェクトをリフレッシュし、Tomcatを再起動してから「OK」ボタンを押して下さい。

Welcomeページの指定

Tomcatを再起動してから「OK」ボタンを押すと、次のような画面が表示されます。

これは、コンテキストルートにアクセスがあった際の処理クラスが見つからないということを言っています。

Ymirではコンテキストルートにアクセスがあった場合、_RootPageというクラスを探して処理を委譲します。_RootPageには「指定されたリダイレクト先にリダイレクトする」というコードを書くことで、web.xmlのwelcome-file指定と同じことをすることができます。

ここでは、コンテキストルートにアクセスがあった場合に/add.htmlというページにリダイレクトするようにしましょう。「処理後の遷移先」という項目に「/add.html」と入力し、「リダイレクトさせる」にチェックを入れて「作成」ボタンを押して下さい。

これで_RooPageクラスが自動生成されます。Eclipseでプロジェクトをリフレッシュしてから「OK」ボタンを押して下さい。

なお自動生成されたクラスはsrc/main/javaのcom.example.webパッケージに配置されます。クラスはGeneration Gapパターンになっていて、開発者は基本的にGapクラス（_RootPage）を修正していくことになります。今後クラスのコードが自動生成ロジックによって自動更新される場合はBaseクラス（_RootPageBase）だけが更新されます。

HTMLテンプレートの作成

プロジェクトをリフレッシュしてから「OK」ボタンを押すと、HTMLテンプレート/add.htmlが見つからないというメッセージがHTMLテンプレートを追加するためのフォームとともに表示されます。

ここでは以下のように、足し算のためのフォームを表示するようなHTMLテンプレートを入力します。これはZPT（Zope Page Template）のテンプレートです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Add</title>
</head>
<body>
  <h1>足し算</h1>
  <form action="" method="post">
    <p><input type="text" name="left" value="" /> + <input type="text" name="right" value="" /> = <span tal:replace="self/result">RESULT</span></p>
    <p><input type="submit" value="計算する" /></p>
  </form>
</body>
</html>

「作成」ボタンを押してからプロジェクトをリフレッシュすると、src/main/webapp/add.htmlができていることが分かると思います。

Javaクラスの自動生成

「OK」ボタンを押すと、テンプレート/add.htmlの変更を検出したというメッセージが表示されます。

Ymirはテンプレートの変更を検出すると、テンプレートを表示するために必要だと思われるJavaクラスを自動生成（既に生成済みであれば更新）します。ここでは/add.htmlの変更を検出したので、このテンプレートを表示するために必要なAddPageクラスを自動生成します。

Ymirはテンプレートの内容から自動生成のための情報を読み取ってクラスを構築します。例えば/add.htmlに含まれているフォームのaction属性は空になっていますので、「計算する」ボタンを押すと、/add.htmlにPOSTされることになります。フォームのパラメータはleftとrightの2つです。これらのことから、YmirはPOST先のURLの処理クラスであるAddPageクラスにleftとrightのためのsetterメソッドを追加する必要があると判断します。また、テンプレート中に「tal:replace="self/result"」という属性があることから、AddPageにresultプロパティのためのgetterメソッドを追加する必要があると判断します（selfはAddPageオブジェクト自体を表します）。

一方で、テンプレートの変更を検出したという画面を使って開発者が自動生成のヒントを与えることができます。例えば、ここでは各プロパティの型を指定できます。今回は足し算アプリケーションですので、各プロパティの型をIntegerにします。

プロパティの型をIntegerに変更したら「OK」ボタンを押して下さい。Eclipseでプロジェクトをリフレッシュするとsrc/main/javaのcom.example.webパッケージにAddPageクラスが生成されていることが分かります。リフレッシュの後「OK」ボタンを押すことで、ようやく足し算フォームが表示されます。

ロジックの実装

まだ足し算のロジックを実装していないので、足し算フォームに数字を入力して「計算する」ボタンを押しても何も起きません。

ロジックはAddPageクラスに書きます。AddPageクラスをEclipseのエディタで開いて下さい。ここでEclipseのコード補完機能を使うと、実装すべきメソッドの候補が表示されます。

YmirではHTTPメソッドの名前を小文字にしたものの先頭に「_」をつけたメソッドがリクエスト処理時に呼び出されますので、ここでは「_post」というメソッドを選択して_postメソッドの雛形を作成して下さい。

作成した_postメソッドの中で足し算を行ないます。具体的には、leftとrightを足してresultに格納するようにします。

@Override
public void _post() {
    result_ = left_ + right_;
}

この時もEclipseのコード補完機能を使うと便利です。

これでロジックの実装は終了です。ブラウザから動作を確認してみましょう。

足し算フォームに数字を入力して「計算する」ボタンを押してみて下さい。正しく計算結果が表示されます。

Search

メニュー