Struts 2 - Las etiquetas Ajax

Struts utiliza el marco DOJO para la implementación de etiquetas AJAX. En primer lugar, para continuar con este ejemplo, debe agregar struts2-dojo-plugin-2.2.3.jar a su classpath.

Puede obtener este archivo desde la carpeta lib de su descarga struts2 (C: \ struts-2.2.3all \ struts-2.2.3 \ lib \ struts2-dojo-plugin-2.2.3.jar)

Para estos ejercicios, modifiquemos HelloWorld.jsp como sigue -

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

<html>
   <head>
      <title>Hello World</title>
      <s:head />
      <sx:head />
   </head>
   
   <body>
      <s:form>
         <sx:autocompleter label = "Favourite Colour"
            list = "{'red','green','blue'}" />
         <br />
         <sx:datetimepicker name = "deliverydate" label = "Delivery Date"
            displayformat = "dd/MM/yyyy" />
         <br />
         <s:url id = "url" value = "/hello.action" />
         <sx:div href="%{#url}" delay="2000">
            Initial Content
         </sx:div>
         <br/>
         <sx:tabbedpanel id = "tabContainer">
            <sx:div label = "Tab 1">Tab 1</sx:div>
            <sx:div label = "Tab 2">Tab 2</sx:div>
         </sx:tabbedpanel>
      </s:form>
   </body>
</html>

Cuando ejecutamos el ejemplo anterior, obtenemos el siguiente resultado:

Veamos ahora este ejemplo paso a paso.

Lo primero que debe notar es la adición de una nueva biblioteca de etiquetas con el prefijo sx. Esta (struts-dojo-tags) es la biblioteca de etiquetas creada específicamente para la integración ajax.

Luego, dentro del encabezado HTML, lo llamamos sx: head. Esto inicializa el marco dojo y lo prepara para todas las invocaciones AJAX dentro de la página. Este paso es importante: sus llamadas ajax no funcionarán sin que se inicialice sx: head.

Primero tenemos la etiqueta de autocompletar. La etiqueta de autocompletado se parece mucho a un cuadro de selección. Se rellena con los valores rojo, verde y azul. Pero la diferencia entre un cuadro de selección y este es que se completa automáticamente. Es decir, si comienza a escribir gr, lo llenará de "verde". Aparte de eso, esta etiqueta es muy similar a la etiqueta s: select que cubrimos anteriormente.

A continuación, tenemos un selector de fecha y hora. Esta etiqueta crea un campo de entrada con un botón al lado. Cuando se presiona el botón, se muestra un selector de fecha y hora emergente. Cuando el usuario selecciona una fecha, la fecha se completa en el texto de entrada en el formato que se especifica en el atributo de etiqueta. En nuestro ejemplo, hemos especificado dd / MM / aaaa como formato para la fecha.

A continuación, creamos una etiqueta url para el archivo system.action que creamos en los ejercicios anteriores. No tiene que ser system.action; podría ser cualquier archivo de acción que haya creado anteriormente. Luego tenemos un div con el hipervínculo establecido en la URL y el retraso establecido en 2 segundos. Lo que sucede cuando ejecuta esto es que el "Contenido inicial" se mostrará durante 2 segundos, luego el contenido del div será reemplazado por el contenido delhello.action ejecución.

Finalmente tenemos un panel de pestañas simple con dos pestañas. Las pestañas son divs en sí mismas con las etiquetas Tab 1 y Tab2.

Vale la pena señalar que la integración de etiquetas AJAX en Struts todavía es un trabajo en progreso y la madurez de esta integración aumenta lentamente con cada lanzamiento.