Struts 2 - ธีมและเทมเพลต

ก่อนที่จะเริ่มบทช่วยสอนจริงสำหรับบทนี้ให้เราพิจารณาคำจำกัดความที่กำหนดโดย https://struts.apache.org-

ซีเนียร์ No	ข้อกำหนดและคำอธิบาย
1	TAG โค้ดชิ้นเล็ก ๆ ที่เรียกใช้งานจากภายใน JSP, FreeMarker หรือ Velocity
2	TEMPLATE บิตของโค้ดมักเขียนใน FreeMarker ซึ่งสามารถแสดงผลโดยแท็กบางแท็ก (แท็ก HTML)
3	THEME ชุดแม่แบบที่รวมเข้าด้วยกันเพื่อมอบฟังก์ชันการทำงานทั่วไป

ฉันขอแนะนำให้อ่านบทStruts2 Localizationเพราะเราจะใช้ตัวอย่างเดียวกันอีกครั้งในการออกกำลังกายของเรา

เมื่อคุณใช้ไฟล์ Struts 2แท็กเช่น <s: submit ... >, <s: textfield ... > ฯลฯ ในหน้าเว็บของคุณเฟรมเวิร์ก Struts 2 จะสร้างโค้ด HTML ด้วยรูปแบบและเค้าโครงที่กำหนดไว้ล่วงหน้า Struts 2 มาพร้อมกับสามธีมในตัว -

ซีเนียร์ No	ธีมและคำอธิบาย
1	SIMPLE theme ธีมมินิมอลที่ไม่มี "ระฆังและนกหวีด" ตัวอย่างเช่นแท็กฟิลด์ข้อความแสดงผลแท็ก HTML <input /> โดยไม่มีป้ายกำกับการตรวจสอบความถูกต้องการรายงานข้อผิดพลาดหรือการจัดรูปแบบหรือฟังก์ชันอื่น ๆ
2	XHTML theme นี่เป็นธีมเริ่มต้นที่ Struts 2 ใช้และมีพื้นฐานทั้งหมดที่ชุดรูปแบบธรรมดามีให้และเพิ่มคุณสมบัติต่างๆเช่นเค้าโครงตารางสองคอลัมน์มาตรฐานสำหรับ HTML, ป้ายกำกับสำหรับ HTML แต่ละรายการ, การตรวจสอบความถูกต้องและการรายงานข้อผิดพลาดเป็นต้น
3	CSS_XHTML theme ชุดรูปแบบนี้ให้ข้อมูลพื้นฐานทั้งหมดที่ชุดรูปแบบเรียบง่ายมีให้และเพิ่มคุณสมบัติต่างๆเช่นรูปแบบที่ใช้ CSS มาตรฐานสองคอลัมน์โดยใช้ <div> สำหรับแท็ก HTML Struts ป้ายกำกับสำหรับแท็ก HTML Struts แต่ละแท็กที่วางตามสไตล์ชีท CSS .

ตามที่กล่าวไว้ข้างต้นหากคุณไม่ได้ระบุธีม Struts 2 จะใช้ธีม xhtml ตามค่าเริ่มต้น ตัวอย่างเช่นแท็กเลือก Struts 2 นี้ -

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

สร้างมาร์กอัป HTML ต่อไปนี้ -

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

ที่นี่ empinfo คือชื่อการดำเนินการที่กำหนดในไฟล์ struts.xml

การเลือกธีม

คุณสามารถระบุธีมตาม Struts 2 พื้นฐานแท็กหรือคุณสามารถใช้วิธีใดวิธีหนึ่งต่อไปนี้เพื่อระบุว่าควรใช้ธีม Struts 2 -

แอตทริบิวต์ธีมบนแท็กเฉพาะ
แอ็ตทริบิวต์ธีมบนแท็กแบบฟอร์มโดยรอบของแท็ก
แอตทริบิวต์ขอบเขตหน้าชื่อ "ธีม"
แอตทริบิวต์ request-scoped ชื่อ "theme"
แอตทริบิวต์ขอบเขตเซสชันชื่อ "ธีม"
แอตทริบิวต์ที่กำหนดขอบเขตแอปพลิเคชันชื่อ "ธีม"
คุณสมบัติ struts.ui.theme ใน struts.properties (ค่าดีฟอลต์คือ xhtml)

ต่อไปนี้เป็นไวยากรณ์ที่จะระบุในระดับแท็กหากคุณต้องการใช้ธีมที่แตกต่างกันสำหรับแท็กต่างๆ -

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

เนื่องจากการใช้ธีมตามแท็กนั้นไม่ค่อยเป็นประโยชน์ดังนั้นเราสามารถระบุกฎในรูปแบบ struts.properties ไฟล์โดยใช้แท็กต่อไปนี้ -

# 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

