Struts 2 - Tagi Ajax

Struts używa frameworka DOJO do implementacji tagów AJAX. Przede wszystkim, aby przejść do tego przykładu, musisz dodać struts2-dojo-plugin-2.2.3.jar do swojej ścieżki klas.

Możesz pobrać ten plik z folderu lib pobranego pliku struts2 (C: \ struts-2.2.3all \ struts-2.2.3 \ lib \ struts2-dojo-plugin-2.2.3.jar)

W tym przypadku zmodyfikujmy HelloWorld.jsp w następujący sposób -

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

Po uruchomieniu powyższego przykładu otrzymamy następujące dane wyjściowe -

Przejdźmy teraz przez ten przykład krok po kroku.

Pierwszą rzeczą, na którą należy zwrócić uwagę, jest dodanie nowej biblioteki znaczników z przedrostkiem sx. To (struts-dojo-tags) jest biblioteką tagów stworzoną specjalnie do integracji Ajax.

Następnie wewnątrz nagłówka HTML nazywamy sx: head. Spowoduje to zainicjowanie struktury dojo i przygotowanie jej na wszystkie wywołania AJAX na stronie. Ten krok jest ważny - twoje wywołania Ajax nie będą działać bez zainicjowania sx: head.

Najpierw mamy tag autocompleter. Znacznik autouzupełniania wygląda prawie jak pole wyboru. Jest wypełniony wartościami czerwonym, zielonym i niebieskim. Ale różnica między polem wyboru a tym polega na tym, że uzupełnia się automatycznie. Oznacza to, że jeśli zaczniesz wpisywać gr, wypełni go „zielonym”. Poza tym ten tag jest bardzo podobny do tagu s: select, który omówiliśmy wcześniej.

Następnie mamy selektor dat i godzin. Ten znacznik tworzy pole wejściowe z przyciskiem obok niego. Po naciśnięciu przycisku zostanie wyświetlony wyskakujący selektor daty i godziny. Gdy użytkownik wybierze datę, data jest umieszczana w tekście wejściowym w formacie określonym w atrybucie znacznika. W naszym przykładzie jako format daty określiliśmy dd / MM / rrrr.

Następnie tworzymy tag url do pliku system.action, który stworzyliśmy we wcześniejszych ćwiczeniach. Nie musi to być system.action - może to być dowolny plik akcji, który utworzyłeś wcześniej. Następnie mamy div z hiperłączem ustawionym na adres URL i opóźnieniem ustawionym na 2 sekundy. Co się stanie, gdy to uruchomisz, „Zawartość początkowa” będzie wyświetlana przez 2 sekundy, a następnie zawartość elementu div zostanie zastąpiona zawartością zhello.action wykonanie.

Wreszcie mamy prosty panel z dwiema zakładkami. Zakładki są oddzielnymi rękawami z etykietami Tab 1 i Tab2.

Warto zauważyć, że integracja tagów AJAX w Struts jest nadal w toku, a dojrzałość tej integracji powoli rośnie z każdym wydaniem.