Struts 2 - Thèmes et modèles

Avant de commencer le didacticiel de ce chapitre, examinons quelques définitions données par https://struts.apache.org-

Sr. Non	Terme et description
1	TAG Un petit morceau de code exécuté à partir de JSP, FreeMarker ou Velocity.
2	TEMPLATE Un peu de code, généralement écrit en FreeMarker, qui peut être rendu par certaines balises (balises HTML).
3	THEME Une collection de modèles regroupés pour fournir des fonctionnalités communes.

Je suggérerais également de parcourir le chapitre sur la localisation de Struts2, car nous reprendrons le même exemple une fois de plus pour effectuer notre exercice.

Lorsque vous utilisez un Struts 2comme <s: submit ...>, <s: textfield ...> etc dans votre page Web, le framework Struts 2 génère du code HTML avec un style et une mise en page préconfigurés. Struts 2 est livré avec trois thèmes intégrés -

Sr. Non	Thème et description
1	SIMPLE theme Un thème minimal sans "cloches et sifflets". Par exemple, la balise textfield rend la balise HTML <input /> sans étiquette, validation, rapport d'erreurs ou toute autre mise en forme ou fonctionnalité.
2	XHTML theme Il s'agit du thème par défaut utilisé par Struts 2 et fournit toutes les bases que le thème simple fournit et ajoute plusieurs fonctionnalités telles que la disposition de table standard à deux colonnes pour le HTML, les étiquettes pour chacun des HTML, la validation et les rapports d'erreurs, etc.
3	CSS_XHTML theme Ce thème fournit toutes les bases que le thème simple fournit et ajoute plusieurs fonctionnalités telles que la mise en page standard à deux colonnes basée sur CSS, en utilisant <div> pour les balises HTML Struts, des étiquettes pour chacune des balises HTML Struts, placées selon la feuille de style CSS .

Comme mentionné ci-dessus, si vous ne spécifiez pas de thème, Struts 2 utilisera le thème xhtml par défaut. Par exemple, cette balise de sélection Struts 2 -

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

génère le balisage HTML suivant -

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

Ici empinfo est le nom de l'action défini dans le fichier struts.xml.

Sélection de thèmes

Vous pouvez spécifier le thème selon Struts 2, sur la base des balises ou vous pouvez utiliser l'une des méthodes suivantes pour spécifier le thème que Struts 2 doit utiliser -

L'attribut de thème sur la balise spécifique
L'attribut de thème sur la balise de formulaire entourant une balise
L'attribut de portée de page nommé "thème"
L'attribut de portée de la demande nommé "thème"
L'attribut à portée de session nommé "thème"
L'attribut à l'échelle de l'application nommé "thème"
La propriété struts.ui.theme dans struts.properties (par défaut, xhtml)

Voici la syntaxe pour les spécifier au niveau des balises si vous souhaitez utiliser différents thèmes pour différentes balises -

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

Parce qu'il n'est pas très pratique d'utiliser des thèmes par tag, nous pouvons donc simplement spécifier la règle dans struts.properties fichier en utilisant les balises suivantes -

# 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

Voici le résultat que nous avons tiré du chapitre sur la localisation où nous avons utilisé le thème par défaut avec un paramètre struts.ui.theme = xhtml dans struts-default.properties fichier qui vient par défaut dans le fichier struts2-core.xy.z.jar.

Comment fonctionne un thème?

Pour un thème donné, chaque balise struts a un modèle associé comme s:textfield → text.ftl et s:password → password.ftl etc.

Ces fichiers de modèle sont compressés dans le fichier struts2-core.xy.z.jar. Ces fichiers modèles conservent une mise en page HTML prédéfinie pour chaque balise.

De cette façon, Struts 2 framework génère le code de balisage HTML final à l'aide des balises Sturts et des modèles associés.

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

Les modèles par défaut sont écrits en FreeMarker et ils ont une extension .ftl.

Vous pouvez également concevoir vos modèles à l'aide de la vitesse ou de JSP et définir en conséquence la configuration dans struts.properties à l'aide de struts.ui.templateSuffix et struts.ui.templateDir.

Créer de nouveaux thèmes

Le moyen le plus simple de créer un nouveau thème est de copier l'un des fichiers de thème / modèle existants et d'effectuer les modifications requises.

Commençons par créer un dossier appelé templatedans WebContent / WEBINF / classes et un sous-dossier avec le nom de notre nouveau thème. Par exemple, WebContent / WEB-INF / classes / template / mytheme .

À partir de là, vous pouvez commencer à créer des modèles à partir de zéro, ou vous pouvez également copier les modèles à partir du Struts2 distribution où vous pouvez les modifier si nécessaire à l'avenir.

Nous allons modifier le modèle par défaut existant xhtmlà des fins d'apprentissage. Maintenant, copions le contenu de struts2-core-xyzjar / template / xhtml dans notre répertoire de thèmes et modifions uniquement le fichier WebContent / WEBINF / classes / template / mytheme / control .ftl. Lorsque nous ouvrons control.ftl qui aura les lignes suivantes -

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

Changeons le fichier ci-dessus control.ftl avoir le contenu suivant -

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

Si vous allez vérifier form.ftl alors tu trouveras que control.ftlest utilisé dans ce fichier, mais form.ftl fait référence à ce fichier à partir du thème xhtml. Alors changeons-le comme suit -

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

Je suppose que vous n'auriez pas beaucoup de compréhension de la FreeMarker template, vous pouvez toujours avoir une bonne idée de ce qui doit être fait en regardant les fichiers .ftl.

Cependant, sauvegardons les modifications ci-dessus, revenons à notre exemple de localisation et créons le WebContent/WEB-INF/classes/struts.properties fichier avec le contenu suivant

# 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

Maintenant, après ce changement, faites un clic droit sur le nom du projet et cliquez sur Export > WAR Filepour créer un fichier War. Déployez ensuite ce WAR dans le répertoire webapps de Tomcat. Enfin, démarrez le serveur Tomcat et essayez d'accéder à l'URLhttp://localhost:8080/HelloWorldStruts2. Cela produira l'écran suivant -

Vous pouvez voir une bordure autour du composant de formulaire qui est le résultat du changement que nous avons effectué dans le thème après l'avoir copié à partir du thème xhtml. Si vous faites peu d'efforts pour apprendre FreeMarker, vous pourrez créer ou modifier vos thèmes très facilement.

J'espère que maintenant vous avez une compréhension de base sur Sturts 2 thèmes et modèles, n'est-ce pas?