ต่อไปนี้เป็นผลลัพธ์ที่เราเลือกจากบทการแปลภาษาที่เราใช้ธีมเริ่มต้นด้วยการตั้งค่า struts.ui.theme = xhtml ใน struts-default.properties ไฟล์ที่มาตามค่าเริ่มต้นในไฟล์ struts2-core.xy.z.jar

ธีมทำงานอย่างไร?

สำหรับธีมที่กำหนดทุกแท็ก struts จะมีเทมเพลตที่เกี่ยวข้องเช่น s:textfield → text.ftl และ s:password → password.ftl เป็นต้น

ไฟล์เทมเพลตเหล่านี้ถูกบีบอัดในไฟล์ struts2-core.xy.z.jar ไฟล์เทมเพลตเหล่านี้เก็บเค้าโครง HTML ที่กำหนดไว้ล่วงหน้าสำหรับแต่ละแท็ก

ทางนี้, Struts 2 เฟรมเวิร์กสร้างโค้ดมาร์กอัป HTML สุดท้ายโดยใช้แท็ก Sturts และเทมเพลตที่เกี่ยวข้อง

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

เทมเพลตเริ่มต้นเขียนใน FreeMarker และมีส่วนขยาย .ftl.

คุณยังสามารถออกแบบเทมเพลตของคุณโดยใช้ velocity หรือ JSP และตั้งค่าคอนฟิกใน struts.properties โดยใช้ struts.ui.templateSuffix และ struts.ui.templateDir.

การสร้างธีมใหม่

วิธีที่ง่ายที่สุดในการสร้างธีมใหม่คือการคัดลอกไฟล์ธีม / เทมเพลตที่มีอยู่และทำการแก้ไขที่จำเป็น

เริ่มต้นด้วยการสร้างโฟลเดอร์ชื่อ templateในWebContent / WEBINF / คลาสและโฟลเดอร์ย่อยที่มีชื่อธีมใหม่ของเรา ยกตัวอย่างเช่นWebContent / WEB-INF / เรียน / แม่แบบ / mytheme

จากที่นี่คุณสามารถเริ่มสร้างเทมเพลตตั้งแต่เริ่มต้นหรือคุณสามารถคัดลอกเทมเพลตจากไฟล์ Struts2 distribution ซึ่งคุณสามารถแก้ไขได้ตามต้องการในอนาคต

เรากำลังจะแก้ไขเทมเพลตเริ่มต้นที่มีอยู่ xhtmlเพื่อการเรียนรู้ ตอนนี้ให้เราคัดลอกเนื้อหาจากstruts2-core-xyzjar / template / xhtmlไปยังไดเร็กทอรีธีมของเราและแก้ไขเฉพาะไฟล์ WebContent / WEBINF / class / template / mytheme / control .ftl เมื่อเราเปิด control.ftl ซึ่งจะมีบรรทัดดังนี้ -

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

ให้เราเปลี่ยนไฟล์ด้านบน control.ftl มีเนื้อหาดังต่อไปนี้ -

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

ถ้าคุณจะตรวจสอบ form.ftl แล้วคุณจะพบว่า control.ftlถูกใช้ในไฟล์นี้ แต่ form.ftl อ้างถึงไฟล์นี้จากธีม xhtml ให้เราเปลี่ยนเป็นดังนี้ -

<#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" />

ฉันคิดว่าคุณคงไม่มีความเข้าใจเกี่ยวกับไฟล์ FreeMarker ภาษาเทมเพลตคุณยังสามารถเข้าใจสิ่งที่ต้องทำโดยดูที่ไฟล์. ftl

อย่างไรก็ตามให้เราบันทึกการเปลี่ยนแปลงข้างต้นและกลับไปที่ตัวอย่างการแปลภาษาของเราและสร้างไฟล์ WebContent/WEB-INF/classes/struts.properties ไฟล์ที่มีเนื้อหาต่อไปนี้

# 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

หลังจากการเปลี่ยนแปลงนี้คลิกขวาที่ชื่อโครงการแล้วคลิก Export > WAR Fileเพื่อสร้างไฟล์ War จากนั้นปรับใช้ WAR นี้ในไดเร็กทอรี webapps ของ Tomcat สุดท้ายเริ่มเซิร์ฟเวอร์ Tomcat และพยายามเข้าถึง URLhttp://localhost:8080/HelloWorldStruts2. สิ่งนี้จะสร้างหน้าจอต่อไปนี้ -

คุณสามารถเห็นเส้นขอบรอบองค์ประกอบฟอร์มซึ่งเป็นผลมาจากการเปลี่ยนแปลงที่เราทำในธีมนอกหลังจากคัดลอกจากธีม xhtml หากคุณใช้ความพยายามเพียงเล็กน้อยในการเรียนรู้ FreeMarker คุณจะสามารถสร้างหรือปรับเปลี่ยนธีมของคุณได้อย่างง่ายดาย

ฉันหวังว่าตอนนี้คุณมีความเข้าใจพื้นฐานเกี่ยวกับ Sturts 2 ธีมและเทมเพลตใช่ไหม