6月18日

投稿者: | 2020年6月18日
0件のコメント

入力フォームにテキストエリアを追加する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム2</title>
</head>
<body>
<h1>入力フォーム2</h1>
<p th:text="${msg}"></p>
<p th:if="${check}" th:text="'trueが選択されています'"></p>
<p th:unless="${check}" th:text="'falseが選択されています'"></p>
<form method="post" action="/form2">
  <div>
    <input type="checkbox" name="check" id="check" />
    <label for="check">チェックしてください</label>
  </div>
  <div>
    <input type="radio" name="age" value="10〜19" id="age1" />
    <label for="age1">10〜19歳</label>
    <br />
    <input type="radio" name="age" value="20〜29" id="age2" />
    <label for="age2">20〜29歳</label>
    <br />
    <input type="radio" name="age" value="30〜39" id="age3" />
    <label for="age3">30〜39歳</label>
    <br />
    <input type="radio" name="age" value="40〜49" id="age4" />
    <label for="age4">40〜49歳</label>
    <br />
    <input type="radio" name="age" value="50〜59" id="age5" />
    <label for="age5">50〜59歳</label>
    <br />
    <input type="radio" name="age" value="60〜" id="age6" />
    <label for="age6">60歳〜</label>
  </div>
  <div>
    <select id="select" name="os">
      <option value="Windows">Windows</option>
      <option value="MacOS">MacOS</option>
      <option value="Linux">Linux</option>
    </select>
  </div>
  <div>
    <textarea name="longtext" rows="5" cols="40"></textarea>
  </div>
  <div>
    <input type="submit" value="送信" />
  </div>
</form>
</body>
</html>

サーバー側でテキストエリアの文字列を受け取るようにする。

	@RequestMapping(value = "/form2", method = RequestMethod.POST)
	public ModelAndView post2(
			@RequestParam(value="check", required=false) boolean check,
			@RequestParam(value="age", required=false) String age,
			@RequestParam("os") String os,
			@RequestParam("longtext") String longtext,
			ModelAndView mav) {
		String msg = "check=" + check + ", age=" + age + ", os=" + os + ", longtext=" + longtext;
		mav.addObject("msg", msg);
		mav.addObject("check", check);
		mav.setViewName("form2");
		return mav;
	}

改行コード付きでlongtextの内容を表示する。

	@RequestMapping(value = "/form2", method = RequestMethod.POST)
	public ModelAndView post2(
			@RequestParam(value="check", required=false) boolean check,
			@RequestParam(value="age", required=false) String age,
			@RequestParam("os") String os,
			@RequestParam("longtext") String longtext,
			ModelAndView mav) {
		String msg = "check=" + check + ", age=" + age + ", os=" + os + ", longtext=" + longtext;
		mav.addObject("msg", msg);
		mav.addObject("check", check);
		mav.addObject("longtext", longtext);
		mav.setViewName("form2");
		return mav;
	}

HTML側では、textareaタグまたはpreタグを使えば、改行コード付きで表示できる。
textareaでは編集できてしまうので、disabled属性をつけて編集不能にしておく。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム2</title>
</head>
<body>
<h1>入力フォーム2</h1>
<p th:text="${msg}"></p>
<textarea th:text="${longtext}" disabled></textarea>
<pre th:text="${longtext}"></pre>
<p th:if="${check}" th:text="'trueが選択されています'"></p>
<p th:unless="${check}" th:text="'falseが選択されています'"></p>
<form method="post" action="/form2">
  <div>
    <input type="checkbox" name="check" id="check" />
    <label for="check">チェックしてください</label>
  </div>
  <div>
    <input type="radio" name="age" value="10〜19" id="age1" />
    <label for="age1">10〜19歳</label>
    <br />
    <input type="radio" name="age" value="20〜29" id="age2" />
    <label for="age2">20〜29歳</label>
    <br />
    <input type="radio" name="age" value="30〜39" id="age3" />
    <label for="age3">30〜39歳</label>
    <br />
    <input type="radio" name="age" value="40〜49" id="age4" />
    <label for="age4">40〜49歳</label>
    <br />
    <input type="radio" name="age" value="50〜59" id="age5" />
    <label for="age5">50〜59歳</label>
    <br />
    <input type="radio" name="age" value="60〜" id="age6" />
    <label for="age6">60歳〜</label>
  </div>
  <div>
    <select id="select" name="os">
      <option value="Windows">Windows</option>
      <option value="MacOS">MacOS</option>
      <option value="Linux">Linux</option>
    </select>
  </div>
  <div>
    <textarea name="longtext" rows="5" cols="40"></textarea>
  </div>
  <div>
    <input type="submit" value="送信" />
  </div>
