Travailler avec Struts 2 Theme

Utilisation du thème et du modèle Struts 2

Téléchargez-le -Struts2-Theme-Example.zip

Dans Struts2, lorsque vous insérez une balise d'interface utilisateur «s:textfield» dans la page HTML

La conception de la disposition des tableaux HTML à 2 colonnes suivantes sera générée automatiquement



  Username:

Struts 2 utilise la fonction «Thème et modèle» pour générer la disposition de tableau prédéfinie pour vous.

Voyons les séquences:

Les Struts 2 voient une balise «s:textfield».
Recherchez le thème déclaré (si aucun thème n'est déclaré, le thème xhtml par défaut sera sélectionné).
Recherchez le modèle du thème correspondant, par exemple "s:textfield → text.ftl", "s:password →password.ftl". Toute la mise en page HTML prédéfinie est définie dans le fichier ftl.
Liez la valeur dans le fichier de modèle.
Affichez le balisage HTML final.

Struts 2 balises + fichier de modèle de thème (ftl) = code de balisage HTML final.

Struts 2 utilise le framework freemaker comme moteur de modèle par défaut, tous les fichiers ftl sont écrits en script freemaker. Pas de souci, la syntaxe du freemarker est presque dans les mots humains, c'est assez facile à apprendre.

Utilisation du thème et du modèle Struts 2

Dans cet article, vous allez créer un nouveau thème pour personnaliser l'emplacement du message d'erreur. Dans le thème par défaut «xhtml», le message d'erreur apparaîtra au-dessus du nom du champ.

Struts2 xhtml theme

Dans le nouveau thème, le message d'erreur s'affiche à côté du champ de saisie et est mis en surbrillance avec une couleur rouge.

Struts2 example theme

1. Extraire le thème

Tous les fichiers de thème et de modèle se trouvent dans le dossier de modèlesstruts2-core.jar. Extrayez-le sur votre disque local.

Le fichier ftl est juste un fichier texte normal, vous pouvez l'ouvrir avec n'importe quel éditeur de texte préféré.

2. Créer un nouveau thème

Créez un nouveau dossier, copiez tous les fichiers de modèle xhtml (ftl) existants et placez le nouveau dossier dans le dossier de ressources du projet.

Struts 2 theme folder

Pour comprendre comment Struts 2 trouve le dossier de modèle de thème, lisez la sélection deStruts 2 template directory pour plus de détails.

Souvent, il vous suffit de copier et de modifier le thème «xhtml» existant, sauf si vous avez des raisons de ne pas le faire.

3. Définissez un nouveau thème

Définissez les «struts.ui.theme» et «struts.ui.templateDir» pour indiquer à Struts 2 où trouver votre nouveau thème et dossier de modèles.

struts.xml


    ...
    
    
    ...

Maintenant, lorsque Struts 2 voit un «s:textfield», il trouvera le thème «exemple» au lieu du thème par défaut «xhtml». LisezStruts 2 select a theme pour plus de détails.

4. Modifier le thème

Pour modifier le fichier de modèle existant (ftl), vous devrez peut-être connaître un bitfreemarker syntax.

1. Créez un nouveau fichiererror-message.ftl pour afficher le message d'erreur.

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. Modifiez lescontrolheader.ftl en ajoutant une nouvelle classe «errorsBg» à la balise «td» si des erreurs existent.

controlheader.ftl

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

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

><#t/>

3. Modifiez lescontrolheader-core.ftl en supprimant de nombreuses balises inutiles et ajoutez une nouvelle classe «errorsBg» à la balise «td» si des erreurs existent.

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. Modifiez lestext.ftl en ajoutant un nouveau fichier modèle «error-message.ftl» après les «simple/text.ftl».

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. Mettez le CSS dans votre page d'affichage pour formater le message d'erreur.

5. Terminé, enregistré, le message d'erreur s'affiche maintenant à côté du champ de saisie et surligné en rouge.

J'espère que cet article peut vous donner un concept général sur la façon de créer ou de modifier un thème dans Struts2.

TOC

Travailler avec Struts 2 Theme

Utilisation du thème et du modèle Struts 2

Utilisation du thème et du modèle Struts 2

1. Extraire le thème

2. Créer un nouveau thème

3. Définissez un nouveau thème

4. Modifier le thème

Référence

Related