FrontPage > SAStrutsの覚書 > サンプルアプリ

検索画面

デフォルトでH2データーベースに登録されているEMPテーブルに
DEPTテーブルを結合して検索する。

  • 検索条件はEMP_NO,EMP_NAME,HIREDATE,DEPT_IDとする。
  • EMP_NAMEは前方一致、HIREDATEは範囲指定、DEPT_IDは選択リストから選択とする。

画面は以下のようになる。

sassample02.jpg

1. エンティティクラス、サービスクラス等を生成

  • プロジェクト上で右クリック→「H2」→「H2サーバーの開始」でデーターベースを起動する。
  • コマンドラインで、プロジェクトルートディレクトリに移動し以下のコマンドを実行する。
    ant -f s2jdbc-gen-build.xml gen-entity

2. エンティティクラスに関連を定義する。

Empクラスに対しDeptクラスを多対一関連として定義する。

Emp.javaに以下を追加する。

   @ManyToOne
   @JoinColumn(name="DEPT_ID", referencedColumnName="ID")	// 今回のパターンでは省略可
   public Dept dept;

参照先カラムが「主キー」、参照元カラムが「関連を定義したプロパティ名_参照先主キー」の場合は@JoinColumnアノテーションを省略できる。

Namesクラスを更新する。

  • s2jdbc-gen-build.xmlにターゲット「gen-names」を追加する。
     <target name="gen-names">
       <gen-names
         classpathdir="${classpathdir}"
         rootpackagename="${rootpackagename}"
         entitypackagename="${entitypackagename}"
         javafiledestdir="${javafiledestdir}"
         javafileencoding="${javafileencoding}"
         env="${env}"
         jdbcmanagername="${jdbcmanagername}"
         classpathref="classpath">
           <jvmarg value="${vmarg.encoding}"/>
       </gen-names>
       <gen-sqlfileconstants
         classpathDir="${classpathdir}"
         rootpackagename="${rootpackagename}"
         javafiledestdir="${javafiledestdir}"
         javafileencoding="${javafileencoding}"
         env="${env}"
         jdbcmanagername="${jdbcmanagername}"
         classpathref="classpath">
           <sqlfileset dir="${classpathdir}">
             <include name="${sqlfilepattern}" />
           </sqlfileset>
           <jvmarg value="${vmarg.encoding}"/>
       </gen-sqlfileconstants>
       <refresh projectName="sassample"/>
     </target>
  • コマンドラインで以下のコマンドを実行する。
    ant -f s2jdbc-gen-build.xml gen-names

3. 検索条件クラス作成

  • com.ziqoo.sassample.conditionパッケージにSearchEmpConditionクラスを作成。

    SearchEmpCondition.java
    package com.ziqoo.sassample.condition;
    
    import java.sql.Date;
    
    public class SearchEmpCondition {
    	/** 従業員番号 */
    	public Integer empNoCondition;
    	/** 従業員名 */
    	public String empNameCondition;
    	/** 雇用日最小日付 */
    	public Date hiredateMin;
    	/** 雇用日最大日付 */
    	public Date hiredateMax;
    
    	/** 部門ID */
    	public Integer deptIdCondition;
    }

4. サービスクラスに検索メソッドを追加

  • EmpServiceへfind()を追加。

    EmpService.java
    package com.ziqoo.sassample.service;
    
    import static com.ziqoo.sassample.entity.EmpNames.*;
    import static org.seasar.extension.jdbc.operation.Operations.*;
    
    import java.util.List;
    
    import javax.annotation.Generated;
    
    import com.ziqoo.sassample.condition.SearchEmpCondition;
    import com.ziqoo.sassample.entity.Emp;
    
    /**
    * {@link Emp}のサービスクラスです。
    *
    */
    public class EmpService extends AbstractService<Emp> {
    
       ・・・略
     
       public List<Emp> find(SearchEmpCondition condition) {
       	return select().innerJoin(dept())
       			.where(
       				eq(empNo(), condition.empNoCondition),
       				starts(empName(), condition.empNameCondition),
       				ge(hiredate(), condition.hiredateMin),
       				le(hiredate(), condition.hiredateMax),
       				eq(deptId(), condition.deptIdCondition))
       			.orderBy(asc(empName()))
       			.getResultList();
       }
    }
    上記でeq(),starts()等のメソッドはスタティックインポートされたOperationsのメソッド。
    dept(),empNo()等のメソッドはスタティックインポートされたEmpNamesのメソッドで、Empクラスのプロパティ名を返す。
    このメソッドは下記SQLと等価。ただしconditionsで値が設定されていないプロパティは検索条件として追加されない。
select * from EMP e join DEPT d on e.DEPT_ID = d.ID
where EMP_NO = empNo and EMP_NAME like 'empName%'
 and HIREDATE >= hiredateMin and HIREDATE <= hiredateMax
 and DEPT_ID = deptId
order by EMP_NAME

5. Actionフォーム作成

  • com.ziqoo.sassample.formパッケージにSearchEmpFormクラスを作成。

    SearchEmpForm.java
    package com.ziqoo.sassample.form;
    
    import java.util.List;
    
    import com.ziqoo.sassample.entity.Dept;
    import com.ziqoo.sassample.entity.Emp;
    
    public class SearchEmpForm {
    
    	/** 従業員番号 */
    	public String empNoCondition;
    	/** 従業員名 */
    	public String empNameCondition;
    	/** 雇用日最小日付 */
    	public String hiredateMin;
    	/** 雇用日最大日付 */
    	public String hiredateMax;
    
    	/** 部門ID */
    	public String deptIdCondition;
    
    	/** 部門選択リスト */
    	public List<Dept> deptList;
    
    	/** 従業員検索結果 */
    	public List<Emp> empList;
    }

