Streben 2 - Themen & Vorlagen

Bevor wir mit dem eigentlichen Tutorial für dieses Kapitel beginnen, wollen wir uns einige Definitionen ansehen, die von gegeben sind https://struts.apache.org- -

Sr.Nr.	Begriff & Beschreibung
1	TAG Ein kleiner Code, der in JSP, FreeMarker oder Velocity ausgeführt wird.
2	TEMPLATE Ein bisschen Code, normalerweise in FreeMarker geschrieben, der von bestimmten Tags (HTML-Tags) gerendert werden kann.
3	THEME Eine Sammlung von Vorlagen, die zusammen gepackt sind, um gemeinsame Funktionen bereitzustellen.

Ich würde auch vorschlagen, das Kapitel Struts2-Lokalisierung durchzugehen, da wir dasselbe Beispiel noch einmal nehmen werden, um unsere Übung durchzuführen.

Wenn Sie eine verwenden Struts 2Tags wie <s: submit ...>, <s: textfield ...> usw. auf Ihrer Webseite generiert das Struts 2-Framework HTML-Code mit einem vorkonfigurierten Stil und Layout. Struts 2 enthält drei integrierte Themen:

Sr.Nr.	Thema & Beschreibung
1	SIMPLE theme Ein minimales Thema ohne "Schnickschnack". Das Textfeld-Tag rendert beispielsweise das HTML-Tag <input /> ohne Beschriftung, Validierung, Fehlerberichterstattung oder andere Formatierungen oder Funktionen.
2	XHTML theme Dies ist das Standarddesign, das von Struts 2 verwendet wird. Es bietet alle Grundlagen, die das einfache Design bietet, und fügt verschiedene Funktionen hinzu, z. B. ein zweispaltiges Standardtabellenlayout für HTML, Beschriftungen für HTML, Validierung und Fehlerberichterstattung usw.
3	CSS_XHTML theme Dieses Thema bietet alle Grundlagen, die das einfache Thema bietet, und fügt verschiedene Funktionen wie das standardmäßige zweispaltige CSS-basierte Layout hinzu, wobei <div> für die HTML-Struts-Tags und Beschriftungen für jedes der HTML-Struts-Tags verwendet werden, die gemäß dem CSS-Stylesheet platziert werden .

Wie oben erwähnt, verwendet Struts 2 standardmäßig das xhtml-Thema, wenn Sie kein Thema angeben. Zum Beispiel dieses Struts 2-Auswahl-Tag -

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

generiert folgendes HTML-Markup -

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

Hier empinfo ist der in der Datei struts.xml definierte Aktionsname.

Themen auswählen

Sie können das Thema gemäß Struts 2 auf Tag-Basis angeben oder eine der folgenden Methoden verwenden, um anzugeben, welches Thema Struts 2 verwenden soll -

Das Themenattribut für das jeweilige Tag
Das Themenattribut auf dem umgebenden Formular-Tag eines Tags
Das seitenbezogene Attribut mit dem Namen "theme"
Das Attribut mit Anforderungsbereich mit dem Namen "theme"
Das Attribut mit Sitzungsbereich mit dem Namen "theme"
Das anwendungsbezogene Attribut mit dem Namen "theme"
Die Eigenschaft struts.ui.theme in struts.properties (standardmäßig xhtml)

Im Folgenden finden Sie die Syntax, um sie auf Tag-Ebene anzugeben, wenn Sie bereit sind, unterschiedliche Themen für unterschiedliche Tags zu verwenden.

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

Da es nicht sehr praktisch ist, Themen pro Tag zu verwenden, können wir die Regel einfach in angeben struts.properties Datei mit den folgenden Tags -

# 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

Das folgende Ergebnis haben wir aus dem Kapitel zur Lokalisierung aufgenommen, in dem wir das Standardthema mit einer Einstellung verwendet haben struts.ui.theme = xhtml im struts-default.properties Datei, die standardmäßig in der Datei struts2-core.xy.z.jar enthalten ist.

Wie funktioniert ein Thema?

Für ein bestimmtes Thema hat jedes Struts-Tag eine Vorlage wie s:textfield → text.ftl und s:password → password.ftl usw.

Diese Vorlagendateien werden in der Datei struts2-core.xy.z.jar komprimiert. Diese Vorlagendateien behalten für jedes Tag ein vordefiniertes HTML-Layout bei.

Auf diese Weise, Struts 2 Das Framework generiert den endgültigen HTML-Markup-Code mithilfe von Sturts-Tags und zugehörigen Vorlagen.

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

Standardvorlagen sind in FreeMarker geschrieben und haben eine Erweiterung .ftl.

Sie können Ihre Vorlagen auch mit Velocity oder JSP entwerfen und die Konfiguration in struts.properties mit entsprechend festlegen struts.ui.templateSuffix und struts.ui.templateDir.

Neue Themen erstellen

Der einfachste Weg, ein neues Thema zu erstellen, besteht darin, eine der vorhandenen Themen- / Vorlagendateien zu kopieren und die erforderlichen Änderungen vorzunehmen.

Beginnen wir mit der Erstellung eines Ordners namens templatein WebContent / WEBINF / classes und einem Unterordner mit dem Namen unseres neuen Themas. Zum Beispiel WebContent / WEB-INF / classes / template / mytheme .

Von hier aus können Sie Vorlagen von Grund auf neu erstellen oder die Vorlagen auch aus dem kopieren Struts2 distribution Hier können Sie sie in Zukunft nach Bedarf ändern.

Wir werden die vorhandene Standardvorlage ändern xhtmlzum Lernen. Kopieren wir nun den Inhalt von struts2-core-xyzjar / template / xhtml in unser Themenverzeichnis und ändern Sie nur die .ftl-Datei WebContent / WEBINF / classes / template / mytheme / control . Wenn wir control.ftl öffnen, werden die folgenden Zeilen angezeigt:

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

Lassen Sie uns die obige Datei ändern control.ftl folgenden Inhalt haben -

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

Wenn Sie überprüfen werden form.ftl dann wirst du das finden control.ftlwird in dieser Datei verwendet, aber form.ftl verweist auf diese Datei aus dem xhtml-Thema. Ändern wir es also wie folgt:

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

Ich gehe davon aus, dass Sie nicht viel Verständnis für das haben würden FreeMarker In der Vorlagensprache können Sie sich dennoch anhand der .ftl-Dateien ein Bild davon machen, was zu tun ist.

Lassen Sie uns jedoch die obigen Änderungen speichern und zu unserem Lokalisierungsbeispiel zurückkehren und das erstellen WebContent/WEB-INF/classes/struts.properties Datei mit folgendem Inhalt

# 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

Klicken Sie nun nach dieser Änderung mit der rechten Maustaste auf den Projektnamen und klicken Sie auf Export > WAR Fileum eine War-Datei zu erstellen. Stellen Sie diese WAR dann im Webanwendungsverzeichnis von Tomcat bereit. Starten Sie abschließend den Tomcat-Server und versuchen Sie, auf die URL zuzugreifenhttp://localhost:8080/HelloWorldStruts2. Daraufhin wird der folgende Bildschirm angezeigt:

Sie können einen Rahmen um die Formularkomponente sehen, der das Ergebnis der Änderung ist, die wir an unserem Thema vorgenommen haben, nachdem Sie es aus dem xhtml-Thema kopiert haben. Wenn Sie wenig Aufwand beim Erlernen von FreeMarker betreiben, können Sie Ihre Themen sehr einfach erstellen oder ändern.

Ich hoffe, dass Sie jetzt ein grundlegendes Verständnis haben Sturts 2 Themen und Vorlagen, nicht wahr?