</form>
</body>
</html>

保守しやすいHTMLテンプレートを作るために、フラグメントを使う。
IndexControllerが長くなったので、新しくコントローラを用意する。
表示するテンプレート名は layout を指定する。

FragmentControler.java

package com.example.demo;

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

@Controller
public class FragmentController {
	@RequestMapping("/fragment")
	public ModelAndView fragment(ModelAndView mav) {
		mav.setViewName("layout");
		return mav;
	}
}

新しいテンプレートとして layout.html を作成する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>layout.html</title>
</head>
<body>
<h1>layout</h1>
</body>
</html>

layout.htmlにヘッダーとフッターを表示する領域を追加する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>layout.html</title>
</head>
<body>

<header>
仮のヘッダーです
</header>

<section>
<h1>layout</h1>
<p>本文です。</p>
</section>

<footer>
仮のフッターです
</footer>

</body>
</html>

ヘッダー部分に表示する内容を記述するテンプレートを作成する。
header.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>

<div th:fragment="header">
<h1>Hello spring boot</h1>
</div>

</body>
</html>

フッター部分に表示する内容を記述するテンプレートを作成する。
footer.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>

<div th:fragment="footer">
<h4>copyright(C) SAWADA SATOSHI</h4>
</div>

</body>
</html>

layout.html で、別ファイルで記述したテンプレートを読み込むように修正する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>layout.html</title>
</head>
<body>

<header th:include="header :: header">
仮のヘッダーです
</header>

<section>
<h1>layout</h1>
<p>本文です。</p>
</section>

<footer th:include="footer :: footer">
仮のフッターです
</footer>

</body>
</html>

本文になる部分も別ファイルで置き換えてみる。
layout.htmlでsection部分もth:includeを使う。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>layout.html</title>
</head>
<body>

<header th:include="header :: header">
仮のヘッダーです
</header>

<section th:include="content :: body">
<h1>layout</h1>
<p>本文です。</p>
</section>

<footer th:include="footer :: footer">
仮のフッターです
</footer>

</body>
</html>

content.htmlを作成して、本文になる部分を記述する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>

<div th:fragment="body">
<h1>置き換えられた本文</h1>
<p>このように、本文の部分の置き換えもできます。</p>
</div>

</body>
</html>

URLによって本文の部分を切り替えてみる。
addObject（）で表示するフラグメントの名前を渡すようにする。
FragmentController.java

package com.example.demo;

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

@Controller
public class FragmentController {
	@RequestMapping("/fragment")
	public ModelAndView fragment(ModelAndView mav) {
		mav.addObject("content", "body1");
		mav.setViewName("layout");
		return mav;
	}

	@RequestMapping("/mac")
	public ModelAndView mac(ModelAndView mav) {
		mav.addObject("content", "mac");
		mav.setViewName("layout");
		return mav;
	}
}

layout.html では、content で指定されたフラグメントを表示する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>layout.html</title>
</head>
<body>

<header th:include="header :: header">
仮のヘッダーです
</header>

<section th:include="content :: ${content}">
<h1>layout</h1>
<p>本文です。</p>
</section>

<footer th:include="footer :: footer">
仮のフッターです
</footer>

</body>
</html>

content.html では、複数のフラグメントを定義する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>

<div th:fragment="body1">
<h1>置き換えられた本文</h1>
<p>このように、本文の部分の置き換えもできます。</p>
<p th:text="${content}"></p>
</div>

