Struts 2 使用 FreeMarker 來作模板(Template) ，預設的模板是 xhtml (可以解開 struts2-core-2.3.x.x.jar 取得)，若要客制佈景(Theme)與模板(Template)，需要下列幾個步驟。

預計想要達成的效果有

1. Freemarker Template 中可以使用 Struts 的 tag

2. Customize Theme 客製顏色佈景

 

一、Freemarker Template 中可以使用 Struts 的 tag 實作步驟：

Step 01:  解壓 struts2-core-2.3.x.x.jar 取得 struts-tags.tld 並放在專案(project)的 WEB-INF 下，整個專案目錄如下

struts2-freemarker  

 

Step 02: 修改 web.xml  ，加入 JspSupportServlet 配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="struts_blank" version="2.4"
         xmlns="http://java.sun.com/xml/ns/j2ee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <display-name>Struts Blank-MIS</display-name>

  <filter>
    <filter-name>struts2</filter-name>
    <filter-class>
      org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
    </filter-class>
  </filter>

  <filter-mapping>
    <filter-name>struts2</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

    <servlet>  
        <servlet-name>JspSupportServlet</servlet-name>  
        <servlet-class>org.apache.struts2.views.JspSupportServlet</servlet-class>  
              <!--配置JspSupportServlet啟動-->  
        <load-on-startup>1</load-on-startup>  
    </servlet>  

  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
</web-app>

Step 03: 在 Freemarker Template 頁面，加入要使明的 taglib，這樣就可以在 template: fmLogin.ftl 中使用 struts2 內建的 tag 標籤，例：<@s.form action="Login.action">

<#assign s=JspTaglibs["/WEB-INF/struts-tags.tld"] />  
<html>  
<head>  
<title>登錄頁面</title>

<style type="text/css">
    .errorsBg{
        background-color:#fdd;
        color:red;    
        border: 1px solid;
    }
    
    .errorMessage{
        padding:0px 8px;
    }
    
    table{
        border-spacing: 4px;
    }
    td{
        padding:4px;
    }
</style>

</head>  
<body>  
    請輸入用戶名和密碼來登錄<br>  
    <@s.form action="Login.action">  
        <@s.textfield name="username" label="用戶名"/>  
        <@s.textfield name="password" label="密碼"/>  
        <@s.submit value="提交"/>  
    </@s.form>  
</body>  
</html>

 

二、 Customize Theme 客製顏色佈景，客制佈景以 polinwei 為例

Step 01: 建立 package: src/main/java/template/polinwei ，解壓 struts2-core-2.3.x.x.jar 取得 lib\struts2-core-2.3.24.1\template 下目錄 xhtml 的所有檔案放入此 polinwei 目錄下。

struts2-customize-theme  

Step 02: 在 struts.xml 定義要使用的 theme: struts.ui.theme 與 template 目錄: struts.ui.templateDir

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
        "http://struts.apache.org/dtds/struts-2.3.dtd">
<struts>
    <constant name="struts.enable.DynamicMethodInvocation" value="false"/>
    <constant name="struts.devMode" value="true"/>

    <constant name="struts.ui.theme" value="polinwei" />
    <constant name="struts.ui.templateDir" value="template" />   

    <package name="demo" namespace="/demo" extends="struts-default">
        <action name="Login" class="com.demo.FMTestAction">
            <result name="input" type="freemarker">/WEB-INF/demo/fmLogin.ftl</result>
            <result name="success" type="freemarker">/WEB-INF/demo/fmLoginSuccess.ftl</result>
        </action>

    </package>

    <!-- Add addition packages and configuration here. -->

</struts>

 

Step 03: 開始客制佈景

a. Create a new error-message.ftl file to display the error message.

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>
   <span class="errorMessage" errorFor="${parameters.id}">${error?html}</span><#t/>
</#list>
</#if>

 

b. Modify the controlheader.ftl by adding a new “errorsBg” class to “td” tag if errors exists.

controlheader.ftl

<#include "/${parameters.templateDir}/polinwei/controlheader-core.ftl" />
    <td
<#if hasFieldErrors>
    class="errorsBg" <#t/>
</#if>
<#if parameters.align??>
    align="${parameters.align?html}"<#t/>
</#if>
><#t/>

 

c. Modify the controlheader-core.ftl by delete many unnecessary tags and add a new “errorsBg” class to “td” tag if errors exists.

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
-->
<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) && parameters.requiredposition?default("right") != 'right'>
    <span class="required">*</span><#t/>
</#if>
${parameters.label?html}<#t/>
<#if parameters.required?default(false) && parameters.requiredposition?default("right") == 'right'>
 	<span class="required">*</span><#t/>
</#if>

</label><#t/>
</#if>

</td><#lt/>

 

d. Modify the text.ftl & password.ftl by adding a new template file “error-message.ftl” after the “simple/text.ftl“.

text.ftl

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

password.ftl

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

 

 

e. Put the CSS in your view page to format the error message.

<#assign s=JspTaglibs["/WEB-INF/struts-tags.tld"] />  
<html>  
<head>  
<title>登錄頁面</title>

<style type="text/css">
    .errorsBg{
        background-color:#fdd;
        color:red;    
        border: 1px solid;
    }
    
    .errorMessage{
        padding:0px 8px;
    }
    
    table{
        border-spacing: 4px;
    }
    td{
        padding:4px;
    }
</style>

</head>  
<body>  
    請輸入用戶名和密碼來登錄<br>  
    <@s.form action="Login.action">  
        <@s.textfield name="username" label="用戶名"/>  
        <@s.textfield name="password" label="密碼"/>  
        <@s.submit value="提交"/>  
    </@s.form>  
</body>  
</html> 

 

這樣就可以有自已客制的佈景了.

 

參考:

http://www.mkyong.com/struts2/working-with-struts-2-theme-template/

 

arrow
arrow
    文章標籤
    struts2 freemarker theme customize
    全站熱搜
    創作者介紹
    創作者 MIS 的頭像
    MIS

    MISTECH 技術手抄本

    MIS 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