Struts 2 - Chủ đề & Mẫu

Trước khi bắt đầu hướng dẫn thực tế cho chương này, chúng ta hãy xem xét một số định nghĩa được đưa ra bởi https://struts.apache.org-

Sr.No	Thuật ngữ & Mô tả
1	TAG Một đoạn mã nhỏ được thực thi từ bên trong JSP, FreeMarker hoặc Velocity.
2	TEMPLATE Một chút mã, thường được viết bằng FreeMarker, có thể được hiển thị bằng các thẻ nhất định (thẻ HTML).
3	THEME Một bộ sưu tập các mẫu được đóng gói cùng nhau để cung cấp chức năng chung.

Tôi cũng khuyên bạn nên xem qua chương Bản địa hóa của Struts2 vì chúng ta sẽ lấy cùng một ví dụ một lần nữa để thực hiện bài tập của chúng ta.

Khi bạn sử dụng một Struts 2chẳng hạn như <s: submit ...>, <s: textfield ...> vv trong trang web của bạn, khung công tác Struts 2 tạo mã HTML với kiểu và bố cục được định cấu hình trước. Struts 2 đi kèm với ba chủ đề cài sẵn -

Sr.No	Chủ đề & Mô tả
1	SIMPLE theme Một chủ đề tối thiểu không có "chuông và còi". Ví dụ: thẻ textfield hiển thị thẻ HTML <input /> mà không có nhãn, xác thực, báo cáo lỗi hoặc bất kỳ định dạng hoặc chức năng nào khác.
2	XHTML theme Đây là chủ đề mặc định được Struts 2 sử dụng và cung cấp tất cả những điều cơ bản mà chủ đề đơn giản cung cấp và thêm một số tính năng như bố cục bảng hai cột tiêu chuẩn cho HTML, Nhãn cho từng HTML, Xác thực và báo cáo lỗi, v.v.
3	CSS_XHTML theme Chủ đề này cung cấp tất cả những điều cơ bản mà chủ đề đơn giản cung cấp và thêm một số tính năng như bố cục dựa trên CSS hai cột tiêu chuẩn, sử dụng <div> cho Thẻ HTML Struts, Nhãn cho mỗi Thẻ HTML Struts, được đặt theo biểu định kiểu CSS .

Như đã đề cập ở trên, nếu bạn không chỉ định chủ đề, thì Struts 2 sẽ sử dụng chủ đề xhtml theo mặc định. Ví dụ: thẻ chọn Struts 2 này -

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

tạo đánh dấu HTML sau -

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

Đây empinfo là tên hành động được định nghĩa trong tệp struts.xml.

Chọn chủ đề

Bạn có thể chỉ định chủ đề theo Struts 2, cơ sở thẻ hoặc bạn có thể sử dụng một trong các phương pháp sau để chỉ định chủ đề mà Struts 2 nên sử dụng:

Thuộc tính chủ đề trên thẻ cụ thể
Thuộc tính chủ đề trên thẻ biểu mẫu xung quanh của thẻ
Thuộc tính phạm vi trang có tên "chủ đề"
Thuộc tính phạm vi yêu cầu có tên "chủ đề"
Thuộc tính phạm vi phiên có tên "chủ đề"
Thuộc tính phạm vi ứng dụng có tên "chủ đề"
Thuộc tính struts.ui.theme trong struts.properties (mặc định là xhtml)

Sau đây là cú pháp để chỉ định chúng ở cấp thẻ nếu bạn muốn sử dụng các chủ đề khác nhau cho các thẻ khác nhau -

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

Bởi vì việc sử dụng các chủ đề trên cơ sở mỗi thẻ là không thực tế lắm, vì vậy, chúng tôi chỉ cần chỉ định quy tắc trong struts.properties 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

Sau đây là kết quả chúng tôi thu thập được từ chương bản địa hóa, nơi chúng tôi sử dụng chủ đề mặc định với cài đặt struts.ui.theme = xhtml trong struts-default.properties tệp có sẵn theo mặc định trong tệp struts2-core.xy.z.jar.

