Transcript FORM TAGS

CURSO STRUTS 2
UI TAGS
En el siguiente apartado del curso se mostrará el grupo de Tags UI de Struts 2, realizando una revisión de cada
una de ellas, así como el concepto theme para su representación.
La información que se estudiará en este apartado es:
•
¿Qué son las UI Tags?
•
Templates y Themes
•
Tipos de UI Tags
•
Form Tags
•
No-Form Tags
CURSO STRUTS 2
UI TAGS
¿QUÉ SON LAS UI TAGS?
Las UI Tags de Struts 2 es una librería de etiquetas, que facilita la creación del interfaz gráfico Web. Los tags de
la librería, son utilizados para representar componentes HTML en el interfaz.
isticas
erfaces reutilizables mediante tags, que permiten desarrollos
ntad a componentes usando themes y templates.
nguaje expresión OGNL compatible con JSTL, que permite acceder
opiedades como si fuesen un simple JavaBean.
otor independiente del tipo de tecnología de la Vista: JSP,
eMarker, Velocity, XSLT,…
sibilidad de utilizar tecnología AJAX, simplificando la creación de
caciones Web interactivas.
o de Interceptors para permitir la ejecución de tareas pesadas en
kground (execAndWait), evitar doble submit, o gestionar la
uridad.
Uso de las UI Tags
Para poder utilizar las UI Tags de Struts 2 sólo hay que invocar a la siguient
<%@ taglib prexif=”s” uri=”/struts-tags”%>
CURSO STRUTS 2
UI TAGS
TEMPLATES Y THEMES
Cada UI Tag del taglib de Struts 2 representa uno o varios elementos HTML. El framework permite seleccionar
con que formato se mostrará los elementos.
EJEMPLO
Mediante el uso de templates y themes en las UI Tags, Struts 2 permite modificar la representación de los
componentes HTML.
Templates
Themes
Templates
Un template es cada una de las distintas plantillas de visualización de dispone los
componentes creados mediante las UI tags.
Themes
Un theme es una colección de templates que mantienen el mismo diseño
(look & feel) para todos los componentes del Tag UI, empaquetándolos en un
solo theme.
Tipos Themes
Uso Themes
es de este theme se traducen en los componentes del Tag
Uso Themes
El theme por defecto de Struts 2 es el theme xh
CURSO STRUTS 2
UI TAGS
TIPOS DE UI TAGS
Las UI tags se pueden dividir en dos grupos en función de su cometido:
•Form Tags
El objetivo de las Form Tags, es crear campos formulario para la
entrada de datos (input, checkbox, radio,…).
•No-Form Tags
El cometido de las No-Form Tags, es realizar tareas de visualización HTML de compone
sean de tipo formulario, como por ejemplo mensajes y elementos estructurales de la p
Atributos comunes a las UI Tags
Independientemente del tipo de UI Tags existen toda una serie de atributos comunes a los tags.
•Atributos relacionados con el campo
•Atributos relacionados con los templates
•Atributos relacionados con eventos JavaScript.
•Atributos relacionados con las ayudas contextuales en los componentes HTML.
Descripción
Texto usado como ayuda contextual
La ruta al icono de ayuda contextual. El valor por defecto es
Atributo
theme
templateDir
template
Atributo
onclick
ondbclick
onmousedown
onmouseup
onmouseover
onmouseout
onfocus
onblur
onkeypress
onkeyup
onkeydown
onselect
CURSO STRUTS 2
UI TAGS
FORM TAGS
El objetivo de las Form Tags, es crear campos formulario para la entrada de datos (input, checkbox,
radio,…). La lista de los Form Tags son:
•checkbox
•checkboxlist
•combobox
•doubleselect
•head
•file
•form
•hidden
•label
•optgroup
•password
•radio
•reset
•select
•submit
•textarea
•textfield
•token
•updownselect
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag form
El tag form representa un formulario HTML, todos los atributos del tag son opcionales:
Atributos
Atributo
acceptcharset
Tipo Dato
String
Valor Defecto
action
enctype
method
namespace
String
String
String
Action actual
onsubmit
openTemplate
portletMode
String
String
String
target
validate
windowState
String
Boolean
String
post
Namespace
actual
false
Descripción
Juego de caracteres soportado por el formulario,
separado por comas o espacios.
El Action para enviar el formulario.
El atributo enctype del formulario.
El método de envio del formulario: post o get.
El namespace del Action.
Atributo JavaScript onsubmit.
Plantilla para representar el formulario.
Modo portlet para representar después del envío de
formulario,
El atributo target del formulario.
Indica si existe validación en el cliente.
Estado de la ventana a mostrar después de enviar el
formulario.
Ejemplo
<s:form action="Registro" namespace="/capitulo3">
...
</s:form>
Por defecto la representación del componente HTML form sería:
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tags textfield, password y hidden
Los tags textfield, password y hidden representan distintos componentes de un formulario HTML. El tag
textfield representa el campo input de tipo texto, el tag password representa el campo password y el tag
hidden representa el campo hidden campo hidden.
Atributos
Atributo
maxlength
Tipo Dato
Integer
Valor Defecto
readonly
size
Boolean
Integer
false
Descripción
Número máximo de caracteres se puede escribir en el
campo del formulario.
Indica si el campo de formulario es de solo lectura.
El atributo size del componente HTML
Ejemplo
<s:form>
<s:hidden name="id" value="5"/>
<s:textfield name="login" label="Login"
labelposition=”top”/>
<s:password name="password" label="Contraseña"
showPassword="true" labelposition=”top”/>
</s:form>
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag textarea
Este tag muestra un elemento textarea. Sus atributos son:
Atributos
Atributo
cols
readonly
rows
wrap
Tipo Dato
Integer
Boolean
Integer
Boolean
Valor Defecto
false
Descripción
El atributo HTML cols.
Indica si el textarea es de solo lectura.
El atributo HTML rows.
El atributo HTML wrap.
Ejemplo
<s:form>
<s:textarea name="descripcion" label="Descripción"
rows="10" cols="20"/>
</s:form>
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag file
El tag file presenta un campo de selección un documento para enviar a la aplicación.
Atributos
Atributo
accept
Tipo Dato
String
Valor Defecto
Descripción
Atributo HTML que indica que tipo de archivos mime
son aceptados
Ejemplo
<s:form enctype="multipart/form-data">
<s:file name="uploadFile" accept="text/html,text/plain" />
</s:form>
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag checkbox
El tag visualiza un elemento HTML checkbox
Atributos
Atributo
fieldValue
Tipo Dato
String
Valor Defecto
“true”
Descripción
El valor del checkbox.
Problema checkbox desmarcados
Los campos HTML checkbox si el estado es desmarcado no envía ninguna información y no se actualiza el
atributo correspondiente con el checkbox dado que no se accede a su método “set”.
Para solucionar esto, el tag checkbox de Struts 2, crea además del componente checkbox un campo hidden
para guardar el valor histórico del checkbox.
<s:checkbox name=”suscripcion” label=”Deseo suscribirme”/>
Se mostrará como campos HTML de la siguiente forma:
<input type=”checkbox” name=”suscripcion” value=”true” id=”ActionName_suscripcion”/>
<input type=”hidden” name=”_checkbox_suscripcion” value=”true”/>
De esta forma si el checkbox esta marcado ambos campos: checkbox y hidden enviarán true al Action
manteniendose el atributo igual a true, pero si se desmarca el checkbox se enviará solo el campo hidden con
valor a true, pero no el checkbox, con lo que el Action sabe que se ha desmarcado el checkbox asignado false
al atributo del Action. El responsable del correcto funcionamiento de los checkbox es el Interceptor
Checkbox.
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag submit
El tag submit representa un botón submit de un formulario. Este tag puede utilizar representarte de tres formas
diferenes en función del atributo type seleccionado:
• input, visualiza el componente como un input <input type=”submit” …/>
• button, visualiza el componente como un botón <button type=”submit” …/>
• image, visualiza el componente como una imagen <button type=”image” …/>
Atributos
Atributo
Tipo Dato
action
String
align
String
Valor Defecto
Descripción
El atributo HTML action.
El atributo HTML align.
method
String
Indica el atributo method
type
String
Ejemplo
<s:form>
<s:submit value=”Entrar”/>
</s:form>
input
Representa la visualización del componente (input, button o image).
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag reset
El tag reset crea un botón reset. Se puede visualizar de dos formas dependiendo el tipo seleccionado.
• input, visualiza el componente como un input <input type=”reset” …/>
• button, visualiza el componente como un botón <button type=”reset” …/>
Atributos
Atributo
action
align
method
type
Tipo Dato
String
String
String
String
Ejemplo
<s:form>
<s:reset value=”Limpiar”/>
</s:form>
Valor Defecto
Descripción
El atributo HTML action.
El atributo HTML align.
Indica el atributo method
input
Representa la visualización del componente (input o button).
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag label
El tag label, se representa como un elemento label HTML.
Atributos
Atributo
for
Tipo Dato
String
Valor Defecto
Descripción
El atributo HTML for.
Ejemplo
<s:label name="nombreLabel" value= "Texto Visualizar Label" />
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag head
El tag head, se utiliza para realizar la invocación a las hojas de estilos y javascript de la página, se debe ubicar
entre los tags <head> de HTML.
Atributos
No dispone de atributos propios
Ejemplo
<html>
<head>
<title>Ejemplo Página</title>
<s:head/>
</head>
<body>
...
</body>
</html>
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag token
El tag token crea un campo HTML hidden donde se le asigna el valor del token único, este campo es gestionado
por el framework para evitar doble submit en un formulario.
Atributos
No dispone de atributos propios
Ejemplo
<s:form>
<s:token />
</s:form>
CURSO STRUTS 2
UI TAGS
FORM TAGS
Atributos list, listKey y listValue
Los atributos list, listKey y listValue, son atributos importantes para tags como radio, combobox, select,
cheboxlist, doubleselect porque estos tags usan de estructura de tipo lista o array para su presentación
Por ejemplo el elemento HTML radio necesita tener más de una opción.
<input type="radio" name="ciudad" value="1">Madrid
<input type="radio" name="ciudad" value="2">Barcelona
<input type="radio" name="ciudad" value="3">Zaragoza
Lo misma situación se repite para los tags select, checkboxlist, combobox y doubleselect.
de Strings
Asignación de un Map
de Strings en uno de los
por ejemplo en el siguiente
de Strings:
celona’, ‘Zaragoza’}”/>
Se puede asignar un atributo Map para completar
los datos de un tag de UI de tipo lista.
Map<Integer, String> ciudades = new
HashMap<Integer, String>();
ciudades.put(1, “Madrid”);
ciudades.put(2, “Barcelona”);
ciudades.put(3, “Zaragoza”);
nterior tag sería:
Madrid</option>
”>Barcelona</option>
<s:select list=”ciudades”/>
Asignación de un Collection
objetos
Si en vez de utilizar array o Map d
nuestra intención es utilizar una
complejos existen métodos para
objeto será la clave (key), listKey
objeto será la etiqueta (value), lis
<s:select list=”ciudades” listKey=”
listValue=”nombre”/>
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag radio
El tag radio presenta un grupo de campos radio. El número de entradas de tipo radio será el mismo que el
tamaño de la lista/array con la que esté relleno, list. Los atributos del tag radio son:
Atributos
Atributo
Tipo Dato
Valor Defecto
Descripción
list*
String
Lista/array de elementos para crear los radio.
listKey
String
Atributo del objeto de la lista que representará en el elemento radio la
clave (key).
listValue
String
Atributo del objeto de la lista que representará en el elemento radio la
etiqueta (value)
Ejemplo
<s:form>
<s:radio name=”ciudad” labe=”Selecciona un destino”
list=”%{‘1’:’Madrid’, ‘2’:’Barcelona’, ‘3’:’Zaragoza’}”/>
</s:form>
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag select
El tag select visualiza un elemento HTML select, sus atributos son:
Atributos
Atributo
Tipo Dato
Valor Defecto
Descripción
list*
String
Lista/array de elementos para crear las opciones.
listKey
String
Atributo del objeto de la lista que representará en el elemento option la
clave (key).
listValue
String
Atributo del objeto de la lista que representará en el elemento option la
etiqueta (value)
emptyOption
Boolean
headerKey
String
Clave para el primer elemento de las options.
headerValue
String
Etiqueta para el primer elemento de la options.
multiple
Boolean
Indica si se puede seleccionar multiples options.
size
Integer
Número de options a mostrar.
false
Indica si se debe insertar un elemento vacio (--) después de la cabecera.
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag optgroup
El tag optgroup permite agrupar options de un campo select, cada option group tiene su propia fuente de
datos.
Atributos
Atributo
Tipo Dato
Valor Defecto
Descripción
list*
String
Lista/array de elementos para crear las opciones.
listKey
String
Atributo del objeto de la lista que representará en el elemento
option la clave (key).
listValue
String
Atributo del objeto de la lista que representará en el elemento
option la etiqueta (value)
Ejemplo
<s:form>
<s:select name=”ciudad” label=”Ciudad” emptyOption=”true”
list=%{‘1’:’Madrid’, ‘2’:’Aranjuez’}”/>
<s:optgroup label=”Barcelona” list=%{‘3’:’Barcelona’, ‘4’:’Mataró’}”/>
<s:optgroup label=”Zaragoza” list=%{‘5’:’Zaragoza’, ‘6’:’Calatayud’}”/>
</s:select>
</s:form>
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag checkboxlist
El checkboxlist tag presenta un group de elementos checkbox. Los atributos del tag son:
Atributos
Atributo
Tipo Dato
Valor Defecto
Descripción
list*
String
Lista/array de elementos para crear los checkbox.
listKey
String
Atributo del objeto de la lista que representará en el elemento
checkbox la clave (value).
listValue
String
Atributo del objeto de la lista que representará en el elemento
checkbox la etiqueta (label)
Ejemplo
<s:form>
<s:checkboxlist name=”ciudades” label=”Ciudades”
list=%{#application.ciudades}”
listKey=”idCiudad” listValue=”nombre”/>
</s:form>
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag combobox
El tag combobox dibuja un campo entrada texto (textfield) y un elemento select
Atributos
Atributo
Tipo Dato
Valor Defecto
Descripción
list*
String
Lista/array de elementos para crear las opciones.
listKey
String
Atributo del objeto de la lista que representará en el elemento
option la clave (key).
listValue
String
Atributo del objeto de la lista que representará en el elemento
option la etiqueta (value)
emptyOption
Boolean
headerKey
String
Clave para el primer elemento de las options, debe ser -1.
headerValue
String
Etiqueta para el primer elemento de la options.
maxlength
Integer
El atributo maxlength para el campo textfield.
size
Integer
Número de options a mostrar.
readonly
Boolean
false
false
Indica si se debe insertar un elemento vacio (--) después de la
cabecera.
Indica si el elmento es de solo lectura.
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag updownselect
El tag updownselect funciona como un checkboxlist, permitiendo seleccionar multiples options de un select,
añadiendo botones para permitir ordenar los options: arriba y abajo, además del botón para seleccionar todos.
Atributos
Atributo
Tipo Dato
Valor Defecto
Descripción
list*
String
Lista/array de elementos para crear las opciones.
listKey
String
Atributo del objeto de la lista que representará en el elemento
option la clave (key).
listValue
String
Atributo del objeto de la lista que representará en el elemento
option la etiqueta (value)
emptyOption
Boolean
headerKey
String
Clave para el primer elemento de las options, debe ser -1.
headerValue
String
Etiqueta para el primer elemento de la options.
allowModeDown
Boolean
true
Indica si se debe mostrar el botón “mover abajo”
moveDownLabel
String

Texto para mostrar en el botón “mover abajo”.
allowModeUp
Boolean
true
Indica si se debe mostrar el botón “mover arriba”
moveUpLabel
String

Texto para mostrar en el botón “mover arriba”.
false
Indica si se debe insertar un elemento vacio (--) después de la
cabecera.
CURSO STRUTS 2
UI TAGS
FORM TAGS
Tag doubleselect
El tag doubleselect representa dos elementos select que están enlazados, la selección del primer select
modifica los valores del segundo select
Atributos
Atributo
Tipo Dato
Valor Defecto
Descripción
list*
String
Lista/array de elementos para crear las opciones.
listKey
String
Atributo del objeto de la lista que representará en el elemento option la
clave (key).
listValue
String
Atributo del objeto de la lista que representará en el elemento option la
etiqueta (value)
emptyOption
Boolean
multiple
Boolean
Indica si se puede seleccionar multiples options.
size
Integer
Número de options a mostrar.
headerKey
String
Clave para el primer elemento de las options, debe ser -1.
headerValue
String
Etiqueta para el primer elemento de la options.
false
Indica si se debe insertar un elemento vacio (--) después de la
cabecera.
CURSO STRUTS 2
UI TAGS
NO-FORM TAGS
El cometido de las No-Form Tags, es mostrar realizar tareas de visualización HTML de componentes
que no sean de tipo formulario, como por ejemplo mensajes de error y elementos estructura de la
página (div).
La lista de los No-Form Tags es:
•
actionerror
•
actionmessage
•
component
•
div
•
fielderror
CURSO STRUTS 2
NO-FORM TAGS
Tag actionerror
Este tag muestra los action erros creados en el Actios mediante el método addActionError(String).
Atributos
No dispone de atributos propios
Ejemplo
<div class=”error”>
<s:actionerror/>
</div>
UI TAGS
CURSO STRUTS 2
UI TAGS
NO-FORM TAGS
Tag actionmessage
El tag actionmessage muestra por pantalla los action message creado en el Action invocando al método
addActionMessage(String).
Atributos
No dispone de atributos propios
Ejemplo
<div class=”info”>
<s:actionmessage/>
</div>
CURSO STRUTS 2
UI TAGS
NO-FORM TAGS
Tag component
El tag component realiza una interfaz de usuario personalizado especificado utilizando el widget de plantillas.
Se pueden pasar objetos adicionales a la plantilla utilizando el tag param.
Atributos
No dispone de atributos propios
Ejemplo
<s:component template="/jsp/component.jsp"/>
<s:component template="/jsp/component.jsp">
<s:param name="key1" value="value1"/>
<s:param name="key2" value="value2"/>
</s:component>
CURSO STRUTS 2
UI TAGS
NO-FORM TAGS
Tag div
Este tag crea una etiqueta <div> HTML. El theme más recomendado para utilizarlo es ajax, aunque se visualiza
también con el resto de themes.
Atributos
No dispone de atributos propios
Ejemplo
<s:div id=”miDiv”>
...
</s:div>
CURSO STRUTS 2
UI TAGS
NO-FORM TAGS
Tag fielderror
El tag fielderror muestra los errores de los campos de formulario que existen, para ello se utiliza el método
addFieldError(String fieldName, String errorMessage).
Ejemplo
<s:fielderror/>
<s:fielderror>
<s:param>field1</s:param>
<s:param>field2</s:param>
</s:fielderror>
<s:fielderror>
<s:param value="%{'campo1'}" />
<s:param value="%{'campo2'}" />
</s:fielderror>
<s:fielderror fieldName="campo1" />
CURSO STRUTS 2
UI TAGS
RECUERDA QUE…
Completado el apartado UI Tags debemos recordar los siguientes conceptos estudiados:
Definición
Diseño
Tipos