UI TAGSCURSO STRUTS 2 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í

UI TAGSCURSO STRUTS 2

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


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

Carácteristicas•Interfaces reutilizables mediante tags, que permiten desarrollos orientad a componentes usando themes y templates.

•Lenguaje expresión OGNL compatible con JSTL, que permite acceder a propiedades como si fuesen un simple JavaBean.

•Motor independiente del tipo de tecnología de la Vista: JSP, FreeMarker, Velocity, XSLT,…

•Posibilidad de utilizar tecnología AJAX, simplificando la creación de aplicaciones Web interactivas.

•Uso de Interceptors para permitir la ejecución de tareas pesadas en background (execAndWait), evitar doble submit, o gestionar la seguridad.

Uso de las UI TagsPara poder utilizar las UI Tags de Struts 2 sólo hay que invocar a la siguiente directiva:<%@ taglib prexif=”s” uri=”/struts-tags”%>

Para cualquier parámetro de los tags se pueden asignar distintos valores: valor estático o expresión OGNL. Para que se evalúen el valor del atributo del tag, como una expresión OGNL es necesario que el valor esté delimitado por la sintaxis de OGNL, %{ }.. . . label=”usuario” . . . //label = varlo fijo “usuario”. . . label=”%{usuario}” . . . //label = valor OGNL “usuario” (dinámico). . . label=”%{#session.usuario}” . . . //label = valor OGNL “#session.usuario”. . . label=”%{5 + 5}” . . . //label = valor OGNL igual a 10


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

ThemesThemesUn 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

Uso ThemesEl theme por defecto de Struts 2 es el theme xhtml, para cambiar el theme de un cualquier elemento de la UI Tag hay distintas posibilidades:

•Utilizar el atributo theme de cualquier tag.<s:textfield theme=”simple” name=”usuario”/>

•Si el atributo theme no se configura en ningún elemento del formulario, entonces se utiliza el theme del elemento form para todos los componentes del formulario.<s:form theme="css_xhtml">

<s:checkbox theme="simple" name="uno" label="Uno"/><s:checkbox name="dos" label="Dos"/><s:checkbox name="tres" label="Tres"/><s:checkbox theme="simple" name="desconocido" label="Desconocido" value="true" disabled="true" /><s:submit/>

</s:form>

•Añadiendo un atributo llamado theme en cualquiera de los objetos implícitos de JSP: page, request, session o application.

•Asignado un theme a la propiedad struts.ui.theme en la configuración del framework (struts.properties)struts.ui.theme = css_xhtml

TemplatesUn template es cada una de las distintas plantillas de visualización de dispone los componentes creados mediante las UI tags.

Tipos Themes•simple, los templates de este theme se traducen en los componentes del Tag UI en los elementos HTML equivalentes más simples, ignorando el atributo label.El theme por defecto de Struts 2 es el theme xhtml, para cambiar el theme de un cualquier elemento de la UI Tag hay distintas posibilidades:

•xhtml, este es el theme por defecto. Los templates de esta colección proveen formateo automático de los elementos HTML diseñado mediante tablas (table).

•css_xhtml, los templates de este theme son similares al del theme xhtml, pero están preparados para utilizar diseños CSS.

•ajax, este tema contiene templates basados en el tema xhtml pero tiene características avanzadas de la tecnología AJAX.


TIPOS DE UI TAGS

Las UI tags se pueden dividir en dos grupos en función de su cometido:

•Form Tags

•No-Form Tags

Atributos comunes a las UI TagsIndependientemente 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.

Atributo Tipo Dato Descripcióntheme String Tema que debe utilizarse para pintar el componente. El valor por

defecto es xhtml, indicado en el default.properties.templateDir String Sobrescribe el nombre del directorio por defecto donde se encuentran

los templates.template String Define template a utilizar para representar el componente HTML.

Atributo Tipo Dato Descripciónonclick String Atributo JavaScript onclickondbclick String Atributo JavaScript ondbclickonmousedown String Atributo JavaScript onmousedownonmouseup String Atributo JavaScript onmouseuponmouseover String Atributo JavaScript onmouseoveronmouseout String Atributo JavaScript onmouseoutonfocus String Atributo JavaScript onfocusonblur String Atributo JavaScript onbluronkeypress String Atributo JavaScript onkeypressonkeyup String Atributo JavaScript onkeyuponkeydown String Atributo JavaScript onkeydownonselect String Atributo JavaScript onselectonchange String Atributo JavaScript onchange