Làm thế nào một chủ đề hoạt động?

Đối với một chủ đề nhất định, mỗi thẻ struts có một mẫu được liên kết như s:textfield → text.ftl và s:password → password.ftl Vân vân.

Các tệp mẫu này được nén trong tệp struts2-core.xy.z.jar. Các tệp mẫu này giữ bố cục HTML được xác định trước cho mỗi thẻ.

Bằng cách này, Struts 2 framework tạo mã đánh dấu HTML cuối cùng bằng cách sử dụng thẻ Sturts và các mẫu được liên kết.

Struts 2 tags + Associated template file = Final HTML markup code.

Các mẫu mặc định được viết bằng FreeMarker và chúng có phần mở rộng .ftl.

Bạn cũng có thể thiết kế các mẫu của mình bằng cách sử dụng tốc độ hoặc JSP và theo đó đặt cấu hình trong struts.properties bằng cách sử dụng struts.ui.templateSuffix và struts.ui.templateDir.

Tạo chủ đề mới

Cách đơn giản nhất để tạo chủ đề mới là sao chép bất kỳ tệp chủ đề / mẫu hiện có nào và thực hiện các sửa đổi cần thiết.

Hãy để chúng tôi bắt đầu với việc tạo một thư mục có tên templatetrong các lớp WebContent / WEBINF / và một thư mục con có tên chủ đề mới của chúng tôi. Ví dụ: WebContent / WEB-INF / class / template / mytheme .

Từ đây, bạn có thể bắt đầu xây dựng các mẫu từ đầu hoặc bạn cũng có thể sao chép các mẫu từ Struts2 distribution nơi bạn có thể sửa đổi chúng theo yêu cầu trong tương lai.

Chúng tôi sẽ sửa đổi mẫu mặc định hiện có xhtmlcho mục đích học tập. Bây giờ, hãy sao chép nội dung từ struts2-core-xyzjar / template / xhtml vào thư mục chủ đề của chúng tôi và chỉ sửa đổi tệp WebContent / WEBINF / class / template / mytheme / control .ftl. Khi chúng ta mở control.ftl sẽ có các dòng sau:

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

Hãy để chúng tôi thay đổi tệp trên control.ftl có nội dung sau -

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

Nếu bạn sẽ kiểm tra form.ftl rồi bạn sẽ thấy rằng control.ftlđược sử dụng trong tệp này, nhưng form.ftl đang tham chiếu tệp này từ chủ đề xhtml. Vì vậy, hãy để chúng tôi 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>
#include "/${parameters.templateDir}/mytheme/control.ftl" />

Tôi cho rằng, bạn sẽ không hiểu nhiều về FreeMarker ngôn ngữ mẫu, bạn vẫn có thể biết rõ những việc cần làm bằng cách xem các tệp .ftl.

Tuy nhiên, hãy để chúng tôi lưu các thay đổi ở trên và quay lại ví dụ bản địa hóa của chúng tôi và tạo WebContent/WEB-INF/classes/struts.properties tập tin 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

Bây giờ sau khi thay đổi này, hãy nhấp chuột phải vào tên dự án và nhấp vào Export > WAR Fileđể tạo tệp Chiến tranh. Sau đó, triển khai WAR này trong thư mục ứng dụng web của Tomcat. Cuối cùng, khởi động máy chủ Tomcat và cố gắng truy cập URLhttp://localhost:8080/HelloWorldStruts2. Điều này sẽ tạo ra màn hình sau:

Bạn có thể thấy một đường viền xung quanh thành phần biểu mẫu là kết quả của sự thay đổi mà chúng tôi đã thực hiện trong chủ đề sau khi sao chép nó từ chủ đề xhtml. Nếu bạn bỏ chút công sức học FreeMarker, thì bạn sẽ có thể tạo hoặc sửa đổi các chủ đề của mình rất dễ dàng.

Tôi hy vọng rằng bây giờ bạn đã hiểu cơ bản về Sturts 2 chủ đề và mẫu, phải không?