Thymeleaf

28999 ワード
ばね Thymeleaf Spring テキストリンク

賛美詩とは何ですか。


タイムラインはビューテンプレートエンジンで、JSP、Freemarkerなどのバックエンド応答クライアントのブラウザ画面を作成できますが、タイムラインは既存のテンプレートエンジンと以下の違いがあります.
•サーバ上での操作が不要
•純粋なHTML構造の維持
従来のテンプレートでは、成果物を表示するためにサーバを駆動する必要があるため、タイムラインの利点は、静的ファイルを使用するようにブラウザで表示できることです.これは、時間軸がHTMLの属性(Attribute)に基づいて記述されており、既存のHTML構造には触れないためかもしれません.

ナチュラルテンプレート


サーバを駆動しないと、純粋なHTMLが生成され、サーバを駆動すると、HTMLが動的に生成されます.
このようにタイムスライスは純粋なHTMLを保持しているので、ナチュラルテンプレートとも呼ばれています
時間軸はth:xxxのような値で変換されるので、自然テンプレートを使用できます.

Thymeleaf with Spring


SpringはThymeleafも正式に推奨されているため、Springフレームワークを時間軸で便利に使用できる様々な機能をサポートしています.

コアの整理


タイムラインは、既存のテンプレートエンジンとは異なり、純粋なHTMLを保持する自然テンプレートであり、サーバが直接ファイルを開くことなくコンテンツを表示し、サーバがビューテンプレートを参照することでHTMLを動的に生成することができます.
また、スプリングフレームを簡単に使用できる様々な機能をサポートし、スプリングと組み合わせて使用しやすい

使用方法

<html xmlns:th="http://www.thymeleaf.org">
書き込み->IDE自動完了
書かなくてもかまわない
構文(Syntax)
1) ${...} 式＃シキ＃
${...} 式は、コントローラから渡された変数にアクセスするために使用され、th:属性名でのみ使用できます.
2) @{...} 式＃シキ＃
@{...} 式はサーバのcontextPathを表し、@{/}は「/contextPath/」を表す.
3)文字合成
マージする文字列を「|」で囲むか、+演算子で文字をマージできます.
<div th:text="|My name is ${info.name} !! |"></div>
<div th:text="'My name is '+ ${info.name} + ' !! '"></div>
Message
home.properties home.welcome=Hello, {0}!
th:utext="#{home.welcome(${session.user.name})}
変数＃ヘンスウ＃

基本オブジェクト

ユーティリティオブジェクト(ユーティリティオブジェクト)ユーティリティオブジェクト
  • #numbers
    sequence(from,to):[from,to]
    • ではなく配列[from,to]を作成する
  • #temporals (org.thymeleaf.extras.java8time.expression)
    format(target,pattern):日付、時間マッピング
    • 選択(Selection)
    th:object="${...}"に含まれるオブジェクトフィールド*{...}使用可能
    <div th:object="${session.user}">
    <p>Name: <span th:text="*{firstName}">Sebastian</span>.</p>
    <p>Surname: <span th:text="*{lastName}">Pepper</span>.</p>
    <p>Nationality: <span th:text="*{nationality}">Saturn</span>.</p>
</div>
    Link URL
    <!-- /order/details?orderId=3 -->
<a th:href="@{/order/details(orderId=${o.id})}"></a>

<!-- /order/3/details -->
<a th:href="@{/order/{orderId}/details(orderId=${o.id})}"></a>
    requestパラメータは、(Comma)で区切られます.
    で始まるURLは自動的に接頭辞applicationcontextnameで始まる
    If cookies are not enabled or this is not yet known, a ";jsessionid=..."suffix might be added to relative URLs so that the session is preserved. This is called URL Rewriting and Thymeleaf allows you to plug in your own rewriting filters by using the response.encodeURL(...) mechanism from the Servlet API for every URL. (理解できません)
    Fragments
    <div th:insert="~{commons :: main}">...</div>
    テキスト
  • Text literals
  • '(一重引用符)文字列.'「
    • を使用
  • 追加可能文字列「Myname is」+${user.name}
  • Number
  • Boolean (true false) 
    •   th:if="${user.isAdmin()} == false"
  • null
    • Literal substitutions
    |の文字列
    中は${.}*{...} #{...} 外部式は使用できません
    '...' テキストテキストも使用できません
    Elvis operator
    Age: 27.
    ... ?: ... 最初の式が空の場合は、2番目の値を使用します.
    2番目の値として使用するとnullの場合は何も実行されません
    その他
  • Arithmetic operations
  • div/mod%
  • Comparators and Equality
    gt> lt< ge>= le<= eq== ne!= not!
  • Conditional expressions
    ? ... : ... 次の3つの演算子がありません.falseの場合null
    • が返されます.

    属性(attribute)


    初期値(設定値)


    th:attr:属性の値を設定します.ぶんかつ
    <img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

