Struts-2-struts-themes-templates

提供：Dev Guides
移動先:案内、検索

Struts 2-テーマとテンプレート

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

Sr.No Term & Description
1

TAG

JSP、FreeMarker、またはVelocity内から実行される小さなコード。

2

TEMPLATE

通常はFreeMarkerで記述された特定のタグ（HTMLタグ）でレンダリングできるコード。

3

THEME

共通の機能を提供するために一緒にパッケージ化されたテンプレートのコレクション。

また、リンク：/struts_2/struts_localization [Struts2 Localization]の章を参照することをお勧めします。エクササイズを実行するためにもう一度同じ例を使用するためです。

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

Sr.No Theme & Description
1

SIMPLE theme

「添えもの」のない最小限のテーマ。 たとえば、textfieldタグは、ラベル、検証、エラー報告、またはその他のフォーマットや機能なしでHTML <input/>タグをレンダリングします。

2

XHTML theme

これは、Struts 2で使用されるデフォルトのテーマであり、シンプルテーマが提供するすべての基本を提供し、HTMLの標準2列テーブルレイアウト、各HTMLのラベル、検証、エラー報告などのいくつかの機能を追加します。

3

CSS_XHTML theme

このテーマは、シンプルなテーマが提供するすべての基本を提供し、HTML Strutsタグの<div>、CSSスタイルシートに従って配置された各HTML Strutsタグのラベルを使用する、標準の2列CSSベースのレイアウトなどのいくつかの機能を追加します。

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

<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、タグごとにテーマを指定するか、次のいずれかの方法を使用して、Struts 2が使用するテーマを指定できます-

  • 特定のタグのテーマ属性
  • タグの周囲のフォームタグのテーマ属性
  • 「テーマ」という名前のページスコープ属性
  • 「テーマ」という名前の要求スコープ属性
  • 「テーマ」という名前のセッションスコープ属性
  • 「テーマ」という名前のアプリケーションスコープの属性
  • 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

以下は、ローカライズの章から選択した結果で、デフォルトのテーマを使用し、デフォルトでstruts2-core.xy.zにある struts-default.properties ファイルで struts.ui.theme = xhtml の設定を使用しました。 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 です。

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

新しいテーマの作成

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

_WebContent/WEBINF/classes_に template というフォルダーと、新しいテーマの名前を持つサブフォルダーを作成することから始めましょう。 たとえば、_WebContent/WEB-INF/classes/template/mytheme_のようになります。

ここから、テンプレートの構築をゼロから開始できます。または、* Struts2ディストリビューション*からテンプレートをコピーして、必要に応じてテンプレートを変更することもできます。

学習目的で既存のデフォルトテンプレート xhtml を変更します。 次に、struts2-core-x.y.z.jar/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

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

テーマとテンプレート

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

*Sturts 2* のテーマとテンプレートの基本的な理解ができたことを願っています。
「https://www.finddevguides.com/index.php?title=Struts-2-struts-themes-templates&oldid=33582」から取得
Powered by MediaWiki