Struts 2テーマの操作

Struts 2テーマとテンプレートの使用

Struts2では、HTMLページに「s:textfield」UIタグを配置すると

次の2列のHTMLテーブルレイアウト設計が自動的に生成されます



  Username:

Struts 2は、「テーマとテンプレート」機能を使用して、事前に設計されたテーブルレイアウトを生成します。

シーケンスを見てみましょう：

Struts 2には「s:textfield」タグが表示されます。
宣言されたテーマを検索します（テーマが宣言されていない場合、デフォルトのxhtmlテーマが選択されます）。
対応するテーマのテンプレートを検索します（例：「s:textfield → text.ftl」、「s:password →password.ftl」）。事前定義されたすべてのHTMLレイアウトは、ftlファイルで定義されています。
値をテンプレートファイルにバインドします。
最終的なHTMLマークアップを表示します。

Struts 2タグ+テーマのテンプレートファイル（ftl）=最終的なHTMLマークアップコード。

Struts 2は、freemakerフレームワークをデフォルトのテンプレートエンジンとして使用しています。すべてのftlファイルは、freemakerスクリプトで記述されています。心配する必要はありません。freemarker構文はほとんど人間が説明する言葉であり、学ぶのは非常に簡単です。

Struts 2テーマとテンプレートの使用

この記事では、エラーメッセージの場所をカスタマイズする新しいテーマを作成します。デフォルトの「xhtml」テーマでは、フィールド名の上にエラーメッセージが表示されます。

Struts2 xhtml theme

新しいテーマでは、入力フィールドの横にエラーメッセージが表示され、赤色で強調表示されます。

Struts2 example theme

1. テーマを抽出する

すべてのテーマファイルとテンプレートファイルは、struts2-core.jarのテンプレートフォルダー内にあります。ローカルドライブに抽出します。

ftlファイルは通常のテキストファイルであり、任意のテキストエディターで開くことができます。

2. 新しいテーマを作成する

新しいフォルダーを作成し、既存のすべてのxhtmlテンプレートファイル（ftl）をコピーして、新しいフォルダーをプロジェクトリソースフォルダーに配置します。

Struts 2 theme folder

Struts 2がテーマテンプレートフォルダーを見つける方法を理解するには、Struts 2 template directoryの選択を読んで詳細を確認してください。

多くの場合、理由がない限り、既存の「xhtml」テーマをコピーして変更するだけで済みます。

3. 新しいテーマを定義する

「struts.ui.theme」と「struts.ui.templateDir」を定義して、Struts2に新しいテーマとテンプレートフォルダーの場所を指示します。

struts.xml


    ...
    
    
    ...

これで、Struts 2に「s:textfield」が表示されると、デフォルトの「xhtml」テーマではなく「example」テーマが見つかります。詳細については、Struts 2 select a themeをお読みください。

4. テーマを変更する

既存のテンプレート（ftl）ファイルを変更するには、ビットfreemarker syntaxを知っている必要がある場合があります。

1. 新しいerror-message.ftlファイルを作成して、エラーメッセージを表示します。

error-message.ftl

<#--
    Only show message if errors are available.
    This will be done if ActionSupport is used.
-->
<#assign hasFieldErrors = parameters.name?? && fieldErrors?? && fieldErrors[parameters.name]??/>
<#if hasFieldErrors>
<#list fieldErrors[parameters.name] as error>
   ${error?html}<#t/>

2. エラーが存在する場合は、新しい「errorsBg」クラスを「td」タグに追加して、controlheader.ftlを変更します。

controlheader.ftl

<#include "/${parameters.templateDir}/example/controlheader-core.ftl" />
    
    class="errorsBg" <#t/>

<#if parameters.align??>
    align="${parameters.align?html}"<#t/>

><#t/>

3. 多くの不要なタグを削除してcontrolheader-core.ftlを変更し、エラーが存在する場合は新しい「errorsBg」クラスを「td」タグに追加します。

controlheader-core.ftl

<#--
    Only show message if errors are available.
    This will be done if ActionSupport is used.
-->
<#assign hasFieldErrors = parameters.name?? && fieldErrors?? && fieldErrors[parameters.name]??/>
<#--
    if the label position is top,
    then give the label its own row in the table
-->




-->
><#rt/>

<#if parameters.label??>
    
<#if parameters.id??>
        for="${parameters.id?html}" <#t/>

<#if hasFieldErrors>
        class="errorLabel"<#t/>
<#else>
        class="label"<#t/>

 ><#t/>

<#if parameters.required?default(false) && parameters.requiredposition?default("right") != 'right'>
    *<#t/>

${parameters.label?html}<#t/>
<#if parameters.required?default(false) && parameters.requiredposition?default("right") == 'right'>
    *<#t/>


<#t/>


<#lt/>

4. 「simple/text.ftl」の後に新しいテンプレートファイル「error-message.ftl」を追加して、text.ftlを変更します。

text.ftl

<#include "/${parameters.templateDir}/${parameters.theme}/controlheader.ftl" />
<#include "/${parameters.templateDir}/simple/text.ftl" />
<#include "/${parameters.templateDir}/example/error-message.ftl" />
<#include "/${parameters.templateDir}/xhtml/controlfooter.ftl" />

5. ビューページにCSSを挿入して、エラーメッセージをフォーマットします。

5. 完了し、保存すると、エラーメッセージが入力フィールドの横に表示され、赤色で強調表示されます。

この記事が、Struts2でテーマを作成または変更する方法に関する一般的な概念を提供できることを願っています。

TOC

Struts 2テーマの操作

Struts 2テーマとテンプレートの使用

Struts 2テーマとテンプレートの使用

1. テーマを抽出する

2. 新しいテーマを作成する

3. 新しいテーマを定義する

4. テーマを変更する

参照

Related