ダウンロードする – リンク://wp-content/uploads/2010/06/Struts2-Theme-Example.zip[Struts2-Theme-Example.zip]
Struts2では、HTMLページに「
s:textfield
」UIタグを配置すると
<s:textfield key="global.username" name="username"/>
次の2列のHTMLテーブルレイアウトデザインが自動的に生成されます
<tr> <td class="tdLabel"> <label for="validateUser__username" class="label">Username:</label> </td> <td> <input type="text" name="username" value="" id="validateUser__username"/> </td> </tr>
Struts 2は「Theme
シーケンスを見てみましょう:
-
Struts 2は ”
s:textfield
“タグを参照しています. -
宣言されたテーマを検索します(テーマが宣言されていない場合、デフォルトのxhtml
テーマが選択されます)。
-
対応するテーマのテンプレートを検索します(例: “** s:textfield – >
「text.ftl
」、「
s:password→ password.ftl ** 」となります。定義済みのHTMLレイアウトはすべてftlファイルで定義されています。
-
テンプレートファイルに値をバインドします.
-
最終的なHTMLマークアップを表示します.
Struts 2タグテーマテンプレートファイル(ftl)=最終HTMLマークアップコード。
Struts 2はデフォルトのテンプレートエンジンとしてfreemakerフレームワークを使用しています。すべてのftlファイルはフリーメーカースクリプトで記述されています。心配しなくても、freemarkerの構文は人間の言葉をほとんど説明しているので、学ぶのはとても簡単です。
Struts 2テーマを使って作業する
この記事では、エラーメッセージの場所をカスタマイズするための新しいテーマを作成します。デフォルトの “xhtml”テーマでは、エラーメッセージがフィールド名の上に表示されます。
新しいテーマでは、入力フィールドの横にエラーメッセージが表示され、赤色で強調表示されます。
1.テーマを抽出する
すべてのテーマとテンプレートファイルは、
struts2-core.jar
テンプレートフォルダ内にあります。それをローカルドライブに抽出します。
ftlファイルは通常のテキストファイルです。好みのテキストエディタで開くことができます。
2.新しいテーマを作成する
新しいフォルダを作成し、既存のすべてのxhtmlテンプレートファイル(ftl)をコピーして、新しいフォルダをプロジェクトリソースフォルダに配置します。
Struts 2がテーマテンプレートフォルダを見つける方法を理解するには、詳細についてhttp://struts.apache.org/2.0.14/docs/selecting-template-directory.html[Struts 2テンプレートディレクトリ]の選択を読んでください。
しばしば、あなたは理由がない限り、既存の “xhtml”テーマをコピーして変更するだけです。
3.新しいテーマを定義する
”
struts.ui.theme
“と ”
struts.ui.templateDir
“を定義して、Struts 2に新しいテーマとテンプレートフォルダの場所を教えてください。
<struts> ... <constant name="struts.ui.theme" value="mkyong"/> <constant name="struts.ui.templateDir" value="template"/> ... </struts>
今、Struts 2が ”
s:textfield
“を見ると、デフォルトの “xhtml”テーマの代わりに “mkyong”テーマが見つかります。詳細については、http://struts.apache.org/2.0.14/docs/selecting-themes.html[Struts 2テーマを選択する]をご覧ください。
4.テーマを変更する
既存のテンプレート(ftl)ファイルを変更するには、http://freemarker.sourceforge.net/[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 ?? <#include "/${parameters.templateDir}/mkyong/controlheader-core.ftl"/> <td <#if hasFieldErrors> class = "errorsBg" <#t/> </#if> <#if parameters.align ??> align = "$ {parameters.align?html}" <#t/> </#if> > <#t/>
{空} 3。多くの不要なものを削除して
controlheader-core.ftl
を変更する
エラーが存在する場合は、新しい “errorsBg”クラスを “td”タグに追加します。
-
controlheader-core.ftl **
<# - エラーがある場合にのみメッセージを表示します。 これは、ActionSupportが使用されている場合に行われます。 --> <#assign hasFieldErrors = parameters.name?? && fieldErrors?? && fieldErrors[parameters.name]??/> <#-- if the label position is top, then give the label its own row in the table --> <tr> <td class = "tdLabel <#t/> <# - <#if hasFieldErrors> errorsBg "<#t/> </#if> - > > <#rt/> <#if parameters.label ??> <label <#t/> <#if parameters.id ??> for = "$ {parameters.id?html}" <#t/> </#if> <#if hasFieldErrors> class = "errorLabel" <#t/> <#else> class = "label" <#t/> </#if> > <#t/> <#if parameters.required?default(false) {空} 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}/mkyong/error-message.ftl”/>
<#include “/${parameters.templateDir}/xhtml/controlfooter.ftl”/>
{空} 5。ビューページにCSSを挿入して、エラーメッセージをフォーマットします。
<style type=”text/css”>
.errorsBg{
background-color:#fdd;
color:red;
border: 1px solid;
}
padding:0px 8px; }
table{
border-spacing: 4px;
}
td{
padding:4px;
}
</style>
{空} 5。完了したら、入力フィールドの横にエラーメッセージが表示され、赤色で強調表示されます。 Struts2でテーマを作成したり変更したりする方法についての一般的な考え方を紹介したいと考えています。 === リファレンス . http://freemarker.sourceforge.net/ . http://www.vitarara.org/cms/struts__2__cookbook/creating__a__theme . http://struts.apache.org/2.0.14/docs/themes-and-templates.html . http://www.packtpub.com/article/themes-and-templates-with-apache-struts2 link://tag/struts2/[struts2]link://タグ/template/[template]link://tag/theme/[theme]