Falcon QuickStart for Web Application

Quick Startfor Web Application

ユーザ管理webアプリケーションに検索機能を追加し、検索結果をユーザ一覧画面に表示します。初回アクセス時は、ユーザ一覧画面にすべての登録ユーザが表示されます。また、検索条件に何も指定せずに検索ボタンを押下することですべての登録ユーザが表示されます。

3.1.1. 検索画面の作成

Eclipseでfalcon_web_tutorial/WEB-INF/falcon/app.xmlファイル(以下app.xmlファイル 76行目あたりから)を開き、リスト 3-1のように修正を行います。


    <w:menu name="menu" template="titlemenu">
    </w:menu>

    <w:panel name="mainPanel">
        
        <!-- ↓TOP画面に検索フォームを追加します -->
        <w:unit name="searchForm" initial="searchForm"/>
		
        <w:unit name="userList" initial="userList"/>
        <w:event command="insertUser">
            <w:changeWidget name="userForm" widget="userForm" mode="insert"/>
        </w:event>
        <w:event command="updateUser" parameter="/data">
            <w:changeWidget name="userForm" widget="userForm" mode="update"
                key="{ID=/data/id}"/>
        </w:event>
        <w:event command="deleteUser" parameter="/data">
            <w:changeWidget name="userForm" widget="userForm" mode="delete"
                key="{ID=/data/id}"/>
        </w:event>
        <w:event command="afterEditUser">
            <w:updateWidget name="userList"/>
            <w:deleteWidget name="userForm"/>
        </w:event>
        <w:event command="afterCancelUser">
            <w:deleteWidget name="userForm"/>
        </w:event>
    </w:panel>

    <w:form name="userForm">
        <w:dataSource dao="userMap"/>
        <w:field header="ユーザID" name="user_id"
            type="text" maxlength="128" size="40"/>
        <w:field header="パスワード" name="password"
            type="password" maxlength="128" size="40"/>
        <w:field header="名前" name="user_name"
            type="text" maxlength="128" size="40"/>
        <w:field header="メールアドレス" name="mail"
            type="text" maxlength="128" size="40"/>
        <w:field header="郵便番号" name="zip"
            type="text" maxlength="7" size="10"/>
        <w:field header="住所" name="address"
            type="textarea" col="40" row="5"/>
        <w:field header="電話番号" name="tel"
            type="text" maxlength="11" size="10"/>
        <w:field header="誕生日" name="birthday"
            type="text" maxlength="8" size="10"/>
        <w:commandBox name="edit">
            <w:insert type="button" text="追加"/>
            <w:update type="button" text="更新"/>
            <w:delete type="button" text="削除"/>
            <w:ok type="button" text="OK"/>
            <w:cancel type="button" text="キャンセル"/>
        </w:commandBox>
        <w:event command="afterInsert">
            <w:fireEvent command="afterEditUser"/>
        </w:event>
        <w:event command="afterUpdate">
            <w:fireEvent command="afterEditUser"/>
        </w:event>
        <w:event command="afterDelete">
            <w:fireEvent command="afterEditUser"/>
        </w:event>
        <w:event command="afterCancelInsert">
            <w:fireEvent command="afterCancelUser"/>
        </w:event>
        <w:event command="afterCancelUpdate">
            <w:fireEvent command="afterCancelUser"/>
        </w:event>
        <w:event command="afterCancelDelete">
            <w:fireEvent command="afterCancelUser"/>
        </w:event>
    </w:form>

    <w:list name="userList">
        <w:dataSource dao="userMap"/>
        <w:field header="ユーザID" name="user_id"/>
        <w:field header="名前" name="user_name"/>
        <w:field header="メールアドレス" name="mail"/>
        <w:fieldCommandBox name="edit">
            <w:command name="update" command="updateUser" type="button" text="更新"/>
            <w:command name="delete" command="deleteUser" type="button" text="削除"/>
        </w:fieldCommandBox>
        <w:command name="insert" command="insertUser" type="button" text="追加"/>
    </w:list>
    
    <w:form name="searchForm">
        <w:field header="ユーザID" name="user_id" type="text"
	    maxlength="128" size="40"/>
        <w:field header="名前" name="user_name" type="text"
	    maxlength="128" size="40"/>
    </w:form>
    
    <!-- ↑検索フォーム条件入力フィールドの定義です -->

