Struts2-テーマとテンプレート

この章の実際のチュートリアルを開始する前に、次のようにいくつかの定義を調べてみましょう。 https://struts.apache.org−

シニア番号	用語と説明
1	TAG JSP、FreeMarker、またはVelocity内から実行される小さなコード。
2	TEMPLATE 特定のタグ（HTMLタグ）でレンダリングできる、通常はFreeMarkerで記述されたコード。
3	THEME 共通の機能を提供するために一緒にパッケージ化されたテンプレートのコレクション。

また、同じ例をもう一度取り上げて演習を行うため、Struts2ローカリゼーションの章を読むことをお勧めします。

あなたが使用するとき Struts 2Webページの<s：submit ...>、<s：textfield ...>などのタグを使用すると、Struts2フレームワークは事前構成されたスタイルとレイアウトでHTMLコードを生成します。Struts2には3つの組み込みテーマが付属しています-

シニア番号	テーマと説明
1	SIMPLE theme 「鐘と笛」のない最小限のテーマ。たとえば、textfieldタグは、ラベル、検証、エラーレポート、またはその他のフォーマットや機能なしでHTML <input />タグをレンダリングします。
2	XHTML theme これはStruts2で使用されるデフォルトのテーマであり、シンプルなテーマが提供するすべての基本を提供し、HTMLの標準の2列のテーブルレイアウト、各HTMLのラベル、検証とエラーレポートなどのいくつかの機能を追加します。
3	CSS_XHTML theme このテーマは、シンプルなテーマが提供するすべての基本を提供し、標準の2列のCSSベースのレイアウトなどのいくつかの機能を追加します。。

上記のように、テーマを指定しない場合、Struts2はデフォルトでxhtmlテーマを使用します。たとえば、このStruts 2selectタグ-

<s:textfield name = "name" label = "Name" />

次のHTMLマークアップを生成します-

<tr>

   <td class="tdLabel">
      <label for = "empinfo_name" class="label">Name:</label>
   </td>
   <td>
      <input type = "text" name = "name" value = "" id = "empinfo_name"/>
   </td>

</tr>

ここに empinfo struts.xmlファイルで定義されているアクション名です。

テーマの選択

Struts 2のタグに基づいてテーマを指定するか、次のいずれかの方法を使用して、Struts2が使用するテーマを指定できます。

特定のタグのテーマ属性
タグの周囲のフォームタグのテーマ属性
「theme」という名前のページスコープ属性
「theme」という名前のリクエストスコープの属性
「theme」という名前のセッションスコープの属性
「theme」という名前のアプリケーションスコープの属性
struts.propertiesのstruts.ui.themeプロパティ（デフォルトはxhtml）

以下は、タグごとに異なるテーマを使用する場合にタグレベルでそれらを指定するための構文です。

<s:textfield name = "name" label = "Name" theme="xhtml"/>

タグごとにテーマを使用することはあまり実用的ではないため、ルールを指定するだけです。 struts.properties 次のタグを使用したファイル-

# Standard UI theme
struts.ui.theme = xhtml
# Directory where theme template resides
struts.ui.templateDir = template
# Sets the default template type. Either ftl, vm, or jsp
struts.ui.templateSuffix = ftl

以下は、デフォルトのテーマを設定で使用したローカリゼーションの章から取得した結果です。 struts.ui.theme = xhtml に struts-default.properties struts2-core.xy.z.jarファイルにデフォルトで含まれるファイル。

テーマはどのように機能しますか？

特定のテーマについて、すべてのstrutsタグには次のようなテンプレートが関連付けられています s:textfield → text.ftl そして s:password → password.ftl 等

これらのテンプレートファイルは、struts2-core.xy.z.jarファイルに圧縮されています。これらのテンプレートファイルは、タグごとに事前定義されたHTMLレイアウトを保持します。

この方法では、 Struts 2 フレームワークは、Sturtsタグと関連するテンプレートを使用して最終的なHTMLマークアップコードを生成します。

Struts 2 tags + Associated template file = Final HTML markup code.

デフォルトのテンプレートはFreeMarkerで記述されており、拡張子があります .ftl。

また、velocityまたはJSPを使用してテンプレートを設計し、それに応じてstruts.propertiesで構成を設定することもできます。 struts.ui.templateSuffix そして struts.ui.templateDir。

新しいテーマの作成

新しいテーマを作成する最も簡単な方法は、既存のテーマ/テンプレートファイルをコピーして、必要な変更を加えることです。

というフォルダの作成から始めましょう template中のWebContent / WEBINF /クラスと私たちの新しいテーマの名前のサブフォルダ。たとえば、WebContent / WEB-INF / classes / template / mythemeです。

ここから、テンプレートの作成を最初から開始することも、テンプレートをからコピーすることもできます。 Struts2 distribution 将来必要に応じて変更できます。

既存のデフォルトテンプレートを変更します xhtml学習目的のため。ここで、コンテンツをstruts2-core-xyzjar / template / xhtmlからテーマディレクトリにコピーし、WebContent / WEBINF / classes / template / mytheme / control.ftlファイルのみを変更してみましょう。control.ftlを開くと、次の行が表示されます-

<table class="${parameters.cssClass?default('wwFormTable')?html}"<#rt/>
<#if parameters.cssStyle??> style="${parameters.cssStyle?html}"<#rt/>
</#if>
>

上記のファイルを変更しましょう control.ftl 次の内容にする-

<table style = "border:1px solid black;">

確認する場合 form.ftl その後、あなたはそれを見つけるでしょう control.ftlこのファイルではが使用されていますが、form.ftlはxhtmlテーマからこのファイルを参照しています。それでは、次のように変更しましょう-

<#include "/${parameters.templateDir}/xhtml/form-validate.ftl" />
<#include "/${parameters.templateDir}/simple/form-common.ftl" />
<#if (parameters.validate?default(false))>
   onreset = "${parameters.onreset?default('clearErrorMessages(this);\
   clearErrorLabels(this);')}"
   
<#else>
   <#if parameters.onreset??>
      onreset="${parameters.onreset?html}"
   </#if>
</#if>
#include "/${parameters.templateDir}/mytheme/control.ftl" />

私はあなたが多くの理解を持っていないだろうと思います FreeMarker テンプレート言語ですが、.ftlファイルを見ると、何をすべきかについての良いアイデアを得ることができます。

ただし、上記の変更を保存し、ローカリゼーションの例に戻って、 WebContent/WEB-INF/classes/struts.properties 次の内容のファイル

# Customized them
struts.ui.theme = mytheme
# Directory where theme template resides
struts.ui.templateDir = template
# Sets the template type to ftl.
struts.ui.templateSuffix = ftl

この変更後、プロジェクト名を右クリックして、 Export > WAR FileWarファイルを作成します。次に、このWARをTomcatのwebappsディレクトリにデプロイします。最後に、Tomcatサーバーを起動し、URLにアクセスしてみますhttp://localhost:8080/HelloWorldStruts2。これにより、次の画面が表示されます-

xhtmlテーマからコピーした後、outテーマで行った変更の結果であるフォームコンポーネントの周囲に境界線が表示されます。FreeMarkerの学習に少し力を入れれば、テーマを非常に簡単に作成または変更できるようになります。

これで、基本的な理解ができたと思います。 Sturts 2 テーマやテンプレートですね。