|
JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。 EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、 備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、 これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。 |
|
|
JavaのWebアプリケーション開発フレームワークによる、Webサイト開発の顛末記です。 EclipseのMavenを使った、Spring-MVC、Thymeleaf、MyBatis 等のプログラミングテクニックを、 備忘録的に記録しています。実際に動くソースコードを多用して説明していますので、 これからEclipseや、Spring-MVCを始めたいと思っている人にとって、少しでも参考になれば幸いです。 |
| ■Thymeleaf の小径 |
| １）基本的な使い方 |
|
Thymeleafの使い方に関しては、正直言って私も始めてから日が浅く、まだまだ修行の身です。 私があれこれと物知り顔で詭弁を弄するより、 正確な情報を詳しく解説しているサイトがあるので、最初にご紹介しておきます。 Thymeleaf公式サイト Thymeleafの公式サイトです。 ThymeleafのTutorial ThymeleafのTutorialです。 ThymeleafのTutorial（日本語訳） ThymeleafのTutorial日本語版です。本家だけあって内容が網羅されています（お勧めです） するめとめがね さんのブログ するめとめがねさんのブログです。Thymeleafの基本が丁寧に解説されています。 Thymeleaf の Document 読みながら Memo - Mitsuyuki.Shiiba Mitsuyuki.Shiibaさんのブログです。Thymeleafのthタグの様々な使用方法が具体例で解説されています。 |
|
上でご紹介したサイトの受け売りになってしまいますが、 最低限の基本事項だけ使い方を説明します。 |
|
■Thymeleafの基本ルール ・Thymeleafは、HTML5でしか動作しません。 HTML4ではHTTPステータス 500エラーになります。 HTMLの先頭にDOCTYPE宣言 <!DOCTYPE html> を書く必要があります。 ・JSTLと違って、HTMLタグがないと定義できません。 <span>th:text="${変数名}"</span >はNG、 <span th:text="${変数名}">Label</span >のようにHTMLタグの中に入れましょう。 ■Thymeleafの呪文 Thymeleafを使えるようにするには、HTMLに一つの呪文を加えなければいけません。 その呪文を伝授します。HTML の最初のタグ <html> タグに、 <html xmlns:th="http://www.thymeleaf.org"> という、魔法の言葉を書いてください。 もし、<html> タグのないHTMLだったら、なんでもいいのでとにかく先頭のタグに書いてください。 ■パラメータへのアクセス th:xxx="${変数名}" のように、thタグの後ろに${}で括った変数名を指定します。 一例として、サーブレットから返却されたパラメータ（データモデル）からプロパティを取り出してみます。 ・サーブレット側 //データモデルに、myname という変数を”"すぷりんぐ太郎"”という文字列でセットします。 Model model; //Spring-MVCの標準データモデルクラスです。 model.addAttribute("myname", "すぷりんぐ太郎"); ・HTML側 <td>「私の名前は、<span th:text="${myname}">サンプル花子</span>です。」</td> ・結果 「私の名前は、すぷりんぐ太郎です。」 となり、<span></span>内の「サンプル花子」が、 サーブレットから受け取ったパラメータの値、「すぷりんぐ太郎」で書き換えられます。 このHTMLを、Thymeleafを通さずに、単独でブラウザに表示した場合は、 「私の名前は、サンプル花子です。」となり、 ブラウザではthタグは無視されるため、素のHTMLの内容がそのまま表示されます。 ■その他色々な使い方 ・条件式が使えます。th:if th:unless ・繰り返し処理が使えます。 th:each ・HTMLの属性を書き換えることができます。 th:attr ・switch 文が使えます。 th:switch th:case ・比較演算子が使えます。th:text="(100 > 50)? '100の方が大きい' : '50の方が大きい?'" ⇒ 100の方が大きい ・計算もできてしまう。 th:text="100 + 50" ⇒ 150 なんてね。 ・別ファイルのインクルードができます。th:include or th:replace JSTLの<c:import url="" />に相当します。 等々、ほんの一例です。 ほかにどんな使い方があるか知りたかったら、上にご紹介したサイトを読めば全て書いてあります。 |
Thymeleafとは 
|
１）基本的な使い方 |
 ２－１）HTML終了タグの注意点
|