</w:application>

リスト 3-1　app.xmlファイル(76行目あたりから)

ブラウザで以下のURLにアクセスし、app.xmlファイルの修正内容を反映します。修正内容反映後、図 3-1の画面が表示されます。
http://localhost:8080/tutorial/?control=init

図 3-1

3.1.2 検索処理の定義

Eclipseでdb.xmlファイルを開き、以下の修正を行います。


<?xml version="1.0" encoding="Windows-31J"?>
<db:db
    xmlns:f="http://www.scw.co.jp/falcon" 
    xmlns:db="http://www.scw.co.jp/falcon/db"
    name="falcon"
    connection="falcon">

    <db:connection name="falcon" driver="org.postgresql.Driver"
        uri="jdbc:postgresql:falcon" user="falcon" password="falcon"/>

    <db:table name="m_user" desc="ユーザマスタ">
        <db:column name="ID" desc="ID"
            size="36" type="CHAR" notNull="true" primaryKey="true"/>
        <db:column name="VERSION" desc="VERSION番号"
            size="10" type="INT" notNull="true"/>
        <db:column name="user_id" desc="ユーザID"
            size="128" type="VARCHAR" notNull="true"/>
        <db:column name="password" desc="ログインパスワード"
            size="128" type="VARCHAR" notNull="true"/>
        <db:column name="user_name" desc="名前"
            size="128" type="VARCHAR" notNull="false"/>
        <db:column name="mail" desc="メールアドレス"
            size="128" type="VARCHAR" notNull="false"/>
        <db:column name="zip" desc="郵便番号"
            size="7" type="VARCHAR" notNull="false"/>
        <db:column name="address" desc="住所"
            size="256" type="VARCHAR" notNull="false"/>
        <db:column name="tel" desc="電話番号"
            size="11" type="VARCHAR" notNull="false"/>
        <db:column name="birthday" desc="誕生日"
            size="8" type="VARCHAR" notNull="false"/>
        <db:index name="user_id" desc="ユーザIDのユニークインデックス"
            column="user_id" unique="true"/>
    </db:table>

    <db:mapping name="userMap" table="m_user" key="ID" version="VERSION">
        <db:field column="user_id" as="user_id"/>
        <db:field column="password" as="password"/>
        <db:field column="user_name" as="user_name"/>
        <db:field column="mail" as="mail"/>
        <db:field column="zip" as="zip"/>
        <db:field column="address" as="address"/>
        <db:field column="tel" as="tel"/>
        <db:field column="birthday" as="birthday"/>
       
        <db:where>
            <db:and>
                <db:eq column="user_id" field="user_id"/>
                <db:eq column="user_name" field="user_name"/>
            </db:and>
        </db:where>
        
        <!-- ↑検索に使用するカラムを定義します -->
    </db:mapping>

</db:db>

リスト 3-2 db.xmlファイル

