Weber Framework - チュートリアル1 -

　Weber4.0 はじめの一歩

1) XHTMLによる画面開発

WeberではJSPの代わりにXHTMLでWebページを作成します(JSPでの開発も可能ですが、Weber4.0以降からはXHTMLによる開発を推奨しています)。
XHTMLはWebページを記述するためによく使われるHTMLを、XMLに適合するように定義し直したマークアップ言語で、WeberフレームワークはこのXHTMLとWeberフレームワーク独自のタグを組み合わせることにより、HTMLベースの動的な画面を開発することができます。

まずは簡単なサンプルから見ていきましょう。

ここで紹介するWebアプリケーションの構成は以下のとおりです

2) 入力画面の作成 (hello_input.html)

まず入力となる画面を作成します。

<html>
<head>
    <title>Hello</title>
    <link rel="stylesheet" type="text/css" href="./../../css/stylesheet.css"/>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
    <font color="red">
        <span w_kind="error"/>
    </font>
    <form method="post" action="./html_4_0/hello/show.wb">
        <input type="hidden" name="w_operate" value="NoOpAction"/>
        名前を入力してください<br/>
        例）ios tarou<p/>
        <input name="name" value="${name}"/><p/>
        年齢を入力してください<br/>
        <input name="age" value="${age}"/><p/>
        <input type="submit" value="送信"/><br/>
    </form><p/>
</body>
</html>

Weber4.0チュートリアル版の定義ファイル、HTMLファイルのエンコーディングについて

Weber4.0チュートリアルの定義ファイル、HTMLファイルは全てUTF-8で記述されています。
これは、チュートリアルに付属しているサンプルにAjax（非同期通信）が含まれており、非同期通信部分のエンコードがUTF-8を推奨しているためです。

その為、これらのファイルを編集する場合やWeberCreatorと併用する場合（デフォルトのエンコードがShift_JIS になっている）は、エンコードの指定に注意してください。

尚、JavaソースファイルはMS932になっています。

XHTMLは、HTMLで使用できる要素や属性をそのまま利用して、XMLの規則に従って再定義し直したものです。
その為、XHTML文書はHTML文書よりタグが厳密な記法に従っています。
HTML文書をでのタグの記述は次の規則に従う必要があります。

XHTMLの記述ルール

すべてのタグは小文字で記述する

属性の値は必ず引用符で囲む

終了タグを省略しない

空要素のタグは/>で閉じる

属性は省略書式を使わない（checed="checked"等）

Weberフレームワークでは上記の記法に従わないXHTML(HTML)文書は、構文解析時にエラーを返します。

又、以下のタグはWeber独自のタグで、フォームの入力チェックでエラーになった場合、このエリアにエラーメッセージを出力します。

3) 出力結果画面の作成(hello_show.html)

次に出力結果を表示する画面を作成します。

<html>
<head><title>ようこそ</title>
<link rel="stylesheet" type="text/css" href="./../../css/stylesheet.css"/>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
    <p>ようこそ<span w_kind="write" w_value="${hello.name}">太郎</span>さん<br/></p>
    <p>
        ${hello.name}さんは${hello.age}歳ですね。<br/>
        <span w_kind="equal" w_name="hello" w_property="age" w_value="20">
            今年は成人式ですね。<br/>
        </span>
        <span w_kind="meq" w_name="hello" w_property="age" w_value="20">
            たばこ吸えますね。<br/>
        </span>
        <span w_kind="lthan" w_name="hello" w_property="age" w_value="20">
            たばこ吸えませんね。<br/>
        </span>
        来年は${mathC.add(hello.age, 1)}歳ですね
    </p>
    
    <p>
        <li>登録済みの名前一覧</li>
        <table border="1">
            <tr>
                <td>名前</td><td>年齢</td>
            </tr>
            <span w_kind="iterate" w_id="person" w_name="personList" >
                <tr>
                    <td><span w_kind="write" w_value="${person.name}">太郎</span>さん</td>
                    <td><span w_kind="write" w_value="${person.age}">32</span>歳</td>
                </tr>
            </span>
        </table>
    </p>
</body>
</html>

「${hello.name}」と記述された箇所はJSP2.0で採用されたEL式に似たような動きをします。
${hello.name}部はサーバでセットされたhelloオブジェクトのメンバであるnameを出力することを表します。

