Struts 2 - Temas y plantillas

Antes de comenzar el tutorial real para este capítulo, veamos algunas definiciones dadas por https://struts.apache.org-

No Señor	Término y descripción
1	TAG Un pequeño fragmento de código ejecutado desde JSP, FreeMarker o Velocity.
2	TEMPLATE Un fragmento de código, normalmente escrito en FreeMarker, que se puede representar mediante determinadas etiquetas (etiquetas HTML).
3	THEME Una colección de plantillas empaquetadas juntas para proporcionar una funcionalidad común.

También sugeriría revisar el capítulo de Localización de Struts2 porque tomaremos el mismo ejemplo una vez más para realizar nuestro ejercicio.

Cuando usas un Struts 2etiqueta como <s: submit ...>, <s: textfield ...> etc en su página web, el marco Struts 2 genera código HTML con un estilo y diseño preconfigurados. Struts 2 viene con tres temas integrados:

No Señor	Tema y descripción
1	SIMPLE theme Un tema minimalista sin "campanas y silbidos". Por ejemplo, la etiqueta de campo de texto muestra la etiqueta HTML <input /> sin etiqueta, validación, informe de errores o cualquier otro formato o funcionalidad.
2	XHTML theme Este es el tema predeterminado utilizado por Struts 2 y proporciona todos los conceptos básicos que proporciona el tema simple y agrega varias características como diseño de tabla estándar de dos columnas para el HTML, Etiquetas para cada uno de los HTML, Validación e informes de errores, etc.
3	CSS_XHTML theme Este tema proporciona todos los conceptos básicos que proporciona el tema simple y agrega varias características como el diseño estándar basado en CSS de dos columnas, usando <div> para las etiquetas HTML Struts, etiquetas para cada una de las etiquetas HTML Struts, colocadas de acuerdo con la hoja de estilo CSS .

Como se mencionó anteriormente, si no especifica un tema, Struts 2 usará el tema xhtml de forma predeterminada. Por ejemplo, esta etiqueta de selección de Struts 2:

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

genera el siguiente marcado 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>

aquí empinfo es el nombre de la acción definido en el archivo struts.xml.

Seleccionar temas

Puede especificar el tema según Struts 2, en base a la etiqueta o puede usar uno de los siguientes métodos para especificar qué tema debe usar Struts 2:

El atributo del tema en la etiqueta específica
El atributo de tema en la etiqueta de formulario circundante de una etiqueta
El atributo de ámbito de página denominado "tema"
El atributo de ámbito de solicitud denominado "tema"
El atributo de ámbito de sesión denominado "tema"
El atributo del ámbito de la aplicación denominado "tema"
La propiedad struts.ui.theme en struts.properties (por defecto es xhtml)

A continuación, se muestra la sintaxis para especificarlos a nivel de etiqueta si está dispuesto a usar diferentes temas para diferentes etiquetas:

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

Debido a que no es muy práctico usar temas por etiqueta, simplemente podemos especificar la regla en struts.properties archivo usando las siguientes etiquetas -

# 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

A continuación se muestra el resultado que recogimos del capítulo de localización donde usamos el tema predeterminado con una configuración struts.ui.theme = xhtml en struts-default.properties archivo que viene por defecto en el archivo struts2-core.xy.z.jar.

¿Cómo funciona un tema?

Para un tema determinado, cada etiqueta de struts tiene una plantilla asociada como s:textfield → text.ftl y s:password → password.ftl etc.

Estos archivos de plantilla vienen comprimidos en un archivo struts2-core.xy.z.jar. Estos archivos de plantilla mantienen un diseño HTML predefinido para cada etiqueta.

De este modo, Struts 2 framework genera código de marcado HTML final usando etiquetas Sturts y plantillas asociadas.

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

Las plantillas predeterminadas están escritas en FreeMarker y tienen una extensión .ftl.

También puede diseñar sus plantillas usando velocidad o JSP y, en consecuencia, establecer la configuración en struts.properties usando struts.ui.templateSuffix y struts.ui.templateDir.

Crear nuevos temas

La forma más sencilla de crear un tema nuevo es copiar cualquiera de los archivos de tema / plantilla existentes y realizar las modificaciones necesarias.

Comencemos creando una carpeta llamada templateen WebContent / WEBINF / classes y una subcarpeta con el nombre de nuestro nuevo tema. Por ejemplo, WebContent / WEB-INF / classes / template / mytheme .

Desde aquí, puede comenzar a crear plantillas desde cero, o también puede copiar las plantillas desde el Struts2 distribution donde puede modificarlos según sea necesario en el futuro.

Vamos a modificar la plantilla predeterminada existente. xhtmlcon el propósito de aprender. Ahora, copiemos el contenido de struts2-core-xyzjar / template / xhtml a nuestro directorio de temas y modifiquemos solo el archivo WebContent / WEBINF / classes / template / mytheme / control .ftl. Cuando abrimos control.ftl, que tendrá las siguientes líneas:

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

Cambiemos el archivo anterior control.ftl tener el siguiente contenido -

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

Si tu vas a comprobar form.ftl entonces encontrarás que control.ftlse utiliza en este archivo, pero form.ftl hace referencia a este archivo desde el tema xhtml. Así que cambiémoslo de la siguiente manera:

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

Supongo que no tendrías mucha comprensión de la FreeMarker lenguaje de plantilla, aún puede tener una buena idea de lo que se debe hacer mirando los archivos .ftl.

Sin embargo, guardemos los cambios anteriores, volvamos a nuestro ejemplo de localización y creemos el WebContent/WEB-INF/classes/struts.properties archivo con el siguiente contenido

# 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

Ahora, después de este cambio, haga clic derecho en el nombre del proyecto y haga clic en Export > WAR Filepara crear un archivo War. Luego, implemente este WAR en el directorio de aplicaciones web de Tomcat. Finalmente, inicie el servidor Tomcat e intente acceder a la URLhttp://localhost:8080/HelloWorldStruts2. Esto producirá la siguiente pantalla:

Puede ver un borde alrededor del componente de formulario que es el resultado del cambio que hicimos en nuestro tema después de copiarlo del tema xhtml. Si pone poco esfuerzo en aprender FreeMarker, podrá crear o modificar sus temas con mucha facilidad.

Espero que ahora tenga un conocimiento básico sobre Sturts 2 temas y plantillas, ¿no?

↰ Previous page Next page ↱