概要

Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その４ )( HTMLファイル作成２ ) の続きです。

今回の手順で確認できるのは以下の内容です。
- Controller クラスの作成、Thymeleaf テンプレートファイルの作成 ( この時点でひと通り画面遷移が見られるようにします )
１画面作成する毎にコミットして、最後に GitHub へ Pull する時に commit を１つにマージしてから送信してみます。

ソフトウェア一覧

参考にしたサイト

文字実体参照・数値文字参照
 https://w3g.jp/others/data/letters

手順

画面毎の URL の決定

各画面の URL は以下のようにします。

画面	アクション	URL
共通	「検索/一覧」メニュークリック	/countryList
	「登録」メニュークリック	/country/input
	「ログアウト」メニュークリック	/logout
ログイン画面	初期表示	/
	「ログイン」ボタンクリック	/login
検索/一覧画面	初期表示	/countryList
	「検索」ボタンクリック	/countryList
登録画面(入力)	初期表示	/country/input
	「確認」ボタンクリック	/country/confirm
登録画面(確認)	初期表示	/country/confirm
	「登録」ボタンクリック	/country/update
	「戻る」ボタンクリック	/country/input
登録画面(完了)	初期表示	/country/complete
	「次のデータを登録する」ボタンクリック	/country/input
	「検索/一覧画面へ」ボタンクリック	/countryList

検索/一覧画面は /country/list でもよいかもしれないと思いましたが、今回は検索/一覧画面と登録画面を分けることにしたので、別々のURLにします。

今回の作業用 branch の作成

IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択します。
「VCS Operations」メニューが表示されます。「Branches...」メニューを選択します。
「Git Branches」メニューが表示されます。「New Branch」メニューを選択します。
「Create New Branch」ダイアログが表示されます。"1.0.x-makecontroller" を入力して「OK」ボタンをクリックします。

ログイン画面の Controller クラス、Thymeleaf テンプレートファイルの作成

src/main/java/ksbysample/webapp/basic/web の下に LoginController.java を作成します。作成後、リンク先の内容に変更します。
src/main/resources/templates の下に login.html を作成します。作成後、/static/login.html の内容をまるごとコピー＆ペーストします。ペーストはメイン画面のメニューの「Edit」->「Paste Simple」で行います ( 通常の Paste だとフォーマットが崩れるためです )。
login.html の内容の一部をリンク先の内容に変更します。
作成した HTML の内容を確認します。Gradle tasks View から bootRun を実行します。
ブラウザで http://localhost:8080/ にアクセスしてログイン画面が表示されることを確認します。確認後、Ctrl+F2 を押して Tomcat を停止します。
Test クラスを作成します。LoginController.java のエディタで、クラス名にカーソルを移動した後、Alt+Enter を押してメニューを表示し、「Create Test」メニューを選択します。
「Create Test」ダイアログが表示されますので、index():String をチェックした後「OK」ボタンをクリックします。
src/test/java/ksbysample/webapp/basic/web の下に LoginControllerTest.java が新規作成されエディタで開かれますので、リンク先の内容に変更します。
Project View の一番上の階層の ksbysample-webapp-basic を選択した後コンテキストメニューを表示し「Run 'Tests in 'ksbysample...' with Coverage」を選択してテストを実行しますが、現在の設定では IntelliJ IDEA coverage runner の JVM に -Dspring.profiles.active=develop の設定が渡されていないためエラーになります。
IntelliJ IDEA coverage runner 実行時に JVM に -Dspring.profiles.active=develop の設定が渡されるようにします。メイン画面のメニューから「Run」->「Edit Configurations...」を選択します。
「Run/Debug Configurations」ダイアログが表示されます。画面左側の一覧から「Defaults」->「JUnit」を選択します。
画面右側に JUnit の設定画面が表示されますので、「VM options」の設定を -ea -Dspring.profiles.active=develop に変更した後「OK」ボタンをクリックします。
再度 Project View の一番上の階層の ksbysample-webapp-basic を選択した後コンテキストメニューを表示し「Run 'Tests in 'ksbysample...' with Coverage」を選択してテストを実行すると、Run View に All Tests Passed のメッセージが表示されます。
Gradle tasks View から build タスクを実行し、BUILD SUCCESSFUL が表示されることも確認します。
commit します。メイン画面のメニューから「VCS」->「Commit Changes...」を選択します。
「Commit Changes」ダイアログが表示されます。Commit Message を入力後、「Commit」ボタンのドロップダウンメニューから「Commit」を選択します。
「Code Analysis」ダイアログが表示されますので、「Review」ボタンをクリックします。
画面下部に Messages Code Analysis View が表示され、問題のある箇所が表示されますので、ダブルクリックします。
LoginController.java が開き問題のある箇所の左側が赤色になっています。該当箇所にマウスカーソルを置くと電球アイコンが表示されますので、それをクリックしてメニューを表示します。今回の場合 Code Analysis の対象外にしたいので、メニューから「Suppress for classes annotated by 'org.springframework.stereotype.Controller'」を選択します。
再度メイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択して「VCS Operations」メニューを表示し「Commit Changes...」を選択します。
「Commit Changes」ダイアログが表示されますので、「Commit」ボタンのドロップダウンメニューから「Commit」を選択します。
今度は「Code Analysis」ダイアログは表示されずに commit が完了します。

