Thymeleafチュートリアル:第3章テキストの使用

目次



3テキストの使用



3.1多言語へようこそ



最初のタスクは、製品サイトのホームページを作成することです。



このページの最初のバージョンは非常にシンプルです。見出しとウェルカムメッセージのみです。 これは/WEB-INF/templates/home.htmlファイルです。



<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Good Thymes Virtual Grocery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="all" href="../../css/gtvg.css" th:href="@{/css/gtvg.css}" /> </head> <body> <p th:text="#{home.welcome}">Welcome to our grocery store!</p> </body> </html>
      
      





最初に気付くのは、これはHTML以外のタグを含まないため、どのブラウザーでも正しく表示できるHTML5標準ファイルであるということです(ブラウザーは、「th:text」など、理解できないすべての属性を無視します)



しかし、「th:*」の形式で使用する非標準の属性はHTML5仕様では許可されていないため、このテンプレートは有効なHTML5ドキュメントではないことにも気付くでしょう。 実際、「xmlns:th」という属性もタグに追加します。これは絶対にHTML5ではありませんが、



 <html xmlns:th="http://www.thymeleaf.org">
      
      





...これはテンプレートの処理にはまったく影響を与えませんが、IDEがこれらすべての名前空間定義の欠如について不平を言うのを防ぐ「呪文」のように機能します:*属性。



このHTML5テンプレートの作成方法は? 簡単:コロン(:)の代わりに属性名とハイフン(-)に「data-」を使用して、Thymeleaf属性構文に切り替えます。



 <!DOCTYPE html> <html> <head> <title>Good Thymes Virtual Grocery</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" media="all" href="../../css/gtvg.css" data-th-href="@{/css/gtvg.css}" /> </head> <body> <p data-th-text="#{home.welcome}">Welcome to our grocery store!</p> </body> </html>
      
      





「data-」で始まるユーザー属性はHTML5仕様で許可されているため、上記のコードを使用すると、テンプレートは有効なHTML5ドキュメントになります。



両方の表記法は完全に同等で互換性がありますが、コード例の単純さとコンパクトさのために、このチュートリアルでは名前空間表記法「th:*」を使用します。 さらに、表記「th:*」はより一般的であり、Thymeleafテンプレートの各タイプ(XML、TEXT ...)で使用できますが、「data-」属性のプレフィックスはHTMLモードでのみ使用できます。



thの使用:テキストと多言語テキスト



多言語テキストはテンプレートファイルの外部に表示され、個別のファイル(通常は.propertiesファイル)に保存され、他の言語で記述された同等のテキスト(国際化または単にi18nと呼ばれるプロセス)に簡単に置き換えることができます。 このような「外部テキストの断片」は、一般に「メッセージ」と呼ばれます。



メッセージには常にそれらを識別するキーがあり、Thymeleafでは、テキストが特定のメッセージに対応するように構文#{...}で指定することができます。



 <p th:text="#{home.welcome}">Welcome to our grocery store!</p>
      
      





Thymeleaf標準方言の2つの機能を確認できます。



属性「 th:text 」は、独自の値を処理し、関連するタグの本文に処理結果を設定し、「食料品店へようこそ!」テキストを上書きします。



標準構文式で定義される式「 #{home.welcome} 」は、「 th:text 」属性内のテキストが、ロケールに関連付けられたキー「home.welcome」を含むメッセージであることを示します。



そして、多言語主義はここにありますか?



Thymeleafの多言語テキストの場所は完全に構成可能であり、org.thymeleaf.messageresolver.IMessageResolverインターフェースの実装によって決定されます。 通常、実装は.propertiesファイルの使用に基づいていますが、必要に応じて、データベースからメッセージを取得するために独自の実装を作成できます。



この例では、初期化中にメッセージリゾルバーを定義しません。つまり、アプリケーションはorg.thymeleaf.messageresolver.StandardMessageResolverに実装された標準メッセージリゾルバーを使用します。



標準のメッセージリゾルバーは、テンプレートと同じ名前の同じディレクトリにある「プロパティ」ファイルでメッセージファイル/WEB-INF/templates/home.htmlの展開を探します-例:



/WEB-INF/templates/home_en.properties(英語テキスト用)。

/WEB-INF/templates/home_es.properties(スペイン語のテキスト用)。

/WEB-INF/templates/home_pt_BR.properties(ポルトガル語(ブラジル)テキスト用)。

デフォルトのテキストの/WEB-INF/templates/home.properties(ロケールが定義されていない場合)。



home_es.propertiesファイルを見てみましょう。



 home.welcome=¡Bienvenido a nuestra tienda de comestibles!
      
      





Thymeleafでテンプレートを処理するために必要なことはこれだけです。 Homeコントローラーを作成しましょう。



コンテキスト



テンプレートを処理するために、先ほど見たIGTVGControllerインターフェイスを実装するHomeControllerクラスを作成します。



 public class HomeController implements IGTVGController { public void process( final HttpServletRequest request, final HttpServletResponse response, final ServletContext servletContext, final ITemplateEngine templateEngine) throws Exception { WebContext ctx = new WebContext(request, response, servletContext, request.getLocale()); templateEngine.process("home", ctx, response.getWriter()); } }
      
      