<!-- 렌더링 후 -->
<img src="/gtgv/images/gtvglogo.png" title="Logo de Good Thymes" alt="Logo de Good Thymes" />
  • 特定の属性の値を設定:th:src...リスト
  • 一度に複数の属性thを設定する:title-alt等
    • appending and prepending
  • th:attrappend接尾辞
  • th:attrprepend prefix追加
    th:classappend th:styleappend ...
    • Fixed-value boolean attributes
    式がtrueの場合、属性が追加されます.
    th:checked
    その他
    th:text:タグ内のテキスト
    th:utext : Unescaped test ( -> )
    繰り返し(Iteration)
      <tr th:each="prod : ${prods}">
    <td th:text="${prod.name}">Onions</td>
    <td th:text="${prod.price}">2.41</td>
    <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
    繰り返し文の値(Iterable values)
  • java.util.Iterable
  • java.util.Enumeration
  • java.util.Iterator
  • java.util.Mapを繰り返す場合はEntry
    • を使用
  • Any Array
    • th:each
    each文を使用して重複文を表します.
    <th:block th:each="data:${datas}">
	<h1 th:text="${data}"></h1>
</th:block>
    status変数
    th:each="prod,iterStat : ${prods}"
  • index:0index
  • count:1からのindex
  • size:合計
  • current:現在のインデックスの変数
  • 偶数od:偶数/奇数
  • firstlast:初回/最終
    • <th:block th:each="data,status:${datas}">
	<h1 th:text="|${status.count} ${data}|"></h1>
</th:block>
    Conditional Evaluation
  • th:if
  • th:unless (th:if="${not ...}")
    • true value

    null is false
    スイッチドア
    th:switch th:case
th:case="*" == default
    <th:block th:switch="${info.name}">
<div th:case="lee"> 당신은 이씨 입니다.</div>
<div th:case="kim"> 당신은 김씨 입니다.</div>
</th:block>
    Template Layout
  • 声明
  • th:fragment
  • 使用
  • th:insert:タグにクリップを挿入
  • th:replace:タグをクリップに置換
    • コメント(CommentsとBlocks)
      <!-- 일반 주석 -->
<!-- /* 처리 후 사라지는 주석 */-->

<!--/*--> 
  <div>
     처리 전에만 볼 수 있음
  </div>
<!--*/-->

<!--/*/
  <div th:text="${...}">
    처리 중에는 태그로 인식, 그냥 볼 경우 주석
  </div>
/*/-->
<table>
  <th:block th:each="user : ${users}">
    <tr>
        <td th:text="${user.login}">...</td>
        <td th:text="${user.name}">...</td>
    </tr>
    <tr>
        <td colspan="2" th:text="${user.address}">...</td>
    </tr>
  </th:block>
</table>
    tip:th:block簡単な容器.パーティション内のコンテンツのみを保持し、消去します.
    うちばり
    <p>Hello, [[${session.user.name}]]!</p>
<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>
    [[...]] inline expressions
    [(...)] unescape inline expressions (th:utext)
    th:inline=「none」:インライン無効
    JavaScript Inline(JavaScript inline)
    th:inline="javascript"
    <script th:inline="javascript">
  	var username = [[${session.user.name}]];
  	var username = "Sebastian \"Fruity\" Applejuice";
  
  	var username = [(${session.user.name})];
  	var username = Sebastian "Fruity" Applejuice; // 주의
  
  	var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
  	// 처리 후 블록 주석 뒤의 내용은 없어짐
  	
  	/*<![CDATA[*/
	var URL = "[(@{/board/{id}(id=${post.id})})]"
	/*]]>*/
  	
</script>
    リファレンス(リファレンス)
  • https://junyharang.tistory.com/70
  • https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html
  • https://velog.io/@slo-th/thymeleaf
  • https://maenco.tistory.com/entry/Thymeleaf-Thymeleaf蘭。 [Steady and right]
    • Unity5 ProでCache Serverをつかってみる
    レイヤーでフィルタリングできるSceneビューを作る