Atributo Tipo Dato Descripcióntooltip String Texto usado como ayuda contextualtooltipIconPath String La ruta al icono de ayuda contextual. El valor por defecto es

/struts/static/tooltip/tooltip.giftooltipDelay String El retardo en milisegundos que tarda en mostrarse la ayuda contextual

al pasar el ratón sobre el icono del tooltip. Por defecto es 500.

El objetivo de las Form Tags, es crear campos formulario para la entrada de datos (input, checkbox, radio,…).

El cometido de las No-Form Tags, es realizar tareas de visualización HTML de componentes que no sean de tipo formulario, como por ejemplo mensajes y elementos estructurales de la página.


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


FORM TAGS

Tag formEl tag form representa un formulario HTML, todos los atributos del tag son opcionales:

AtributosAtributo Tipo Dato Valor Defecto Descripción

acceptcharset String Juego de caracteres soportado por el formulario, separado por comas o espacios.

action String Action actual El Action para enviar el formulario.enctype String El atributo enctype del formulario.method String post El método de envio del formulario: post o get.namespace Namespace

actualEl namespace del Action.

onsubmit String Atributo JavaScript onsubmit.openTemplate String Plantilla para representar el formulario.portletMode String Modo portlet para representar después del envío de

formulario,target String El atributo target del formulario.validate Boolean false Indica si existe validación en el cliente.windowState String 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:<form id="..." name="..." method="POST"

action="capitulo3/Registro.action" onsubmit="return true;"><table class="wwFormTable">

...</table>

</form>


FORM TAGS

Tags textfield, password y hiddenLos 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

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>

Atributo Tipo Dato Valor Defecto Descripciónmaxlength Integer Número máximo de caracteres se puede escribir en el

campo del formulario.readonly Boolean false Indica si el campo de formulario es de solo lectura.size Integer El atributo size del componente HTML


FORM TAGS

Tag textareaEste tag muestra un elemento textarea. Sus atributos son:

Atributos

Ejemplo<s:form>

<s:textarea name="descripcion" label="Descripción" rows="10" cols="20"/>

</s:form>

Atributo Tipo Dato Valor Defecto Descripcióncols Integer El atributo HTML cols.readonly Boolean false Indica si el textarea es de solo lectura.rows Integer El atributo HTML rows.wrap Boolean El atributo HTML wrap.


FORM TAGS

Tag fileEl tag file presenta un campo de selección un documento para enviar a la aplicación.

Atributos

Ejemplo<s:form enctype="multipart/form-data">

<s:file name="uploadFile" accept="text/html,text/plain" /></s:form>

Atributo Tipo Dato Valor Defecto Descripciónaccept String Atributo HTML que indica que tipo de archivos mime

son aceptados


FORM TAGS

Tag checkboxEl tag visualiza un elemento HTML checkbox

Atributos

Problema checkbox desmarcadosLos 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.

Atributo Tipo Dato Valor Defecto Descripción

fieldValue String “true” El valor del checkbox.


FORM TAGS

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

Ejemplo<s:form>

<s:submit value=”Entrar”/></s:form>


action String El atributo HTML action.

align StringEl atributo HTML align.

method StringIndica el atributo method

type String input Representa la visualización del componente (input, button o image).


FORM TAGS

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

Ejemplo<s:form>

<s:reset value=”Limpiar”/></s:form>

Atributo Tipo Dato Valor Defecto Descripciónaction String El atributo HTML action.align String El atributo HTML align.method String Indica el atributo methodtype String input

Representa la visualización del componente (input o button).


FORM TAGS

Tag labelEl tag label, se representa como un elemento label HTML.

Atributos

Ejemplo<s:label name="nombreLabel" value= "Texto Visualizar Label" />


for String El atributo HTML for.


FORM TAGS

Tag headEl 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.

AtributosNo dispone de atributos propios

Ejemplo<html><head>

<title>Ejemplo Página</title><s:head/>

</head><body>

...</body>

</html>


FORM TAGS

Tag tokenEl 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.


Ejemplo<s:form>

<s:token /></s:form>


FORM TAGS

Atributos list, listKey y listValueLos 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.

Asignación de un Array de StringsSe puede mostrar una array de Strings en uno de los componentes mencionados, por ejemplo en el siguiente tag select se asigna un array de Strings:<s:select list=”{‘Madrid’, ‘Barcelona’, ‘Zaragoza’}”/>

El resultado en HTML de la anterior tag sería:<select >

<option value=”Madrid”>Madrid</option><option value=”Barcelona”>Barcelona</option><option value=”Zaragoza”>Zaragoza</option>

