Mit Struts 2 Theme & Template arbeiten

Arbeiten mit Struts 2 Theme & Template

Laden Sie es herunter -Struts2-Theme-Example.zip

Wenn Sie in Struts2 ein UI-Tag "s:textfield" in die HTML-Seite einfügen

Die folgenden 2 Spalten HTML-Tabellenlayout Design wird automatisch generiert



  Username:

Struts 2 verwendet die Funktion "Thema & Vorlage", um das vorgefertigte Tabellenlayout für Sie zu generieren.

Sehen wir uns die Sequenzen an:

Streben 2 sehen ein "s:textfield" -Tag.
Durchsuchen Sie das deklarierte Thema (wenn kein Thema deklariert ist, wird das Standard-XHTML-Thema ausgewählt).
Durchsuchen Sie die Vorlage des entsprechenden Themas, z. B. "s:textfield → text.ftl", "s:password →password.ftl". Das gesamte vordefinierte HTML-Layout ist in der FTP-Datei definiert.
Binden Sie den Wert in die Vorlagendatei.
Zeigen Sie das endgültige HTML-Markup an.

Struts 2 Tags + Vorlagendatei des Themas (ftl) = Endgültiger HTML-Markup-Code.

Struts 2 verwendet das Freemaker-Framework als Standard-Template-Engine. Alle FTP-Dateien werden in Freemaker-Skripten geschrieben. Keine Sorge, die Freemarker-Syntax ist fast menschlich erklärt, es ist ziemlich einfach zu lernen.

Arbeiten mit Struts 2 Theme & Template

In diesem Artikel erstellen Sie ein neues Thema, um die Position der Fehlermeldung anzupassen. Im Standarddesign "xhtml" wird die Fehlermeldung über dem Feldnamen angezeigt.

Struts2 xhtml theme

In einem neuen Thema wird die Fehlermeldung neben dem Eingabefeld angezeigt und rot hervorgehoben.

Struts2 example theme

1. Extrahieren Sie das Thema

Alle Design- und Vorlagendateien befinden sich im Vorlagenordnerstruts2-core.jar. Extrahieren Sie es auf Ihr lokales Laufwerk.

Die ftl-Datei ist nur eine normale Textdatei. Sie können sie mit beliebigen Texteditoren öffnen.

2. Erstelle ein neues Theme

Erstellen Sie einen neuen Ordner, kopieren Sie alle vorhandenen xhtml-Vorlagendateien (ftl) und legen Sie den neuen Ordner im Projektressourcenordner ab.

Struts 2 theme folder

Um zu verstehen, wie Struts 2 den Themenvorlagenordner findet, lesen Sie die Auswahl vonStruts 2 template directoryfür weitere Details.

Oft müssen Sie nur das vorhandene „xhtml“ -Thema kopieren und ändern, es sei denn, Sie haben Grund, dies nicht zu tun.

3. Definiere ein neues Theme

Definieren Sie "struts.ui.theme" und "struts.ui.templateDir", um Struts 2 mitzuteilen, wo sich Ihr neues Design und Ihr neuer Vorlagenordner befinden.

struts.xml


    ...
    
    
    ...

Wenn Struts 2 nun ein "s:textfield" sieht, findet es das "Beispiel" -Thema anstelle des Standardthemas "xhtml". Lesen SieStruts 2 select a theme für weitere Details.

4. Ändern Sie das Thema

Um die vorhandene Vorlagendatei (ftl) zu ändern, müssen Sie möglicherweise ein bisschenfreemarker syntax kennen.

1. Erstellen Sie eine neueerror-message.ftl-Datei, um die Fehlermeldung anzuzeigen.

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>
   ${error?html}<#t/>

2. Ändern Sie diecontrolheader.ftl, indem Sie dem Tag "td" eine neue Klasse "ErrorsBg" hinzufügen, wenn Fehler vorliegen.

controlheader.ftl

<#include "/${parameters.templateDir}/example/controlheader-core.ftl" />
    
    class="errorsBg" <#t/>

<#if parameters.align??>
    align="${parameters.align?html}"<#t/>

><#t/>

3. Ändern Sie diecontrolheader-core.ftl, indem Sie viele unnötige Tags löschen und dem Tag "td" eine neue Klasse "ErrorsBg" hinzufügen, wenn Fehler vorliegen.

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




-->
><#rt/>

<#if parameters.label??>
    
<#if parameters.id??>
        for="${parameters.id?html}" <#t/>

<#if hasFieldErrors>
        class="errorLabel"<#t/>
<#else>
        class="label"<#t/>

 ><#t/>

<#if parameters.required?default(false) && parameters.requiredposition?default("right") != 'right'>
    *<#t/>

${parameters.label?html}<#t/>
<#if parameters.required?default(false) && parameters.requiredposition?default("right") == 'right'>
    *<#t/>


<#t/>


<#lt/>

4. Ändern Sie dietext.ftl, indem Sie nach den "simple/text.ftl" eine neue Vorlagendatei "error-message.ftl" hinzufügen.

text.ftl

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

5. Fügen Sie das CSS in Ihre Ansichtsseite ein, um die Fehlermeldung zu formatieren.

5. Fertig, gespeichert, jetzt wird die Fehlermeldung neben dem Eingabefeld angezeigt und rot hervorgehoben.

Hoffe, dieser Artikel kann Ihnen ein allgemeines Konzept zum Erstellen oder Ändern eines Themas in Struts2 geben.

TOC

Mit Struts 2 Theme & Template arbeiten

Arbeiten mit Struts 2 Theme & Template

Arbeiten mit Struts 2 Theme & Template

1. Extrahieren Sie das Thema

2. Erstelle ein neues Theme

3. Definiere ein neues Theme

4. Ändern Sie das Thema

Referenz

Related