6. Actionクラス作成

  • com.ziqoo.sassample.actionパッケージにSearchEmpActionクラスを作成。

    SearchEmpAction.java
    package com.ziqoo.sassample.action;
    
    import javax.annotation.Resource;
    
    import org.seasar.framework.beans.util.Beans;
    import org.seasar.struts.annotation.ActionForm;
    import org.seasar.struts.annotation.Execute;
    
    import com.ziqoo.sassample.condition.SearchEmpCondition;
    import com.ziqoo.sassample.form.SearchEmpForm;
    import com.ziqoo.sassample.service.DeptService;
    import com.ziqoo.sassample.service.EmpService;
    
    public class SearchEmpAction {
    
    	@Resource
    	protected DeptService deptService;
    	@Resource
    	protected EmpService empService;
    
    	@Resource
    	@ActionForm
    	protected SearchEmpForm searchEmpForm;
    
    	/**
    	 * 検索画面表示
    	 * @return
    	 */
    	@Execute(validator=false)
    	public String index() {
    		// 部門選択リスト作成
    		searchEmpForm.deptList = deptService.findAllOrderById();
    
    		return "searchEmp.jsp";
    	}
    
    	/**
    	 * 従業員検索
    	 * @return
    	 */
    	@Execute(validator=false)
    	public String search() {
    		// 部門選択リスト作成
    		searchEmpForm.deptList = deptService.findAllOrderById();
    
    		// 検索条件コピー
    		SearchEmpCondition condition = Beans.createAndCopy(SearchEmpCondition.class, searchEmpForm).execute();
    
    		// 従業員検索
    		searchEmpForm.empList = empService.find(condition);
    
    		return "searchEmp.jsp";
    	}
    }

7. jsp作成

  • Actionクラス内の"searchEmp.jsp"を選択し、[Ctrl]+8を押す。
    開いたsearchEmp.jspの内容を以下のように編集する。

    SearchEmpAction.java
    <%@page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="${f:url('/css/stylesheet.css')}">
    </head>
    <body>
    <tiles:insert template="/WEB-INF/view/common/layout.jsp" flush="true">
    <tiles:put name="content_menu" type="string">
    </tiles:put>
    <tiles:put name="content" type="string">
    <div class="content">
    	<s:form method="POST">
    		<table class="data">
    		<tr>
    			<th class="data">従業員番号</th>
    			<td class="data">
    				<html:text property="empNoCondition" size="10" maxlength="10"/></td>
    			<th class="data">従業員名</th>
    			<td class="data">
    				<html:text property="empNameCondition" size="20" maxlength="20"/></td>
    		</tr>
    		<tr>
    			<th class="data">雇用日</th>
    			<td class="data" colspan="3">
    				<html:text property="hiredateMin" size="10" maxlength="10"/> 〜
    				<html:text property="hiredateMax" size="10" maxlength="10"/>
    			</td>
    		</tr>
    		<tr>
    			<th class="data">部門名</th>
    			<td class="data" colspan="3">
    				<html:select property="deptIdCondition">
    					<option value=""></option>
    					<html:options collection="deptList" property="id" labelProperty="deptName"/>
    				</html:select>
    			</td>
    		</tr>
    		</table>
    
    		<s:submit property="search" value="検索"/>
    		<br><br>
    		<table class="data">
    			<tr>
    			<th class="data">従業員番号</th>
    			<th class="data">従業員名</th>
    			<th class="data">雇用日</th>
    			<th class="data">部門名</th>
    			</tr>
    			<c:forEach var="emp" items="${empList}">
    				<tr>
    					<td class="data">${emp.empNo}</td>
    					<td class="data">${f:h(emp.empName)}</td>
    					<td class="data">
    						<fmt:formatDate value="${emp.hireDate}" pattern="yyyy/MM/dd"/></td>
    					<td class="data">${emp.dept.deptName}</td>
    				</tr>
    			</c:forEach>
    		</table>
    	</s:form>
    </div>
    </tiles:put>
    </tiles:insert>
    </body>
    </html>
  • src/main/webapp/css/stylesheet.cssに下記スタイルを追加。

    stylesheet.css
    DIV.content {
    	margin: 0px;
    	padding: 0px;
    }
    TABLE.data {
    	margin: 5px;
    	border-collapse: collapse;
    	background-color: white;
    	table-layout: fixed;
    }
    TH.data {
    	background-color: navy;
    	color: white;
    	border: 1px solid black;
    	padding: 3px;
    }
    TD.data {
    	border: 1px solid black;
    	padding: 3px;
    }

8. メニュー編集

  • src/main/webapp/view/common/menu.jspを下記のように編集する。

    menu.jsp
    <table class="menu">
    <tr>
    	<td class="menu"><s:link href="/searchEmp">従業員検索</s:link></td>
    </tr>
    </table>

添付ファイル: filesassample02.jpg 432件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-01-11 (水) 23:59:11 (2525d)