Struts 2 - I tag Ajax

Struts utilizza il framework DOJO per l'implementazione del tag AJAX. Prima di tutto, per procedere con questo esempio, devi aggiungere struts2-dojo-plugin-2.2.3.jar al tuo classpath.

È possibile ottenere questo file dalla cartella lib del download di struts2 (C: \ struts-2.2.3all \ struts-2.2.3 \ lib \ struts2-dojo-plugin-2.2.3.jar)

Per questi esercizi, modifichiamo HelloWorld.jsp come segue -

<%@ 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>

Quando eseguiamo l'esempio precedente, otteniamo il seguente output:

Esaminiamo ora questo esempio un passo alla volta.

La prima cosa da notare è l'aggiunta di una nuova libreria di tag con il prefisso sx. Questa (struts-dojo-tags) è la libreria di tag creata appositamente per l'integrazione con ajax.

Quindi all'interno della testata HTML chiamiamo sx: head. Questo inizializza il framework del dojo e lo rende pronto per tutte le chiamate AJAX all'interno della pagina. Questo passaggio è importante: le tue chiamate ajax non funzioneranno senza l'inizializzazione di sx: head.

Per prima cosa abbiamo il tag autocompleter. Il tag di completamento automatico assomiglia più o meno a una casella di selezione. Viene popolato con i valori rosso, verde e blu. Ma la differenza tra una casella di selezione e questa è che si completa automaticamente. Cioè, se inizi a digitare gr, lo riempirà di "verde". Oltre a questo, questo tag è molto simile al tag s: select di cui abbiamo parlato in precedenza.

Successivamente, abbiamo un selettore di data e ora. Questo tag crea un campo di input con un pulsante accanto ad esso. Quando si preme il pulsante, viene visualizzato un popup di selezione della data e dell'ora. Quando l'utente seleziona una data, la data viene inserita nel testo di input nel formato specificato nell'attributo tag. Nel nostro esempio, abbiamo specificato gg / MM / aaaa come formato per la data.

Successivamente creiamo un tag URL nel file system.action che abbiamo creato negli esercizi precedenti. Non deve essere il file system.action: potrebbe essere qualsiasi file di azione creato in precedenza. Quindi abbiamo un div con il collegamento ipertestuale impostato sull'URL e il ritardo impostato su 2 secondi. Quello che succede quando lo esegui è che il "Contenuto iniziale" verrà visualizzato per 2 secondi, quindi il contenuto del div verrà sostituito con il contenuto delhello.action esecuzione.

Infine abbiamo un semplice pannello a schede con due schede. Le schede sono divs themseleves con le etichette Tab 1 e Tab2.

Vale la pena notare che l'integrazione del tag AJAX in Struts è ancora un work in progress e la maturità di questa integrazione sta lentamente aumentando ad ogni release.