検索/一覧画面の Controller クラス、Thymeleaf テンプレートファイルの作成

src/main/java/ksbysample/webapp/basic/web の下に CountryListController.java を作成します。作成後、リンク先の内容に変更します。
src/main/resources/templates の下に countryList.html を作成します。作成後、/static/countrylist.html の内容をまるごとコピー＆ペーストします。
countryList.html の内容の一部をリンク先のその１の内容に変更します。
作成した HTML の内容を確認します。Gradle tasks View から bootRun を実行します。
ブラウザで http://localhost:8080/countryList にアクセスして検索/一覧画面が表示されることを確認します。確認後、Ctrl+F2 を押して Tomcat を停止します。
Test クラスを作成します。CountryListController.java のエディタで、クラス名にカーソルを移動した後、Alt+Enter を押してメニューを表示し、「Create Test」メニューを選択します。
「Create Test」ダイアログが表示されますので、index():String をチェックした後「OK」ボタンをクリックします。
src/test/java/ksbysample/webapp/basic/web の下に CountryListControllerTest.java が新規作成されエディタで開かれますので、リンク先の内容に変更します。
Project View の一番上の階層の ksbysample-webapp-basic を選択した後コンテキストメニューを表示し「Run 'Tests in 'ksbysample...' with Coverage」を選択してテストを実行しますが、org.xml.sax.SAXParseException; lineNumber: 113; columnNumber: 40; エンティティ"laquo"が参照されていますが、宣言されていません。 というエラーメッセージが表示されてエラーになります。

原因は基本仕様にない実体参照は使えないからのようです。«→«へ、»→» ヘ修正して再度テストを実行し、Run View に All Tests Passed のメッセージが表示されることを確認します。
Gradle tasks View から build タスクを実行し、BUILD SUCCESSFUL が表示されることも確認します。
commit します。メイン画面のメニューから「VCS」->「Commit Changes...」を選択します。
「Commit Changes」ダイアログが表示されます。Commit Message を入力後、「Commit」ボタンのドロップダウンメニューから「Commit」を選択します。

登録画面の Controller クラス、Thymeleaf テンプレートファイルの作成

src/main/java/ksbysample/webapp/basic/web の下に CountryController.java を作成します。作成後、リンク先の内容に変更します。
src/main/resources/templates の下に country ディレクトリを作成します。
src/main/resources/templates/country の下に input.html を作成します。作成後、/static/countryInput.html の内容をまるごとコピー＆ペーストします。
input.html の内容の一部をリンク先のその１～３の内容に変更します。
src/main/resources/templates/country の下に confirm.html を作成します。作成後、/static/countryConfirm.html の内容をまるごとコピー＆ペーストします。
confirm.html の内容の一部をリンク先のその１～３の内容に変更します。
src/main/resources/templates/country の下に complete.html を作成します。作成後、/static/countryComplete.html の内容をまるごとコピー＆ペーストします。
complete.html の内容の一部をリンク先のその１～２の内容に変更します。
作成した HTML の内容を確認します。Gradle tasks View から bootRun を実行します。ブラウザで http://localhost:8080/country/input にアクセスしてから各種ボタンをクリックし、登録画面 ( 入力→確認→完了 ) が表示されることを確認します。確認後、Ctrl+F2 を押して Tomcat を停止します。
Test クラスを作成します。CountryController.java のエディタで、クラス名にカーソルを移動した後、Alt+Enter を押してメニューを表示し、「Create Test」メニューを選択します。
「Create Test」ダイアログが表示されますので、Member に表示されるメソッドを全てチェックした後「OK」ボタンをクリックします。
src/test/java/ksbysample/webapp/basic/web の下に CountryControllerTest.java が新規作成されエディタで開かれますので、リンク先の内容に変更します。
Project View の一番上の階層の ksbysample-webapp-basic を選択した後コンテキストメニューを表示し「Run 'Tests in 'ksbysample...' with Coverage」を選択してテストを実行し、Run View に All Tests Passed のメッセージが表示されることを確認します。
Gradle tasks View から build タスクを実行し、BUILD SUCCESSFUL が表示されることも確認します。
commit します。メイン画面のメニューから「VCS」->「Commit Changes...」を選択します。
「Commit Changes」ダイアログが表示されます。Commit Message を入力後、「Commit」ボタンのドロップダウンメニューから「Commit」を選択します。