Eclipseでapp.xmlファイルを開き、以下の修正を行います。


    <w:menu name="menu" template="titlemenu">
    </w:menu>

    <w:panel name="mainPanel">

        <!-- ↓TOP画面に検索フォームを追加します -->
        <w:unit name="searchForm" initial="searchForm"/>

        <w:unit name="userList" initial="userList"/>
        <w:event command="insertUser">
            <w:changeWidget name="userForm" widget="userForm" mode="insert"/>
        </w:event>
        <w:event command="updateUser" parameter="/data">
            <w:changeWidget name="userForm" widget="userForm" mode="update"
                key="{ID=/data/id}"/>
        </w:event>
        <w:event command="deleteUser" parameter="/data">
            <w:changeWidget name="userForm" widget="userForm" mode="delete"
                key="{ID=/data/id}"/>
        </w:event>
        <w:event command="afterEditUser">
            <w:updateWidget name="userList"/>
            <w:deleteWidget name="userForm"/>
        </w:event>
        <w:event command="afterCancelUser">
            <w:deleteWidget name="userForm"/>
        </w:event>

        <w:event command="searchUser" parameter="/data">
            <w:changeWidget name="userList" widget="userList"
            condition="/data"/>
        </w:event>
        <!-- ↑検索フォームで検索ボタン押下時のイベント定義です。-->

    </w:panel>

    <w:form name="userForm">
        <w:dataSource dao="userMap"/>
        <w:field header="ユーザID" name="user_id"
            type="text" maxlength="128" size="40"/>
        <w:field header="パスワード" name="password"
            type="password" maxlength="128" size="40"/>
        <w:field header="名前" name="user_name"
            type="text" maxlength="128" size="40"/>
        <w:field header="メールアドレス" name="mail"
            type="text" maxlength="128" size="40"/>
        <w:field header="郵便番号" name="zip"
            type="text" maxlength="7" size="10"/>
        <w:field header="住所" name="address"
            type="textarea" col="40" row="5"/>
        <w:field header="電話番号" name="tel"
            type="text" maxlength="11" size="10"/>
        <w:field header="誕生日" name="birthday"
            type="text" maxlength="8" size="10"/>
        <w:commandBox name="edit">
            <w:insert type="button" text="追加"/>
            <w:update type="button" text="更新"/>
            <w:delete type="button" text="削除"/>
            <w:ok type="button" text="OK"/>
            <w:cancel type="button" text="キャンセル"/>
        </w:commandBox>
        <w:event command="afterInsert">
            <w:fireEvent command="afterEditUser"/>
        </w:event>
        <w:event command="afterUpdate">
            <w:fireEvent command="afterEditUser"/>
        </w:event>
        <w:event command="afterDelete">
            <w:fireEvent command="afterEditUser"/>
        </w:event>
        <w:event command="afterCancelInsert">
            <w:fireEvent command="afterCancelUser"/>
        </w:event>
        <w:event command="afterCancelUpdate">
            <w:fireEvent command="afterCancelUser"/>
        </w:event>
        <w:event command="afterCancelDelete">
            <w:fireEvent command="afterCancelUser"/>
        </w:event>
    </w:form>

    <w:list name="userList">
        <w:dataSource dao="userMap"/>
        <w:field header="ユーザID" name="user_id"/>
        <w:field header="名前" name="user_name"/>
        <w:field header="メールアドレス" name="mail"/>
        <w:fieldCommandBox name="edit">
            <w:command name="update" command="updateUser" type="button"
            text="更新"/>
            <w:command name="delete" command="deleteUser" type="button"
            text="削除"/>
        </w:fieldCommandBox>
        <w:command name="insert" command="insertUser" type="button"
            text="追加"/>
    </w:list>

    <w:form name="searchForm">
        <w:field header="ユーザID" name="user_id" type="text"
           maxlength="128" size="40"/>
        <w:field header="名前" name="user_name" type="text"
           maxlength="128" size="40"/>
        
        <w:command name="search" command="searchUser" type="button"
           text="検索"/>
		
        <!-- ↑検索ボタンの定義です -->
    </w:form>

</w:application>

リスト 3-3 app.xmlファイル(75行目付近から)

3. ブラウザで以下のURLにアクセスし、db.xml、app.xmlファイルの修正内容を反映します。
修正内容変更後、図 3-2の画面が表示されます。
http://localhost:8080/tutorial/?control=init

図 3-2

2.5. 処理フローの定義

INDEX

3.2.ログイン・ログアウト機能の追加