Spring Tool Suite 4 で Thymeleaf のデモアプリケーション「The Good Thymes Virtual Grocery」を実行する

##目的
- <a href="https://www.thymeleaf.org/" target="_blank">Thymeleaf</a> <a href="https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf_ja.html" target="_blank">(日本語)</a> を学びたい。
 - それならデモアプリで色々試せると良いよね。
 - IDEで実行させたい。（Spring も学びたいので Spring Tool Suite 4 かなと。）
 - Windows環境でお願いしたい。

##事前準備
###Spring Tool Suite 4 のインストール
Spring Tool Suite 4 + Thymeleaf の環境は、以下を参考に作成しました。
私の場合は STS を C:\sts-4.0.0.RELEASE に置き、
ワークスペースは C:\sts-4.0.0.RELEASE\workspace にしました。

- <a href="https://qiita.com/kurukuruz/items/3425a6f7a836433ca9f8" target="_blank">Spring Tool Suite 4インストールマニュアル</a>
- <a href="https://qiita.com/NagaokaKenichi/items/c848ee8760a994ec3308" target="_blank">STS（Eclipse） + Thymeleafでコンテンツアシスタントを有効にする</a>

###Spring Tool Suite 4 の設定
####「インストール済みのJRE」の修正
初期値のままだと以降で「"tools.jar"が無い」等のエラーが起きるので、JDK のパスに修正しておきます。

1. STSのメニューから「ウインドウ」-「設定」を選び、ツリーの「Java」-「インストール済みのJRE」で「編集」をクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/aa762b3d-4847-09b6-d1f1-89d0f9f8e0b2.png" width=350 />

2. 「JREホーム」を "jre" から "jdk" に変更して「完了」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/ce729493-673c-b492-59fe-f73ad849f2b5.png" width=278 />

3. 「適用して閉じる」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/5e610a3e-b009-bcfc-22a3-cddf9ec4a895.png" width=350 />

####サーバー・ランタイム環境に Tomcat を追加する

#####ソリューションの追加
サーバー・ランタイム環境に Tomcat を追加できるように、「Eclipse Java EE 開発ツール 3.11」をインストールします。

1. STSのメニューから「ヘルプ」-「Eclipseマーケットプレース」を開いて"WTP"を検索し、「Eclipse Java EE 開発ツール 3.11」を「インストール」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/07d08b14-194f-6612-b2d6-5cccec668057.png" width=293 />

2. 全てのフューチャーにチェックを入れて「確認」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/dbff9ef2-844c-8cac-4eaf-f7502e9549e7.png" width=293 />

3. 使用条件の条項に同意し「完了」するとインストールが始まるので、しばらく待ちます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/904d82b7-d65d-ba57-15a7-41fe5582b216.png" width=293 />

4. STSを再起動します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/340d9dbd-3a74-edd6-453f-accfb584ac02.png" width=259 />

#####サーバー・ランタイム環境に Tomcat を追加する

1. STSのメニューから「ウインドウ」-「設定」を選び、ツリーの「サーバー」-「ランタイム環境」で「追加」をクリックします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/df5a1899-7f95-f296-34f5-ae69b94c4a35.png" width=311 />

2. 「Tomcat インストール・ディレクトリー」を指定します。私の場合は C:\sts-4.0.0.RELEASE\tomcat\7 を新規作成しました。「ダウンロードしてインストール」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/daab852f-ba81-a8e2-4bdf-5465905c2a67.png" width=256 />

3. 使用条件の条項に同意して「完了」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/71d762f4-f432-743c-ae47-32a7d1e6f09b.png" width=256 />

4. 「完了」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/75327d0c-541e-15a1-bb43-fe5a9ae3989f.png" width=256 />

5. 「適用して閉じる」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/02f4b545-1481-4bb7-4e3c-ca1273b7cf60.png" width=311 />

##デモアプリケーションの環境構築
###デモアプリケーションのダウンロード

1. <a href="https://github.com/thymeleaf/thymeleafexamples-gtvg" target="_blank">下記のページ</a> を開き、「Clone or download」-「Download ZIP」をクリックしてダウンロードします。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/59687b3b-fffb-b2d8-eedb-7f2f589c0dba.png" width=517 />

###STSにデモアプリケーションをインポート
1. ダウンロードした "thymeleafexamples-stsm-3.0-master.zip" を解凍してできる "thymeleafexamples-gtvg-3.0-master" を ワークスペース配下に置きます。私の場合は "C:\sts-4.0.0.RELEASE\workspace\thymeleafexamples-gtvg-3.0-master" でした。

2. STSのメニューから「ファイル」-「インポート」を開いて「一般」-「フォルダーまたはアーカイブからプロジェクト」を選択して「次へ」
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/5f06df82-04d8-cd0b-cddf-12e7b785c5ab.png" width=256 />

3. 「インポート・ソース」の「ディレクトリー」で "C:\sts-4.0.0.RELEASE\workspace\thymeleafexamples-gtvg-3.0-master" を指定して「完了」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/6ce8eb9b-a225-b88c-c083-5f956a7770e4.png" width=256 />

##デモアプリケーションの実行
1. 「パッケージ・エクスプローラー」で「thymeleafexamples-gtvg-3.0-master」を選択し、メニューの「実行」-「Maven clean」を実行します。

2. メニューの「実行」-「実行構成」を選択します。
3. 「ゴール」に "tomcat7:run" と入力して「実行」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/9e1d71cf-0dde-494b-075a-a8dc6ca8ca3c.png" width=393 />
ファイアウォールの警告が出た場合は「アクセスを許可する」
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/0b624a79-b47f-5447-9f8a-a44464038adb.png" width=308 />

4. ブラウザから "http://localhost:8080/gtvg/" を開いて、あれこれ操作してみます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/47b8d163-35aa-f93e-54f7-b070b4ad5d7e.png" width=321 />

5. 実行を止めるにはメニューの「実行」-「終了」を選びます。

##デモアプリケーションのデバッグ

1. "ProductListController.java" の "process" の箇所にブレーク・ポイントを設定してみます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/3d80ebee-37e4-1127-fcdf-48466b8419cc.png" width=571 />

2. メニューの「実行」-「デバッグの構成」を選択し、「ゴール」を "tomcat7:run" で「デバッグ」します。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/bcf5e4a4-7c2d-29ee-7cbd-2e5a39e06a54.png" width=393 />

3. ブラウザから "http://localhost:8080/gtvg/" を開いて、"Product List" をクリックしてみます。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/47b8d163-35aa-f93e-54f7-b070b4ad5d7e.png" width=321 />

ブレーク・ポイントで止まります。挙動を学び易くて捗りますね。
<img src="https://qiita-image-store.s3.amazonaws.com/0/297484/fed6f4a1-f998-6498-6787-ef55d77cb922.png" width=571 />