Thymeleaf テンプレートファイルのヘッダの共通化

HTMLの共通部分を別ファイルに切り出します。

src/main/resources/templates の下に common ディレクトリを作成します。
src/main/resources/templates/common の下に header.html を作成し、リンク先のその１の内容に変更します。
src/main/resources/templates の下の countryList.html の body タグの直下にある <nav class="navvar navbar-inverse navbar-fixed-top" role="navigation">～</nav> をリンク先のその２の内容に変更します。
画面の表示内容を確認します。Gradle tasks View から bootRun を実行して、ブラウザで http://localhost:8080/countryList にアクセスします。以下の画像のようにヘッダが表示され、かつ「検索/一覧」の文字がハイライトで表示されていることが確認できます。Tomcat はこのまま起動しておきます。
src/main/resources/templates/country の下の input.html, confirm.html, complete.html の body タグの直下にある <nav class="navvar navbar-inverse navbar-fixed-top" role="navigation">～</nav> をリンク先の内容に変更します。
画面の表示内容を確認します。ブラウザで http://localhost:8080/country/input にアクセスします。以下の画像のようにヘッダが表示され、かつ「登録」の文字がハイライトで表示されていることが確認できます。確認後、Ctrl+F2 を押して Tomcat を停止します。
commit します。メイン画面のメニューから「VCS」->「Commit Changes...」を選択します。
「Commit Changes」ダイアログが表示されます。Commit Message を入力後、「Commit」ボタンのドロップダウンメニューから「Commit」を選択します。
「Code Analysis」ダイアログが表示されますので、「Review」ボタンをクリックします。
画面下部に Messages Code Analysis View が表示され、問題のある箇所が表示されますので、ダブルクリックします。
th の Namespace の宣言がなくてエラーになっているので、HTMLを修正します。まずは header.html をリンク先のその２の内容に変更します。
次に http://www.thymeleaf.org の上にカーソルを移動した後 Alt+Enter を押下してメニューを表示した後、「Ignore External Resource」を選択します。
登録されている場所を確認します。メイン画面のメニューから「File」->「Settings...」を選択します。
「Settings」ダイアログが表示されます。画面左側の「Languages & Frameworks」->「Schemes and DTDs」を選択すると、画面右側の「Ignored Schemes and DTDs」に登録された内容が表示されています。「OK」ボタンをクリックしてダイアログを閉じます。
再度 commit します。メイン画面のメニューから「VCS」->「Commit Changes...」を選択して「Commit Changes」ダイアログが表示し、「Commit」ボタンのドロップダウンメニューから「Commit」を選択します。
「Code Analysis」ダイアログが表示されますので「Review」ボタンをクリックします。今度は画面下部の Messages Code Analysis View の header.html に表示されたいた Namespace 'th' is not bound のエラーが消えています。Messages Code Analysis View に表示されている他の htmlファイルもリンク先のその２の内容に変更します。
画面下部の Messages Code Analysis View には Attribute th:... is not allowed here という Warning が表示されていますので、次にこれを解消します。まずこの Warning をダブルクリックしてソースの該当箇所に移動します。
移動すると電球のアイコンが表示されていますので、クリックしてメニューを表示後「Add th:... to custom html attributes」を選択します。これを Warning が出ている attribute の種類分実行します。
再度 commit します。メイン画面のメニューから「VCS」->「Commit Changes...」を選択して「Commit Changes」ダイアログが表示し、「Commit」ボタンのドロップダウンメニューから「Commit」を選択します。今度は commit が正常に完了します。
ここまでで Project のディレクトリ・ファイルは以下の構成になっています。

