Struts 2 - Las etiquetas de formulario

La lista de formtags es un subconjunto de Struts UI Tags. Estas etiquetas ayudan en la representación de la interfaz de usuario requerida para las aplicaciones web de Struts y se pueden clasificar en tres categorías. Este capítulo lo llevará a través de los tres tipos de etiquetas de IU:

Etiquetas de interfaz de usuario simples

Ya hemos usado estas etiquetas en nuestros ejemplos, las repasaremos en este capítulo. Veamos una página de vista simpleemail.jsp con varias etiquetas de IU simples -

<%@ page language = "java" contentType = "text/html; charset = ISO-8859-1"
   pageEncoding = "ISO-8859-1"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
   <head>
      <s:head/>
      <title>Hello World</title>
   </head>
   
   <body>
      <s:div>Email Form</s:div>
      <s:text name = "Please fill in the form below:" />
      
      <s:form action = "hello" method = "post" enctype = "multipart/form-data">
         <s:hidden name = "secret" value = "abracadabra"/>
         <s:textfield key = "email.from" name = "from" />
         <s:password key = "email.password" name = "password" />
         <s:textfield key = "email.to" name = "to" />
         <s:textfield key = "email.subject" name = "subject" />
         <s:textarea key = "email.body" name = "email.body" />
         <s:label for = "attachment" value = "Attachment"/>
         <s:file name = "attachment" accept = "text/html,text/plain" />
         <s:token />
         <s:submit key = "submit" />
      </s:form>
      
   </body>
</html>

Si conoce HTML, todas las etiquetas utilizadas son etiquetas HTML muy comunes con un prefijo adicional s:junto con cada etiqueta y diferentes atributos. Cuando ejecutamos el programa anterior, obtenemos la siguiente interfaz de usuario siempre que haya configurado la asignación adecuada para todas las claves utilizadas.

Como se muestra, el s: head genera los elementos de hoja de estilo y JavaScript necesarios para la aplicación Struts2.

A continuación, tenemos los elementos s: div y s: text. El s: div se usa para representar un elemento HTML Div. Esto es útil para las personas a las que no les gusta mezclar HTML y etiquetas Struts. Para esas personas, tienen la opción de usar s: div para representar un div.

El texto s: como se muestra se utiliza para representar un texto en la pantalla.

A continuación, tenemos la etiqueta familiar s: form. La etiqueta s: form tiene un atributo de acción que determina dónde enviar el formulario. Debido a que tenemos un elemento de carga de archivos en el formulario, tenemos que establecer el enctype en multiparte. De lo contrario, podemos dejar este espacio en blanco.

Al final de la etiqueta del formulario, tenemos la etiqueta s: submit. Esto se utiliza para enviar el formulario. Cuando se envía el formulario, todos los valores del formulario se envían a la acción especificada en la etiqueta s: form.

Dentro del formulario s: tenemos un atributo oculto llamado secreto. Esto representa un elemento oculto en el HTML. En nuestro caso, el elemento "secreto" tiene el valor "abracadabra". Este elemento no es visible para el usuario final y se utiliza para llevar el estado de una vista a otra.

A continuación, tenemos las etiquetas s: label, s: textfield, s: password y s: textarea. Se utilizan para representar la etiqueta, el campo de entrada, la contraseña y el área de texto, respectivamente. Los hemos visto en acción en el ejemplo "Struts - Envío de correo electrónico".

Lo importante a tener en cuenta aquí es el uso del atributo "clave". El atributo "clave" se utiliza para obtener la etiqueta de estos controles del archivo de propiedades. Ya hemos cubierto esta característica en el capítulo de internacionalización de Localización de Struts2.

Luego, tenemos la etiqueta s: file que representa un componente de carga de archivos de entrada. Este componente permite al usuario cargar archivos. En este ejemplo, hemos utilizado el parámetro "accept" de la etiqueta s: file para especificar qué tipos de archivos pueden cargarse.

Finalmente tenemos la etiqueta s: token. La etiqueta del token genera un token único que se utiliza para averiguar si un formulario se ha enviado dos veces.

Cuando se representa el formulario, se coloca una variable oculta como valor del token. Digamos, por ejemplo, que el token es "ABC". Cuando se envía este formulario, Struts Fitler compara el token con el token almacenado en la sesión. Si coincide, elimina el token de la sesión. Ahora, si el formulario se vuelve a enviar accidentalmente (ya sea actualizando o presionando el botón Atrás del navegador), el formulario se volverá a enviar con "ABC" como token. En este caso, el filtro vuelve a comparar el token con el token almacenado en la sesión. Pero debido a que el token "ABC" se ha eliminado de la sesión, no coincidirá y el filtro Struts rechazará la solicitud.

Etiquetas de IU de grupo

Las etiquetas de IU de grupo se utilizan para crear un botón de opción y la casilla de verificación. Veamos una página de vista simpleHelloWorld.jsp con etiquetas de casilla de verificación y botón de radio -

<%@ page contentType = "text/html; charset = UTF-8"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>

<html>
   <head>
      <title>Hello World</title>
      <s:head />
   </head>
   
   <body>
      <s:form action = "hello.action">
         <s:radio label = "Gender" name = "gender" list="{'male','female'}" />
         <s:checkboxlist label = "Hobbies" name = "hobbies"
         list = "{'sports','tv','shopping'}" />
      </s:form>
      
   </body>