以下のタグは、条件分岐を行います。
w_kind=の右辺に指定する値はequal, mthan, lthan, mequal, lequal等を指定します。
w_value=の右辺には比較対象となる値を直接入力するか、EL式を指定します。

この場合、helloオブジェクトのメンバであるageが20と等しければ、spanタグの中身が評価されます。

4) アクションクラスの作成(HelloShowAction.java)

このサンプルのアクションクラスです。

package weber_4_0_sample.org.itscool.hello;

import java.util.ArrayList;
import org.itscool.commons.util.InputCheckUtil;

import org.itscool.weber.action.Action;
import org.itscool.weber.action.ActionBucket;
import org.itscool.weber.controller.Globals;

public class HelloShowAction extends Action{
    //入力チェック
    public String doValidate(ActionBucket bucket){
        String ret = Globals.RET_SUCCESS;
        String name = (String)bucket.getParameter("name");
        String age = (String)bucket.getParameter("age");
        //名前未入力チェック
        if (name ==null) {
            putMessage("name","名前を入力してね");
            ret = "input";
        //全角チェック
        }else if(!InputCheckUtil.checkFullSize(name)){
            putMessage("name","名前は全角で入力してね");
            //入力エラーの場合はhello_input.html画面に戻ります
            ret = "input";
        }
        //年齢未入力チェック
        if( age==null ){
            putMessage("age","年齢を入力してね");
            ret = "input";
        //半角数値チェック
        }else if(!InputCheckUtil.checkDigit(age)){
            putMessage("age","年齢は半角数字を入力してね");
            ret = "input";
        }
        //入力チェックが正常の場合はGlobals.RET_SUCCESSを返します。
        //doValidateメソッドの戻り値がGlobals.RET_SUCCESSの場合、
        //doExecuteメソッドが実行されます。
        return ret;
    }
    
    public String doExecute(ActionBucket bucket){
        Hello hello = (Hello)bucket.getForm();
        String newName = hello.getName().toUpperCase();
        hello.setName(newName);
        
        bucket.setAttribute("hello", hello);
        
        ArrayList personList = (ArrayList)bucket.getAttributeFromSession("personList");
        if( personList == null){
        	personList = new ArrayList();
        	bucket.setAttributeFromSession("personList", personList);
        }
        personList.add(hello);
        return "show";
    }
}

5) フォームクラスの作成(HelloBean.java)

入力画面にセットされたリクエストパラメータを受け取るためのクラスです。

package weber_4_0_sample.org.itscool.hello;

public class Hello {
    private String name;
    private int age;
    
    public String getName() { return name; }
    public void setName(String string) { name = string; }
    public int getAge() { return age; }
    public void setAge(int i) { age = i; }
}

6) リクエストとアクションのマッピングについて

Weber4.0にはアクションマッピングファイル(weber-config.xml)を省略することができます。
アクションマッピングファイルを省略する代わりに、ある一定のルールに従った HTMLファイルとJavaクラスを作成し、リクエストを発行する際も一定のルールに従う必要があります。

以下のリクエストURIを例にリクエストとアクションクラスのマッピングルールについて解説します。

Webアプリケーションのパス/.../モジュール名/アクション名.wb(全て小文字)

"Webアプリケーションのパス/.../"の部分までは任意ですが、"モジュール名/アクション名.wb" の部分が、フォームクラス、アクションクラスと対応します。

まず、リクエストURIに対応するフォームクラス名は以下のようになります。

モジュール名.java

フォームクラスはモジュール名から"_(アンダースコア)"を除去し、アンダースコアの次の文字と頭文字を大文字に置き換えたものがクラス名になります。
（例：モジュール名 mail_address -> フォームクラス名 MailAddress )

リクエストURIに対応するアクションクラス名は以下のようになります。

モジュール名+アクション名+Action.java

アクションクラスのアクション名はモジュール名にアクション名(頭文字大文字)を加えたものになります。
（例：リクエストURI /web-app/･･･/mail_address/get.wb -> アクション名 MailAddressGetAction ）

尚、パッケージ名については、最下層のパッケージがモジュールの名前となり、それより上位のパッケージがルートパッケージといった位置づけになります。

ルートパッケージ.モジュール名

ルートパッケージの定義はdi-config.xmlのpkgName要素で設定します。

7) 実行

Home　 Next　