GitHub への push

複数 commit しているので１つにまとめて、commit メッセージも修正してから push します。commit を１つにまとめて commit メッセージを修正する作業はコマンドプロンプトから git コマンドを直接実行して行います ( IntelliJ IDEA の Terminal では日本語がうまく表示されなかったためコマンドプロンプトで実行しました )。

まず４回の commit を１つにまとめます。コマンドプロンプトを起動し、以下のコマンドを実行します。

> cd /d C:\project-springboot\ksbysample-webapp-basic
> git rebase -i HEAD~4
以下の内容が表示されます。ここから先は vim の操作と同じです。
最初の行のみ pick のままとし、残りの３行の pick → fixup に変更します。
保存＆終了します。以下の画像のような内容が出力されて commit が１つにまとめられます。
次に commit メッセージを修正します。コマンドプロンプトで以下のコマンドを実行します。

> git commit --amend
以下の内容が表示されます。
commit メッセージを変更します。
保存＆終了します。以下の画像のような内容が出力されます。
IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択して「VCS Operations」メニューを表示した後、「Push...」を選択します。
「Push Commits」ダイアログが表示されます。commit が１つにまとまっていることが確認できます。「Push」ボタンをクリックして GitHub にアップロードします。

GitHub で Pull Request を送信、1.0.x_makecontroller → 1.0.x へ merge

https://github.com/ksby/ksbysample-webapp-basic にアクセスします。
画面上部に以下の画像と同じ内容が表示されていますので、「Compare & pull request」ボタンをクリックします。
pull request の作成画面が表示されますので、左上の base の branch を 1.0.x に変更し、comment を入力した後、「Create pull request」ボタンをクリックします。
今回は GitHub 上で merge します。https://github.com/ksby/ksbysample-webapp-basic/pulls にアクセスします。登録した pull request が表示されていますのでクリックします。
pull request の画面が表示されますので「Files changed」タブからソースの内容を確認した後、「Merge pull request」ボタンをクリックします。
以下の画面が表示されますので、「Confirm merge」ボタンをクリックします。
以下の画面が表示されますので、「Delete branch」ボタンをクリックします。

IntellIJ IDEA で 1.0.x branch へ変更＆Pull、1.0.x-makecontroller branch の削除

IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択して「VCS Operations」メニューを表示した後、「Branches...」を選択します。
「Git Branches」メニューが表示されます。「1.0.x -> origin/1.0.x」->「Checkout」を選択して branch を 1.0.x に切り替えます。
IntelliJ IDEA のメイン画面のメニューから「VCS」->「Update Project...」を選択します。
「Update Project」ダイアログが表示されますので、「OK」ボタンをクリックします。GitHub 上で merge したファイルがダウンロードされます。
IntelliJ IDEA のメイン画面のメニューから「VCS」->「VCS Operations Popup...」を選択して「VCS Operations」メニューを表示した後、「Branches...」を選択します。「Git Branches」メニューが表示されたら、「1.0.x-makecontroller」->「Delete」を選択してローカルの 1.0.x-makecontroller branch を削除します。

ソースコード

LoginController.java

package ksbysample.webapp.basic.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class LoginController {

    @RequestMapping("/")
    public String index() {
        return "login";
    }

}

login.html

                <form role="form" action="/countryList" method="post" id="login-form" autocomplete="off">

action の URL を /countryList に変更します。

LoginControllerTest.java

package ksbysample.webapp.basic.web;

import ksbysample.webapp.basic.Application;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.SpringApplicationConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;

import static org.hamcrest.Matchers.containsString;
import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;

@RunWith(SpringJUnit4ClassRunner.class)
@SpringApplicationConfiguration(classes = Application.class)
@WebAppConfiguration
public class LoginControllerTest {

    @Autowired
    private WebApplicationContext context;

    private MockMvc mvc;

    @Before
    public void setUp() {
        this.mvc = MockMvcBuilders.webAppContextSetup(this.context).build();
    }

    @Test
    public void testIndex() throws Exception {
        this.mvc.perform(get("/")).andExpect(status().isOk())
                .andExpect(content().contentType("text/html;charset=UTF-8"))
                .andExpect(view().name("login"));
    }

}

