ITエンジニアぽむの備忘録

IT系で気になったことを書き留めておく備忘録です。仕事でよく使っているJavaと自宅で使っているLinuxについて書いていこうと思っています。同じお悩みをお持ちの方のお役に立てたら嬉しいです。

新規登録と編集登録を1画面でできる画面を作ってみよう!

こんにちは、ぽむです!

今回はjqueryを駆使した新規登録画面とStruts2での画面遷移を紹介したいと思います。

はじめに

テーブルのデータをリスト表示した画面に新規ボタンを追加し、新規登録画面に遷移するまでの流れを見て行きたいと思います。

テーブルのデータを画面上に表示するプログラムについては下記サイトで書いているので、よかったら参考にして下さいね。

pom2019.hatenablog.com

javascriptの処理を簡素化するために、本プログラムはjQueryCDNを使っています。

CDNとは、Content Delivery Networkの略で、プログラム本体をダウンロードせずにネットワーク上のプログラムを読みにいくことです。

jQueryCDNについては、jQuery本家よりGoogleCDNの方がアクセスし易いみたいなので、今回はGoogleCDNを使用します。GoogleCDNについてはリンクを載せておくので参考にしてみて下さいね。

developers.google.com

編集ボタンと削除ボタンは、今回使用しません。ご注意下さい。

開発環境

開発環境は下記の通りです。

画面の作成

新規ボタンの追加

  1. ボタンの設置
    ボタンタグを入力して、新規ボタンを設定してあげます。(20行目)
  2. 新規ボタンのアクション追加
    新規ボタンを押した際のアクション設定を追加してあげます。ここでは、「/dispModify」アクションを呼び出しています。(42-45行目)
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <title>家電リスト</title>
        <style>
    table {
        border-collapse: collapse;
    }
    td {
        border: 1px solid gray;
        padding: 3px 8px;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h2>家電リスト</h2>

<p>
    <button id="btnNew">新規</button>
</p>

<table>
    <tr>
        <td>id</td>
        <td>家電名</td>
        <td>購入日時</td>
        <td colspan="2">アクション</td>
    </tr>
    <s:iterator value="list">
        <tr>
            <td><s:property value="id"/></td>
            <td><s:property value="householdAppliancesName"/></td>
            <td><s:date name="purchaseDate" format="yyyy/MM/dd"/></td>
            <td><button id="btnEdit">編集</button></td>
            <td><button id="btnDelete">削除</button></td>
        </tr>
    </s:iterator> 
</table>

<script>
   $(function() {
       //新規ボタン
       $('#btnNew').on('click', function() {
           //クエリ文字列で新規登録フラグを立てます
           location.href = "${pageContext.request.contextPath}/dispModify?isNew=true";
       });
   });
</script>
</body>
</html>

新規登録画面の作成

  1. 登録用テーブルの作成
    id、家電名、購入日時を入力できるテーブルを作成します。idは自動採番なので入力できません。(32-51行目)
  2. 新規登録フラグで分岐
    新規登録フラグが立っているかどうかで表示を切り替えます。(36-41行目)
  3. 日付ピッカーの設置
    jQuery UIを使い、日付の入力間違いを防止します。
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html>
<head>
    <title>家電情報の登録</title>
    <style>
    table {
        border-collapse: collapse;
    }
    td {
        border: 1px solid gray;
        padding: 3px 8px;
    }
    .grayStyle {
        background: lightgray;
    }
    </style>
    <%-- jQuery --%>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <%-- jQuery UI --%>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <%-- jQuery UI(日本語ライブラリ) --%>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>
</head>
<body>
<h2>家電情報の登録</h2>

<p>
    <button id="btnBack">戻る</button>
    <button id="btnSave">保存</button>
</p>

<table>
    <tr>
        <td>id</td>
        <td id="id" class="grayStyle">
            <s:if test='"true".equals(isNew)'>
                idは自動採番されます。
            </s:if>
            <s:else>
                <s:property value="id"/>
            </s:else>
        </td>
    <tr>
        <td>家電名</td>
        <td><input id="householdAppliancesName" type="text" value="<s:property value='householdAppliancesName'/>"/></td>
    </tr>
    <tr>
        <td>購入日時</td>
        <td><input id="purchaseDate" type="text" value="<s:date name='purchaseDate' format='yyyy/MM/dd'/>" readonly="readonly"/></td>
    </tr>
</table>

<script>
   $(function() {
       //日付ピッカーの設定
       $('#purchaseDate').datepicker({
           dateFormat: 'yy/mm/dd',
           changeYear: true,
           changeMonth: true
       });
       
       //戻るボタン
       $('#btnBack').on('click', function() {
           history.back();
       });
   });
</script>
</body>
</html>

ロジックの作成

モデルの追加

「isNew」を新規登録フラグとして使用するため、モデルに追加してあげます。

package com.pom2019.Struts2Web.model;

import java.util.List;

import com.pom2019.Struts2Web.entities.HouseholdAppliances;

public class IndexModel {
    private List<HouseholdAppliances> list;
    //新規登録フラグ
    private String isNew;

    //ゲッター、セッター
    public List<HouseholdAppliances> getList() {
        return list;
    }
    public void setList(List<HouseholdAppliances> list) {
        this.list = list;
    }
    public String getIsNew() {
        return isNew;
    }
    public void setIsNew(String isNew) {
        this.isNew = isNew;
    }
}

アクションの追加

登録画面に遷移するアクションを追加します。

   @Action(value = "dispModify", results = {
            @Result(name = "success", location = "/WEB-INF/content/displayModify.jsp")
    })
    public String dispModify() {
        return ActionSupport.SUCCESS;
    }

実行結果

家電リスト画面を表示します。

f:id:pom2019:20190907163302p:plain

新規ボタンをクリックして、新規登録画面を表示します。

f:id:pom2019:20190907163337p:plain

日付ピッカーも表示できています。 f:id:pom2019:20190907163359p:plain

おわりに

フレームワークが間を取り持つ細かな処理を受け持ってくれているので、画面作成と簡単なアクションを書けば、簡単に実装することができます。

最後までお読み頂きありがとうございました。