最初に目にするのは、コンテキストの作成です。 Thymeleaf Contextは、org.thymeleaf.context.IContextインターフェースを実装するオブジェクトです。 コンテキストには、Map変数のテンプレートメカニズムを実行するために必要なすべてのデータが含まれている必要があり、メッセージに使用されるロケールも参照する必要があります。



 public interface IContext { public Locale getLocale(); public boolean containsVariable(final String name); public Set<String> getVariableNames(); public Object getVariable(final String name); }
      
      





このインターフェースorg.thymeleaf.context.IWebContextには、ServletAPIベースのWebアプリケーション(SpringMVCなど)での使用を目的とした特別な拡張機能があります。



 public interface IWebContext extends IContext { public HttpServletRequest getRequest(); public HttpServletResponse getResponse(); public HttpSession getSession(); public ServletContext getServletContext(); }
      
      





Thymeleafコアライブラリは、これらの各インターフェイスの実装を提供します。



org.thymeleaf.context.ContextはIContextを実装します

org.thymeleaf.context.WebContextはIWebContextを実装します



そして、コントローラーのコードでわかるように、WebContextは私たちが使用するものです。 ServletContextTemplateResolverを使用するにはIWebContextを実装するコンテキストを使用する必要があるため、これは実際に必要です。



 WebContext ctx = new WebContext(request, response, servletContext, request.getLocale());
      
      





これらの4つのコンストラクター引数のうち3つのみが必要です。何も指定されていない場合、システムのデフォルトのロケールが使用されるためです(ただし、実際のアプリケーションではこれを許可しないでください)



テンプレートのWebContextから要求パラメーターと要求、セッション、およびアプリケーション属性を取得するために使用できる特殊な式がいくつかあります。 例:



$ {x}は、Thymeleafコンテキストに格納された変数xを返すか、要求属性として返します。

$ {param.x}は、xという名前のクエリパラメータを返します(複数値の場合もあります)。

$ {session.x}は、xという名前のセッション属性を返します。

$ {application.x}は、xという名前のサーブレットコンテキスト属性を返します。



テンプレートエンジンを起動する



コンテキストオブジェクトの準備ができたら、テンプレートエンジンに、コンテキストを使用して(名前で)テンプレートを処理し、応答を送信して、回答をテンプレートに埋め込むことができるように指示できます。



 templateEngine.process("home", ctx, response.getWriter());
      
      





スペイン語のロケールを使用して結果を見てみましょう。



 <!DOCTYPE html> <html> <head> <title>Good Thymes Virtual Grocery</title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/> <link rel="stylesheet" type="text/css" media="all" href="/gtvg/css/gtvg.css" /> </head> <body> <p>¡Bienvenido a nuestra tienda de comestibles!</p> </body> </html>
      
      





3.2その他のテキストと変数



エスケープされたテキスト



私たちのホームページの最も簡単なバージョンは今準備ができているように見えますが、まだ考えていないことがあります。



 home.welcome=Welcome to our <b>fantastic</b> grocery store!
      
      





前と同じようにこのテンプレートを実行すると、次の結果が得られます。



 <p>Welcome to our <b>fantastic</b> grocery store!</p>
      
      





<b>タグがエスケープされていたため、ブラウザーに表示されるため、これは予想したとおりではありません。



これは、 th:text属性のデフォルトの動作です。 ThymeleafがHTMLタグを変更しないようにしたい場合は、別の属性を使用する必要があります: th:utext ( "エスケープされていないテキスト"):



 <p th:utext="#{home.welcome}">Welcome to our grocery store!</p>
      
      





これにより、メッセージが希望どおりに表示されます。



 <p>Welcome to our fantastic grocery store!</p>
      
      





変数の使用と表示



次に、ホームページにコンテンツを追加します。 たとえば、ウェルカムメッセージの下に日付を表​​示できます。



Welcome to our fantastic grocery store!



Today is: 12 july 2010








まず、この日付をコンテキスト変数として追加するようにコントローラーを変更する必要があります。



 public void process( final HttpServletRequest request, final HttpServletResponse response, final ServletContext servletContext, final ITemplateEngine templateEngine) throws Exception { SimpleDateFormat dateFormat = new SimpleDateFormat("dd MMMM yyyy"); Calendar cal = Calendar.getInstance(); WebContext ctx = new WebContext(request, response, servletContext, request.getLocale()); ctx.setVariable("today", dateFormat.format(cal.getTime())); templateEngine.process("home", ctx, response.getWriter()); }
      
      





コンテキストに「 today 」という文字列変数を追加し、テンプレートに表示できるようになりました。



 <body> <p th:utext="#{home.welcome}">Welcome to our grocery store!</p <p>Today is: <span th:text="${today}">13 February 2011</span></p> </body>
      
      





ご覧のとおり、「 th:text 」属性を使用して動作します(タグ本体を置き換えるためこれは正しいです)が、今回の構文は少し異なり、 #{...}の代わりに$ {...} この式は変数であり、OGNL言語(Object-Graph Navigation Language)の式が含まれています。これは、先ほど説明したマップのコンテキスト変数で実行されます。



$ {today}は単に「todayという変数を取得する」ことを意味しますが、これらの式はより複雑になる場合があります(たとえば、「userという変数を取得してそのgetName()メソッドを呼び出す)の$ {user.name}



属性値には、メッセージ、変数など、さまざまな可能性があります。 次の章では、これらすべての可能性について説明します。



継続する。 第4章標準式の構文



All Articles