CountryListController.java

package ksbysample.webapp.basic.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/countryList")
public class CountryListController {

    @RequestMapping
    public String index() {
        return "countryList";
    }
    
}

countryList.html

■その１

        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="panel-title">検索条件</div>
            </div>
            <div class="panel-body">
                <form method="post" action="/countryList" class="form-horizontal">

action の URL を /countryList に変更します。

■その２

    <div id="header" th:include="common/header :: header (active='countryList')"></div>

CountryListControllerTest.java

package ksbysample.webapp.basic.web;

import ksbysample.webapp.basic.Application;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.SpringApplicationConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;

import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;

@RunWith(SpringJUnit4ClassRunner.class)
@SpringApplicationConfiguration(classes = Application.class)
@WebAppConfiguration
public class CountryListControllerTest {

    @Autowired
    private WebApplicationContext context;

    private MockMvc mvc;

    @Before
    public void setUp() {
        this.mvc = MockMvcBuilders.webAppContextSetup(this.context).build();
    }

    @Test
    public void testIndex() throws Exception {
        this.mvc.perform(get("/countryList")).andExpect(status().isOk())
                .andExpect(content().contentType("text/html;charset=UTF-8"))
                .andExpect(view().name("countryList"))
                .andExpect(xpath("/html/head/title").string("検索/一覧画面"));
    }

}

CountryController.java

package ksbysample.webapp.basic.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/country")
public class CountryController {

    @RequestMapping("/input")
    public String input() {
        return "country/input";
    }

    @RequestMapping("/confirm")
    public String confirm() {
        return "country/confirm";
    }

    @RequestMapping("/update")
    public String update() {
        return "redirect:/country/complete";
    }

    @RequestMapping("/complete")
    public String complete() {
        return "country/complete";
    }

}

input.html

■その１

                <form id="countryForm" method="post" action="/country/confirm" class="form-horizontal">

id="countryForm" を追加し、action の URL を /country/confirm に変更します。

■その２

                        <button type="button" id="js-confirm" value="confirm" class="btn btn-primary">確認</button>

id="js-confirm" を追加します。

■その３

    <script type="text/javascript">
    <!--
    $(document).ready(function() {
        $('#code').focus();

        $('#js-confirm').bind('click', function(){
            $('#countryForm').submit();
        });
    });
    -->
    </script>