</html>

Cuando ejecutamos el programa anterior, nuestra salida se verá similar a la siguiente:

Veamos ahora el ejemplo. En el primer ejemplo, estamos creando un botón de radio simple con la etiqueta "Sexo". El atributo de nombre es obligatorio para la etiqueta del botón de opción, por lo que especificamos un nombre que es "género". Luego proporcionamos una lista para el género. La lista se completa con los valores "masculino" y "femenino". Por lo tanto, en la salida obtenemos un botón de opción con dos valores.

En el segundo ejemplo, estamos creando una lista de casillas de verificación. Esto es para recopilar los pasatiempos del usuario. El usuario puede tener más de un hobby y, por lo tanto, estamos usando la casilla de verificación en lugar del botón de radio. La casilla de verificación se rellena con la lista "deportes", "TV" y "Compras". Esto presenta los pasatiempos como una lista de casillas de verificación.

Seleccionar etiquetas de IU

Exploremos las diferentes variaciones de la etiqueta de selección que ofrece Struts. Veamos una página de vista simpleHelloWorld.jsp con etiquetas seleccionadas -

<%@ page contentType = "text/html; charset = UTF-8"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>

<html>
   <head>
      <title>Hello World</title>
      <s:head />
   </head>
   
   <body>
      <s:form action = "login.action">
         <s:select name = "username" label = "Username"
            list = "{'Mike','John','Smith'}" />

         <s:select label = "Company Office" name = "mySelection"
            value = "%{'America'}" list="%{#{'America':'America'}}">
            <s:optgroup label = "Asia" 
               list = "%{#{'India':'India','China':'China'}}" />
            <s:optgroup label = "Europe"
               list="%{#{'UK':'UK','Sweden':'Sweden','Italy':'Italy'}}" />
         </s:select>

         <s:combobox label = "My Sign" name = "mySign"
            list = "#{'aries':'aries','capricorn':'capricorn'}" headerkey = "-1" 
            headervalue = "--- Please Select ---" emptyOption = "true" value = "capricorn" />
         <s:doubleselect label = "Occupation" name = "occupation"
            list = "{'Technical','Other'}" doublename = "occupations2"
            doubleList="top == 'Technical' ? 
            {'I.T', 'Hardware'} : {'Accounting', 'H.R'}" />
      </s:form>
   </body>
</html>

Cuando ejecutamos el programa anterior, nuestra salida se verá similar a la siguiente:

Repasemos ahora los casos individuales, uno por uno.

Primero, la etiqueta de selección muestra el cuadro de selección HTML. En el primer ejemplo, estamos creando un cuadro de selección simple con el nombre "nombre de usuario" y la etiqueta "nombre de usuario". El cuadro de selección se completará con una lista que contiene los nombres Mike, John y Smith.
En el segundo ejemplo, nuestra empresa tiene oficinas centrales en Estados Unidos. También tiene oficinas globales en Asia y Europa. Queremos mostrar las oficinas en un cuadro de selección, pero queremos agrupar las oficinas globales por el nombre del continente. Aquí es donde el optgroup resulta útil. Usamos la etiqueta s: optgroup para crear un nuevo grupo. Le damos al grupo una etiqueta y una lista separada.
En el tercer ejemplo, se utiliza el cuadro combinado. Un cuadro combinado es una combinación de un campo de entrada y un cuadro de selección. El usuario puede seleccionar un valor del cuadro de selección, en cuyo caso el campo de entrada se rellena automáticamente con el valor que el usuario ha seleccionado. Si el usuario ingresa un valor directamente, no se seleccionará ningún valor del cuadro de selección.
En nuestro ejemplo, tenemos el cuadro combinado que enumera los signos solares. El cuadro de selección enumera solo cuatro entradas que permiten al usuario escribir su signo solar si no está en la lista. También agregamos una entrada de encabezado al cuadro de selección. La cabecera es la que se muestra en la parte superior del cuadro de selección. En nuestro caso, queremos mostrar "Seleccione". Si el usuario no selecciona nada, asumimos -1 como valor. En algunos casos, no queremos que el usuario seleccione un valor vacío. En esas condiciones, se establecería la propiedad "emptyOption" en falso. Finalmente, en nuestro ejemplo proporcionamos "capricornio" como valor predeterminado para el cuadro combinado.
En el cuarto ejemplo, tenemos una doble selección. Se utiliza una selección doble cuando desea mostrar dos cuadros de selección. El valor seleccionado en el primer cuadro de selección determina lo que aparece en el segundo cuadro de selección. En nuestro ejemplo, el primer cuadro de selección muestra "Técnico" y "Otro". Si el usuario selecciona Técnico, mostraremos TI y Hardware en el segundo cuadro de selección. De lo contrario, mostraremos Contabilidad y RRHH. Esto es posible usando los atributos "list" y "doubleList" como se muestra en el ejemplo.

En el ejemplo anterior, hicimos una comparación para ver si el cuadro de selección superior es igual a Técnico. Si es así, mostramos TI y hardware.

También necesitamos dar un nombre para el cuadro superior ("nombre = 'Ocupaciones') y el cuadro inferior (doubleName = 'ocupaciones2')

↰ Previous page Next page ↱