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

Presentación del tema: "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í."— Transcripción de la presentación:

1 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

2 CURSO STRUTS 2 UI TAGS ¿QUÉ SON LAS UI TAGS? Carácteristicas
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 Tags Para 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

3 CURSO STRUTS 2 UI TAGS TEMPLATES Y THEMES Themes Ejemplo
El tag form, se visualiza como un elemento formulario (<form>) y un elemento tabla (<table>). <s:form> es equivalente al siguiente código HTML, utilizando el theme por defecto de Struts 2: <form id="..." name="..." onsubmit="return true;" action="..." method="post"> <table class="wwFormTable"> ... </table> </form> 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 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. Uso Themes 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: 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

4 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 No-Form Tags 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. Atributo Theme Tipo Dato Descripción name simple String Especifica el atributo name de un campo de formulario. Además de asignar el valor del atributo que representa en el Action, si no se indica en el tag mediante el atributo value. value Object Expresión OGNL que asignar el valor del atributo que corresponde en el componente de formulario. key Asigna el valor del recurso de mensajes (ResourceBundle) al componente, además de ser una abreviatura para definir los atributos name y label del componente. id Define el atributo id del componente HTML. Por defecto se crea siempre un ID único por cada componente aunque no se especifique. label xhtml Crea una etiqueta label al componente HTML. required Boolean Indica si se debe o no añadirse el carácter * a la etiqueta del componente HTML. labelPosition Especifica la posición de la etiqueta para los temas xhtml y ajax. Los valores permitidos son “top” y “left” (defecto). requiredposition Especifica la posición de la etiqueta obligatoria para un componente HTML para los temas xhtml y ajax. Valores admitidos “left” y “right” (defecto). cssClass La clase CSS del componente HTML. cssStyle El estylo CSS del componente HTML. title Especifica el atributo HTML title disabled Especifica el atributo HTML disabled. tabindex Especifica el atributo HTML tabindex. 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. Atributo Tipo Dato Descripción theme String Tema que debe utilizarse para pintar el componente. El valor por defecto es xhtml, indicado en el default.properties. templateDir Sobrescribe el nombre del directorio por defecto donde se encuentran los templates. template Define template a utilizar para representar el componente HTML. Atributo Tipo Dato Descripción onclick String Atributo JavaScript onclick ondbclick Atributo JavaScript ondbclick onmousedown Atributo JavaScript onmousedown onmouseup Atributo JavaScript onmouseup onmouseover Atributo JavaScript onmouseover onmouseout Atributo JavaScript onmouseout onfocus Atributo JavaScript onfocus onblur Atributo JavaScript onblur onkeypress Atributo JavaScript onkeypress onkeyup Atributo JavaScript onkeyup onkeydown Atributo JavaScript onkeydown onselect Atributo JavaScript onselect onchange Atributo JavaScript onchange Atributo Tipo Dato Descripción tooltip String Texto usado como ayuda contextual tooltipIconPath La ruta al icono de ayuda contextual. El valor por defecto es /struts/static/tooltip/tooltip.gif tooltipDelay 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.

5 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

6 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 Tipo Dato Valor Defecto Descripción acceptcharset String Juego de caracteres soportado por el formulario, separado por comas o espacios. action Action actual El Action para enviar el formulario. enctype El atributo enctype del formulario. method post El método de envio del formulario: post o get. namespace Namespace actual El namespace del Action. onsubmit Atributo JavaScript onsubmit. openTemplate Plantilla para representar el formulario. portletMode Modo portlet para representar después del envío de formulario, target El atributo target del formulario. validate Boolean false Indica si existe validación en el cliente. windowState 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>

7 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 Tipo Dato Valor Defecto Descripción maxlength 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 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>

8 CURSO STRUTS 2 UI TAGS FORM TAGS Tag textarea
Este tag muestra un elemento textarea. Sus atributos son: Atributos Atributo Tipo Dato Valor Defecto Descripción cols Integer El atributo HTML cols. readonly Boolean false Indica si el textarea es de solo lectura. rows El atributo HTML rows. wrap El atributo HTML wrap. Ejemplo <s:form> <s:textarea name="descripcion" label="Descripción" rows="10" cols="20"/> </s:form>

9 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 Tipo Dato Valor Defecto Descripción accept String 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>

10 CURSO STRUTS 2 UI TAGS FORM TAGS Tag checkbox
El tag visualiza un elemento HTML checkbox Atributos Atributo Tipo Dato Valor Defecto Descripción fieldValue String “true” 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.

11 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 Valor Defecto Descripción action String El atributo HTML action. align El atributo HTML align. method Indica el atributo method type input Representa la visualización del componente (input, button o image). Ejemplo <s:form> <s:submit value=”Entrar”/> </s:form>

12 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 Tipo Dato Valor Defecto Descripción action String El atributo HTML action. align El atributo HTML align. method Indica el atributo method type input Representa la visualización del componente (input o button). Ejemplo <s:form> <s:reset value=”Limpiar”/> </s:form>

13 CURSO STRUTS 2 UI TAGS FORM TAGS Tag label
El tag label, se representa como un elemento label HTML. Atributos Atributo Tipo Dato Valor Defecto Descripción for String El atributo HTML for. Ejemplo <s:label name="nombreLabel" value= "Texto Visualizar Label" />

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

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

16 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. Asignación de un Array de Strings Se 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 Map 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”); <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 objetos Si 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”/>

17 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 Atributo del objeto de la lista que representará en el elemento radio la clave (key). listValue 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>