$('#js-confirm').bind('click', ... の処理を追加します。

confirm.html

■その１

                <form id="countryForm" method="post" action="/country/update" class="form-horizontal">

id="countryForm" を追加し、action の URL を /country/update に変更します。

■その２

                        <button type="button" id="js-update" value="update" class="btn btn-primary">登録</button>
                        <button type="button" id="js-back" value="back" class="btn btn-default">戻る</button>

id="js-update"、id="js-back" を追加します。

■その３

    <script type="text/javascript">
    <!--
    $(document).ready(function() {
        $('#js-update').bind('click', function(){
            $('#countryForm').submit();
        });

        $('#js-back').bind('click', function(){
           $('#countryForm').attr('action', '/country/input');
            $('#countryForm').submit();
        });
    });
    -->
    </script>

$(document).ready(function() { ... の処理を追加します。

complete.html

■その１

                <button type="button" id="js-input" value="input" class="btn btn-primary">次のデータを登録する</button>
                <button type="button" id="js-toCountryList" value="toCountryList" class="btn btn-default">検索/一覧画面へ</button>

id="js-input"、id="js-toCountryList" を追加します。

■その２

    <script type="text/javascript">
    <!--
    $(document).ready(function() {
        $('#js-input').bind('click', function(){
            location.href = '/country/input';
        });

        $('#js-toCountryList').bind('click', function(){
            location.href = '/countryList';
        });
    });
    -->
    </script>

$(document).ready(function() { ... の処理を追加します。

CountryControllerTest.java

package ksbysample.webapp.basic.web;

import ksbysample.webapp.basic.Application;
import org.junit.Before;
import org.junit.Test;
import org.junit.runner.RunWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.SpringApplicationConfiguration;
import org.springframework.test.context.junit4.SpringJUnit4ClassRunner;
import org.springframework.test.context.web.WebAppConfiguration;
import org.springframework.test.web.servlet.MockMvc;
import org.springframework.test.web.servlet.setup.MockMvcBuilders;
import org.springframework.web.context.WebApplicationContext;

import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;

@RunWith(SpringJUnit4ClassRunner.class)
@SpringApplicationConfiguration(classes = Application.class)
@WebAppConfiguration
public class CountryControllerTest {

    @Autowired
    private WebApplicationContext context;

    private MockMvc mvc;

    @Before
    public void setUp() {
        this.mvc = MockMvcBuilders.webAppContextSetup(this.context).build();
    }

    @Test
    public void testInput() throws Exception {
        this.mvc.perform(get("/country/input")).andExpect(status().isOk())
                .andExpect(content().contentType("text/html;charset=UTF-8"))
                .andExpect(view().name("country/input"))
                .andExpect(xpath("/html/head/title").string("Countryデータ登録画面(入力)"));
    }

    @Test
    public void testConfirm() throws Exception {
        this.mvc.perform(get("/country/confirm")).andExpect(status().isOk())
                .andExpect(content().contentType("text/html;charset=UTF-8"))
                .andExpect(view().name("country/confirm"))
                .andExpect(xpath("/html/head/title").string("Countryデータ登録画面(確認)"));
    }

    @Test
    public void testUpdate() throws Exception {
        this.mvc.perform(get("/country/update")).andExpect(status().isFound())
                .andExpect(redirectedUrl("/country/complete"));
    }

    @Test
    public void testComplete() throws Exception {
        this.mvc.perform(get("/country/complete")).andExpect(status().isOk())
                .andExpect(content().contentType("text/html;charset=UTF-8"))
                .andExpect(view().name("country/complete"))
                .andExpect(xpath("/html/head/title").string("Countryデータ登録画面(完了)"));
    }

}

header.html

■その１

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <title>ヘッダー</title>

    <!-- Bootstrap core CSS -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="/js/html5shiv.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <style>
    <!--
    body {
        padding-top: 50px;
    }
    .navbar-brand {
        font-size: 24px;
    }
    .form-group {
        margin-bottom: 5px;
    }
    -->
    </style>
</head>

<body>

    <div th:fragment="header (active)">
        <nav class="navvar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">ナビゲーションボタン</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <div class="navbar-brand">WebApp - Basic</div>
                </div>
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav  navbar-left">
                        <li th:class="${active == 'countryList'} ? 'active'"><a href="/countryList"><span class="glyphicon glyphicon-search"></span>　検索/一覧</a></li>
                        <li th:class="${active == 'countryInput'} ? 'active'"><a href="/country/input"><span class="glyphicon glyphicon-pencil"></span>　登録</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/logout"><span class="glyphicon glyphicon-log-out"></span>　ログアウト</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

</body>
</html>

■その２

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

先頭の２行 <!DOCTYPE html>、<html lang="ja"> を上記の内容に変更します。

input/confirm/complete.html

    <div id="header" th:include="common/header :: header (active='countryInput')"></div>

履歴

2015/01/15
初版発行。
2015/01/18
th:include="/common/header→th:include="common/headerへ修正(jarファイルにした時にエラーが出たため)。

かんがるーさんの日記

最近自分が興味をもったものを調べた時の手順等を書いています。今は Spring Boot をいじっています。

Spring Boot でログイン画面 + 一覧画面 + 登録画面の Webアプリケーションを作る ( その５ )( Controllerクラス＋Thymeleafテンプレートファイル作成 )

概要

ソフトウェア一覧

参考にしたサイト

手順

画面毎の URL の決定

今回の作業用 branch の作成

ログイン画面の Controller クラス、Thymeleaf テンプレートファイルの作成

検索/一覧画面の Controller クラス、Thymeleaf テンプレートファイルの作成

登録画面の Controller クラス、Thymeleaf テンプレートファイルの作成

Thymeleaf テンプレートファイルのヘッダの共通化

GitHub への push

GitHub で Pull Request を送信、1.0.x_makecontroller → 1.0.x へ merge

IntellIJ IDEA で 1.0.x branch へ変更＆Pull、1.0.x-makecontroller branch の削除

ソースコード

LoginController.java

login.html

LoginControllerTest.java

CountryListController.java

countryList.html

CountryListControllerTest.java

CountryController.java

input.html

confirm.html

complete.html

CountryControllerTest.java

header.html

input/confirm/complete.html

履歴