<div th:fragment="mac">
<h1>Macbook</h1>
<p>あたらしいMacbook用フラグメント</p>
<p th:text="${content}"></p>
</div>

</body>
</html>

contentの名前が悪いので、template に変更する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>layout.html</title>
</head>
<body>

<header th:include="header :: header">
仮のヘッダーです
</header>

<section th:include="${template} :: ${fragment}">
<h1>layout</h1>
<p>本文です。</p>
</section>

<footer th:include="footer :: footer">
仮のフッターです
</footer>

</body>
</html>

FragmentController.javaでHTMLテンプレートにわたす変数名を変更する。

package com.example.demo;

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

@Controller
public class FragmentController {
	@RequestMapping("/fragment")
	public ModelAndView fragment(ModelAndView mav) {
		mav.addObject("template", "content");
		mav.addObject("fragment", "body1");
		mav.setViewName("layout");
		return mav;
	}

	@RequestMapping("/mac")
	public ModelAndView mac(ModelAndView mav) {
		mav.addObject("template", "content");
		mav.addObject("fragment", "mac");
		mav.setViewName("layout");
		return mav;
	}
}

テンプレートを別ファイルで用意してみる。
windows.htmlを作成する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>

<div th:fragment="windows">
<h1>Windows</h1>
<p>別ファイルで作成したWindows用フラグメント</p>
<p th:text="${fragment}"></p>
</div>

</body>
</html>

FragmentController.java で、/windows にアクセスがあったときは、windowsテンプレートを表示するようにする。

package com.example.demo;

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

@Controller
public class FragmentController {
	@RequestMapping("/fragment")
	public ModelAndView fragment(ModelAndView mav) {
		mav.addObject("template", "content");
		mav.addObject("fragment", "body1");
		mav.setViewName("layout");
		return mav;
	}

	@RequestMapping("/mac")
	public ModelAndView mac(ModelAndView mav) {
		mav.addObject("template", "content");
		mav.addObject("fragment", "mac");
		mav.setViewName("layout");
		return mav;
	}

	@RequestMapping("/windows")
	public ModelAndView windows(ModelAndView mav) {
		mav.addObject("template", "windows");
		mav.addObject("fragment", "windows");
		mav.setViewName("layout");
		return mav;
	}
}

layout.htmlでヘッダーとフッターの背景色を設定する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>layout.html</title>
<style type="text/css">
header {
  background: #f0f0f0;
}

footer {
  background: #e0e0e0;
}
</style>
</head>
<body>

<header th:include="header :: header">
仮のヘッダーです
</header>

<section th:include="${template} :: ${fragment}">
<h1>layout</h1>
<p>本文です。</p>
</section>

<footer th:include="footer :: footer">
仮のフッターです
</footer>

</body>
</html>

Linuxのページを作成する。
FragmentControllerにマッピングを追加する。

package com.example.demo;

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

@Controller
public class FragmentController {
	@RequestMapping("/fragment")
	public ModelAndView fragment(ModelAndView mav) {
		mav.addObject("template", "content");
		mav.addObject("fragment", "body1");
		mav.setViewName("layout");
		return mav;
	}

	@RequestMapping("/mac")
	public ModelAndView mac(ModelAndView mav) {
		mav.addObject("template", "content");
		mav.addObject("fragment", "mac");
		mav.setViewName("layout");
		return mav;
	}

	@RequestMapping("/windows")
	public ModelAndView windows(ModelAndView mav) {
		mav.addObject("template", "windows");
		mav.addObject("fragment", "windows");
		mav.setViewName("layout");
		return mav;
	}

	@RequestMapping("/linux")
	public ModelAndView linux(ModelAndView mav) {
		mav.addObject("template", "linux");
		mav.addObject("fragment", "linux");
		mav.setViewName("layout");
		return mav;
	}
}

linux.htmlを作成する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>linux.html</title>
</head>
<body>

<div th:fragment="linux">
<h1>Linux</h1>
<p>別ファイルで作成したLinux用フラグメント</p>
<p th:text="${fragment}"></p>
</div>

</body>
</html>