</select>

Asignación de un MapSe 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”);

<s:select list=”ciudades”/><s:select list=”#application.ciudades”/><s:select list=”%{‘1’:’Madrid’, ‘2’:’Barcelona’, ‘3’:’Zaragoza’}”/>

Asignación de un Collection o un Array de objetosSi en vez de utilizar array o Map de tipos primitivos, nuestra intención es utilizar una lista o array de objetos complejos existen métodos para definir que atributo del objeto será la clave (key), listKey, y que atributo del objeto será la etiqueta (value), listValue.<s:select list=”ciudades” listKey=”idCiudad” listValue=”nombre”/>


FORM TAGS

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

Ejemplo<s:form>

<s:radio name=”ciudad” labe=”Selecciona un destino” list=”%{‘1’:’Madrid’, ‘2’:’Barcelona’, ‘3’:’Zaragoza’}”/>

</s:form>


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)


FORM TAGS

Tag selectEl tag select visualiza un elemento HTML select, sus atributos son:

Atributos

Ejemplo<s:form>

<s:select name=”ciudad” label=”Ciudad”headerKey=”0” headerValue=”Selecciona una ciudad…”list=%{‘1’:’Madrid’, ‘2’:’Barcelona’, ‘3’:’Zaragoza’}”/>

</s:form>


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 false Indica si se debe insertar un elemento vacio (--) después de la cabecera.

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.


FORM TAGS

Tag optgroupEl tag optgroup permite agrupar options de un campo select, cada option group tiene su propia fuente de datos.

Atributos

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>






FORM TAGS

Tag checkboxlistEl checkboxlist tag presenta un group de elementos checkbox. Los atributos del tag son:

Atributos

Ejemplo<s:form>

<s:checkboxlist name=”ciudades” label=”Ciudades”list=%{#application.ciudades}”listKey=”idCiudad” listValue=”nombre”/>

</s:form>


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)


FORM TAGS

Tag comboboxEl tag combobox dibuja un campo entrada texto (textfield) y un elemento select

Atributos






headerKey String Clave para el primer elemento de las options, debe ser -1.


maxlength Integer El atributo maxlength para el campo textfield.


readonly Boolean false Indica si el elmento es de solo lectura.


FORM TAGS

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








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

allowSelectAll Boolean true Indica si se debe mostrar el botón “seleccionar todo”

selectAllLabel String * Texto para mostrar en el botón “seleccionar todo”.

maxlength Integer El atributo maxlength para el campo textfield.




FORM TAGS

Tag doubleselectEl tag doubleselect representa dos elementos select que están enlazados, la selección del primer select modifica los valores del segundo select

Atributos










doubleCssClass String Atributo class del segundo select.

doubleCssStyle String Atributo style del segundo select.

doubleDisabled String Indica si el segundo select debe estar desactivado.

doubleEmptyOption Boolean false Indica si se debe insertar un elemento vacio (--) después de la cabecera en el segundo select.

doubleHeaderKey String Clave (key) de la cabecera del segundo select.

doubleHeaderValue String Etiqueta (label) de la cabecera del segundo select.

doubleId String El atributo HTML id del segundo select.

doubleList String Lista/array de elementos para crear las opciones del segundo select.

doubleListKey String Atributo del objeto de la lista que representará en el elemento option la clave (key) del segundo select.

doubleListValue String Atributo del objeto de la lista que representará en el elemento option la etiqueta (label) del segundo select.

doubleMultiple Boolean false Indica si se permite multiple selección en el segundo select.

doubleName* String El nombre del segundo select.

doubleSize Integer El tamaño del segundo select.

formName String El nombre del formulario que contiene este componente.


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


NO-FORM TAGS

Tag actionerrorEste tag muestra los action erros creados en el Actios mediante el método addActionError(String).


Ejemplo<div class=”error”>

<s:actionerror/></div>


NO-FORM TAGS

Tag actionmessageEl tag actionmessage muestra por pantalla los action message creado en el Action invocando al método addActionMessage(String).


Ejemplo<div class=”info”>

<s:actionmessage/></div>


NO-FORM TAGS

Tag componentEl 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.


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>


NO-FORM TAGS

Tag divEste 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.


Ejemplo<s:div id=”miDiv”>

...</s:div>


NO-FORM TAGS

Tag fielderrorEl 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" />


RECUERDA QUE…

Completado el apartado UI Tags debemos recordar los siguientes conceptos estudiados:

Definición Diseño Tipos

Documents

UI TAGSCURSO STRUTS 2 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í