18 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 Atributo del objeto de la lista que representará en el elemento option la clave (key). listValue 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 Clave para el primer elemento de las options. headerValue Etiqueta para el primer elemento de la options. multiple Indica si se puede seleccionar multiples options. size Integer Número de options a mostrar. Ejemplo <s:form> <s:select name=”ciudad” label=”Ciudad” headerKey=”0” headerValue=”Selecciona una ciudad…” list=%{‘1’:’Madrid’, ‘2’:’Barcelona’, ‘3’:’Zaragoza’}”/> </s:form>

19 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 Atributo del objeto de la lista que representará en el elemento option la clave (key). listValue 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>

20 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 Atributo del objeto de la lista que representará en el elemento checkbox la clave (value). listValue 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>

21 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 Atributo del objeto de la lista que representará en el elemento option la clave (key). listValue 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 Clave para el primer elemento de las options, debe ser -1. headerValue Etiqueta para el primer elemento de la options. maxlength Integer El atributo maxlength para el campo textfield. size Número de options a mostrar. readonly Indica si el elmento es de solo lectura. Ejemplo <s:form> <s:combobox name=”ciudad” label=”Ciudad” headerKey=”-1” headerValue=”Selecciona una ciudad” list=”%{’Madrid’, ’Barcelona’, ’Zaragoza’}”/> </s:form>

22 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 Atributo del objeto de la lista que representará en el elemento option la clave (key). listValue 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 Clave para el primer elemento de las options, debe ser -1. headerValue Etiqueta para el primer elemento de la options. allowModeDown true Indica si se debe mostrar el botón “mover abajo” moveDownLabel  Texto para mostrar en el botón “mover abajo”. allowModeUp Indica si se debe mostrar el botón “mover arriba” moveUpLabel  Texto para mostrar en el botón “mover arriba”. allowSelectAll Indica si se debe mostrar el botón “seleccionar todo” selectAllLabel * Texto para mostrar en el botón “seleccionar todo”. maxlength Integer El atributo maxlength para el campo textfield. multiple Indica si se puede seleccionar multiples options. size Número de options a mostrar. Ejemplo <s:form> <s:updownselect name=”ciudades” label=”Ciudades” size=”5” list=%{‘1’:’Madrid’, ‘2’:’Barcelona’, ‘3’:’Zaragoza’}”/> </s:form>

23 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 Atributo del objeto de la lista que representará en el elemento option la clave (key). listValue 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. multiple Indica si se puede seleccionar multiples options. size Integer Número de options a mostrar. headerKey Clave para el primer elemento de las options, debe ser -1. headerValue Etiqueta para el primer elemento de la options. doubleCssClass Atributo class del segundo select. doubleCssStyle Atributo style del segundo select. doubleDisabled Indica si el segundo select debe estar desactivado. doubleEmptyOption Indica si se debe insertar un elemento vacio (--) después de la cabecera en el segundo select. doubleHeaderKey Clave (key) de la cabecera del segundo select. doubleHeaderValue Etiqueta (label) de la cabecera del segundo select. doubleId El atributo HTML id del segundo select. doubleList Lista/array de elementos para crear las opciones del segundo select. doubleListKey Atributo del objeto de la lista que representará en el elemento option la clave (key) del segundo select. doubleListValue Atributo del objeto de la lista que representará en el elemento option la etiqueta (label) del segundo select. doubleMultiple Indica si se permite multiple selección en el segundo select. doubleName* El nombre del segundo select. doubleSize El tamaño del segundo select. formName El nombre del formulario que contiene este componente. Ejemplo <s:form> <s:doubleselect label="Selecciona ciudad" name="ciudad" list="{'Madrid','Barcelona'}" doubleName="monumento" doubleList="top == 'Madrid' ? {'Moncloa', 'El Prado'} : {'Sagrada Familia', 'La Rambla'}" / </s:form>

24 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

25 CURSO STRUTS 2 UI TAGS 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>

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

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

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

29 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:param value="%{'campo1'}" /> <s:param value="%{'campo2'}" /> <s:fielderror fieldName="campo1" />

30 CURSO STRUTS 2 UI TAGS RECUERDA QUE… ¿Qué son las UI Tags? Definición
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 Lenguaje expresión OGNL compatible con JSTL. Motor independiente del tipo de tecnología: JSP, FreeMarker, Velocity, XSLT,… Tecnología AJAX Uso de Interceptors. Taglib taglib prexif=”s” uri=”/struts-tags”%> CURSO STRUTS 2 UI TAGS RECUERDA QUE… Completado el apartado UI Tags debemos recordar los siguientes conceptos estudiados: Definición Diseño Tipos Themes Mediante el uso de themes en las UI Tags, Struts 2 permite modificar la representación de los componentes HTML. 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 simple, componentes del Tag UI en los elementos HTML equivalentes más simples. xhtml, theme por defecto, los templates de esta colección proveen formateo automático de los elementos HTML diseñado mediante tablas (table). css_xhtml, templates similares al theme xhtml, pero están preparados para utilizar diseños CSS. ajax, templates basados en el tema xhtml, pero tiene características avanzadas de la tecnología AJAX. Uso Themes A nivel de tag <s:textfield theme=”simple” name=”usuario”/> A nivel de formulario <s:form theme="css_xhtml"> … </s:form> A nivel de page, request, session o application <s:set name="theme" value="css_xhtml" scope="session"/> A nivel de aplicación (struts.properties) struts.ui.theme = css_xhtml Tipos de UI Tags Las UI tags se pueden dividir en dos grupos en función de su cometido: Form Tags crear campos formulario para la entrada de datos checkbox checkboxlist combobox doubleselect head file form hidden label optgroup password radio reset select submit textarea textfield token updownselect No-Form Tags realizar tareas de visualización HTML de componentes de mensajes y elementos estructurales actionerror actionmessage component div fielderror