テンプレートの利用 (4/6)
作成:2014-06-08 09:37
更新:2014-06-08 09:37
更新:2014-06-08 09:37
■コントローラーからビューに値を渡す
テンプレートを利用する利点は、コントローラ側からビュー側に必要な情報を受け渡したりすることが簡単に行える、という点にあります。実際にやってみましょう。
下に簡単なサンプルを掲載しておきました。index.htmlとapp.groovyをそれぞれ書き換えて下さい。そしてspring runで実行し、表示を確かめてみましょう。タイトルにHello!、その下にwelcome to Thymeleaf!とテキストが表示されます。が、これらのテキストはindex.htmlには書かれていません。コントローラーで用意した値がそのまま出力されているのです。
●コントローラー側の処理
まずは、コントローラー側で、値を保管する部分を見てみましょう。これは、以下のように行っています。
●値の出力
ModelAndViewに保管された値は、式言語を使って簡単に出力することができます。以下の部分です。
ところで、ここでは値を表示するのに「th:text」という属性を使っています。これらは、Thymeleafのテンプレート機能で、このth:textに設定された値がそのままタグのテキストとして表示されるようになっています。普通に考えれば、
下に簡単なサンプルを掲載しておきました。index.htmlとapp.groovyをそれぞれ書き換えて下さい。そしてspring runで実行し、表示を確かめてみましょう。タイトルにHello!、その下にwelcome to Thymeleaf!とテキストが表示されます。が、これらのテキストはindex.htmlには書かれていません。コントローラーで用意した値がそのまま出力されているのです。
●コントローラー側の処理
まずは、コントローラー側で、値を保管する部分を見てみましょう。これは、以下のように行っています。
mv.addObject("title","Hello!");「addObject」は、ModelAndViewに値を保管するものです。第1引数に名前を指定し、第2引数に保管するオブジェクトを指定します。ここでは、"title"と"msg"という名前でそれぞれテキストが保管されたことがわかります。
mv.addObject("msg","welcome to Thymeleaf!");
●値の出力
ModelAndViewに保管された値は、式言語を使って簡単に出力することができます。以下の部分です。
<h1 th:text="${title}" />この${title}と${msg}が、それぞれModelAndViewに保管したtitleとmsgを出力する部分です。こんな具合に、ModelAndViewに保管した値の名前をそのまま式言語で書くだけで、その値が出力できてしまうのです。実に簡単!
<p th:text="${msg}" />
ところで、ここでは値を表示するのに「th:text」という属性を使っています。これらは、Thymeleafのテンプレート機能で、このth:textに設定された値がそのままタグのテキストとして表示されるようになっています。普通に考えれば、
<h1>${title}</h1>こんな形で書けばいいように思えますが、これでは正しくテキストは出力されません。${title}といったテキストがそのまま書きだされてしまうのです。式言語による出力は、Thymeleafが用意する「th:○○」という属性の値に指定するようにしてください。
<p>${msg}</p>
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
※index.html <!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>top page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <h1 th:text="${title}" /> <p th:text="${msg}" /> </body> </html> ※app.groovy @Grab("thymeleaf-spring4") @Controller class MyBootApp { @RequestMapping("/") @ResponseBody def top(ModelAndView mv) { mv.setViewName("index") mv.addObject("title","Hello!"); mv.addObject("msg","welcome to Thymeleaf!"); } }
※関連コンテンツ
「初心者のためのSpring Bootプログラミング入門」に戻る