Theme và Template trong Struts 2

Struts 2 đi kèm với ba Theme đã được xây dựng sẵn, đó là: simple theme, xhtml theme (mặc định) và css_xhtml theme.

Nếu bạn không xác định Theme nào thì Struts 2 sẽ sử dụng xhtml theme. Ví dụ, thẻ select sau trong Struts 2:

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

sẽ tạo HTML markup sau (với empinfo là tên action được định nghĩa trong struts.xml file):

<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>

Lựa chọn Theme trong Struts 2

Bạn có các phương thức sau để xác định Theme:

• Thuộc tính theme trên tag cụ thể.
• Thuộc tính theme trên một thẻ form bao quanh một tag.
• Thuộc tính "theme" phạm vi page
• Thuộc tính "theme" phạm vi request
• Thuộc tính "theme" phạm vi session
• Thuộc tính "theme" phạm vi ứng dụng
• Thuộc tính struts.ui.theme trong struts.properties (mặc định là xhtml).

Dưới đây là cú pháp để xác định một Theme tại cấp độ thẻ nếu bạn muốn sử dụng các Theme khác nhau cho các thẻ khác nhau.

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

Vì việc sử dụng các Theme khác nhau cho mỗi thẻ cơ bản là không thực tiễn cho lắm, do đó chúng ta có thể xác định qui tắc trong struts.properties file bởi sử dụng các thẻ sau:

# 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

Tạo Theme mới trong Struts 2

Cách đơn giản nhất để tạo một Theme mới là sao chép bất cứ Theme/Template file nào đang tồn tại và thực hiện các sửa đổi cần thiết. Chúng ta tạo một template folder trong WebContent/WEB-INF/classes và một folder con cho Theme mới, ví dụ như WebContent/WEB-INF/classes/template/mytheme. Từ đây, bạn có thể bắt đầu xây dựng các Template hoặc sao chép các Template từ Struts 2 và sửa đổi chúng.

Với chương này, chúng ta sẽ sửa đổi xhtml. Đầu tiên sao chép nội dung từ struts2-core-x.y.z.jar/template/xhtml tới thư mục theme của chúng ta và chỉ sửa đổi WebContent/WEB-INF/classes/template/mytheme/control.ftl file. Khi bạn mở control.ftl, nó sẽ có dòng sau:

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

Thay đổi control.ftl trên để có nội dung sau:

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

Nếu bạn kiểm tra form.ftl thì bạn sẽ thấy rằng control.ftl đang được sử dụng trong file này, nhưng form.ftl đang tham chiếu file này từ xhtml theme. Do vậy chúng ta thay đổi nó như sau:

<#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>
>
<span style="color:red; font-weight:bold;"><#include "/${parameters.templateDir}/mytheme/control.ftl" /></span>

Lưu các thay đổi trên, và quay trở lại ví dụ trong chương Ví dụ i18n trong Struts 2 và tạo WebContent/WEB-INF/classes/struts.properties file với nội dung sau:

# 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