Struts 2 - I tag del modulo

L'elenco di formtag è un sottoinsieme dei tag dell'interfaccia utente di Struts. Questi tag aiutano nel rendering dell'interfaccia utente richiesta per le applicazioni web Struts e possono essere classificati in tre categorie. Questo capitolo ti guiderà attraverso tutti e tre i tipi di tag dell'interfaccia utente:

Tag dell'interfaccia utente semplici

Abbiamo già usato questi tag nei nostri esempi, li tratteremo in questo capitolo. Guardiamo una semplice pagina di visualizzazioneemail.jsp con diversi tag dell'interfaccia utente semplici -

<%@ page language = "java" contentType = "text/html; charset = ISO-8859-1"
   pageEncoding = "ISO-8859-1"%>
<%@ taglib prefix = "s" uri = "/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
   "http://www.w3.org/TR/html4/loose.dtd">

<html>
   <head>
      <s:head/>
      <title>Hello World</title>
   </head>
   
   <body>
      <s:div>Email Form</s:div>
      <s:text name = "Please fill in the form below:" />
      
      <s:form action = "hello" method = "post" enctype = "multipart/form-data">
         <s:hidden name = "secret" value = "abracadabra"/>
         <s:textfield key = "email.from" name = "from" />
         <s:password key = "email.password" name = "password" />
         <s:textfield key = "email.to" name = "to" />
         <s:textfield key = "email.subject" name = "subject" />
         <s:textarea key = "email.body" name = "email.body" />
         <s:label for = "attachment" value = "Attachment"/>
         <s:file name = "attachment" accept = "text/html,text/plain" />
         <s:token />
         <s:submit key = "submit" />
      </s:form>
      
   </body>
</html>

Se sei a conoscenza dell'HTML, tutti i tag utilizzati sono tag HTML molto comuni con un prefisso aggiuntivo s:insieme a ogni tag e attributi diversi. Quando eseguiamo il programma di cui sopra, otteniamo la seguente interfaccia utente a condizione che tu abbia impostato la mappatura corretta per tutti i tasti utilizzati.

Come mostrato, s: head genera gli elementi javascript e del foglio di stile richiesti per l'applicazione Struts2.

Successivamente, abbiamo gli elementi s: div e s: text. Il s: div viene utilizzato per eseguire il rendering di un elemento HTML Div. Questo è utile per le persone che non amano mischiare insieme tag HTML e Struts. Per queste persone, possono scegliere di usare s: div per rendere un div.

Il s: text come mostrato viene utilizzato per rendere un testo sullo schermo.

Poi abbiamo il famiilar s: form tag. Il tag s: form ha un attributo di azione che determina dove inviare il modulo. Poiché abbiamo un elemento di caricamento del file nel modulo, dobbiamo impostare l'enctype su multipart. Altrimenti, possiamo lasciare questo campo vuoto.

Alla fine del tag del form, abbiamo il tag s: submit. Viene utilizzato per inviare il modulo. Quando il modulo viene inviato, tutti i valori del modulo vengono inviati all'azione specificata nel tag s: form.

All'interno del form s:, abbiamo un attributo nascosto chiamato secret. Questo rende un elemento nascosto nell'HTML. Nel nostro caso, l'elemento "segreto" ha il valore "abracadabra". Questo elemento non è visibile all'utente finale e viene utilizzato per trasferire lo stato da una vista all'altra.

Successivamente abbiamo i tag s: label, s: textfield, s: password e s: textarea. Questi sono usati per rendere rispettivamente l'etichetta, il campo di input, la password e l'area di testo. Li abbiamo visti in azione nell'esempio "Struts - Invio di e-mail".

La cosa importante da notare qui è l'uso dell'attributo "chiave". L'attributo "chiave" viene utilizzato per recuperare l'etichetta per questi controlli dal file delle proprietà. Abbiamo già trattato questa funzionalità nel capitolo Struts2 Localization, internationalization.

Quindi, abbiamo il tag s: file che rende un componente di caricamento del file di input. Questo componente consente all'utente di caricare file. In questo esempio, abbiamo utilizzato il parametro "accept" del tag s: file per specificare quali tipi di file possono essere caricati.

Infine abbiamo il tag s: token. Il tag token genera un token univoco che viene utilizzato per scoprire se un modulo è stato inviato due volte

Quando viene eseguito il rendering del modulo, una variabile nascosta viene inserita come valore del token. Diciamo, ad esempio, che il token è "ABC". Quando questo modulo viene inviato, Struts Fitler confronta il token con il token memorizzato nella sessione. Se corrisponde, rimuove il token dalla sessione. Ora, se il modulo viene reinviato accidentalmente (sia aggiornando o premendo il pulsante Indietro del browser), il modulo verrà nuovamente inviato con "ABC" come token. In questo caso, il filtro controlla nuovamente il token rispetto al token memorizzato nella sessione. Ma poiché il token "ABC" è stato rimosso dalla sessione, non corrisponderà e il filtro Struts rifiuterà la richiesta.

Tag dell'interfaccia utente di gruppo

I tag dell'interfaccia utente di gruppo vengono utilizzati per creare il pulsante di opzione e la casella di controllo. Guardiamo una semplice pagina di visualizzazioneHelloWorld.jsp con casella di controllo e tag del pulsante di opzione -

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

<html>
   <head>
      <title>Hello World</title>
      <s:head />
   </head>
   
   <body>
      <s:form action = "hello.action">
         <s:radio label = "Gender" name = "gender" list="{'male','female'}" />
         <s:checkboxlist label = "Hobbies" name = "hobbies"
         list = "{'sports','tv','shopping'}" />
      </s:form>
      
   </body>
</html>

Quando eseguiamo il programma sopra, il nostro output sarà simile al seguente:

Vediamo ora l'esempio. Nel primo esempio, stiamo creando un semplice pulsante di opzione con l'etichetta "Gender". L'attributo name è obbligatorio per il tag del pulsante di opzione, quindi specifichiamo un nome che è "sesso". Forniamo quindi un elenco al sesso. L'elenco viene popolato con i valori "maschio" e "femmina". Pertanto, nell'output otteniamo un pulsante di opzione con due valori al suo interno.

Nel secondo esempio, stiamo creando un elenco di caselle di controllo. Questo è per raccogliere gli hobby dell'utente. L'utente può avere più di un hobby e quindi stiamo utilizzando la casella di controllo invece del pulsante di opzione. La casella di controllo è popolata con l'elenco "sport", "TV" e "Shopping". Questo presenta gli hobby come un elenco di caselle di controllo.

Seleziona Tag dell'interfaccia utente

Esploriamo le diverse varianti del Select Tag offerto da Struts. Guardiamo una semplice pagina di visualizzazioneHelloWorld.jsp con tag selezionati -

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

<html>
   <head>
      <title>Hello World</title>
      <s:head />
   </head>
   
   <body>
      <s:form action = "login.action">
         <s:select name = "username" label = "Username"
            list = "{'Mike','John','Smith'}" />

         <s:select label = "Company Office" name = "mySelection"
            value = "%{'America'}" list="%{#{'America':'America'}}">
            <s:optgroup label = "Asia" 
               list = "%{#{'India':'India','China':'China'}}" />
            <s:optgroup label = "Europe"
               list="%{#{'UK':'UK','Sweden':'Sweden','Italy':'Italy'}}" />
         </s:select>

         <s:combobox label = "My Sign" name = "mySign"
            list = "#{'aries':'aries','capricorn':'capricorn'}" headerkey = "-1" 
            headervalue = "--- Please Select ---" emptyOption = "true" value = "capricorn" />
         <s:doubleselect label = "Occupation" name = "occupation"
            list = "{'Technical','Other'}" doublename = "occupations2"
            doubleList="top == 'Technical' ? 
            {'I.T', 'Hardware'} : {'Accounting', 'H.R'}" />
      </s:form>
   </body>
</html>

Quando eseguiamo il programma sopra, il nostro output sarà simile al seguente:

Esaminiamo ora i singoli casi, uno per uno.

  • Innanzitutto, il tag di selezione esegue il rendering della casella di selezione HTML. Nel primo esempio, stiamo creando una semplice casella di selezione con il nome "nome utente" e l'etichetta "nome utente". La casella di selezione verrà popolata con un elenco che contiene i nomi Mike, John e Smith.

  • Nel secondo esempio, la nostra azienda ha sede in America. Ha anche uffici globali in Asia ed Europa. Vogliamo visualizzare gli uffici in una casella di selezione ma vogliamo raggruppare gli uffici globali in base al nome del continente. È qui che l'optgroup torna utile. Usiamo il tag s: optgroup per creare un nuovo gruppo. Diamo al gruppo un'etichetta e un elenco separato.

  • Nel terzo esempio, viene utilizzata la casella combinata. Una casella combinata è una combinazione di un campo di input e una casella di selezione. L'utente può selezionare un valore dalla casella di selezione, nel qual caso il campo di input viene automaticamente compilato con il valore selezionato dall'utente. Se l'utente immette un valore direttamente, non verrà selezionato alcun valore dalla casella di selezione.

  • Nel nostro esempio abbiamo la casella combinata che elenca i segni del sole. La casella di selezione elenca solo quattro voci che consentono all'utente di digitare il proprio segno solare se non è nell'elenco. Aggiungiamo anche una voce di intestazione alla casella di selezione. La voce di intestazione è quella visualizzata nella parte superiore della casella di selezione. Nel nostro caso vogliamo visualizzare "Please Select". Se l'utente non seleziona nulla, assumiamo -1 come valore. In alcuni casi, non vogliamo che l'utente selezioni un valore vuoto. In queste condizioni, si imposta la proprietà "emptyOption" su false. Infine, nel nostro esempio forniamo "capricorno" come valore predefinito per la casella combinata.

  • Nel quarto esempio, abbiamo una doppia selezione. Una doppia selezione viene utilizzata quando si desidera visualizzare due caselle di selezione. Il valore selezionato nella prima casella di selezione determina ciò che appare nella seconda casella di selezione. Nel nostro esempio, la prima casella di selezione mostra "Tecnico" e "Altro". Se l'utente seleziona Tecnico, visualizzeremo IT e Hardware nella seconda casella di selezione. Altrimenti visualizzeremo Contabilità e Risorse umane. Ciò è possibile utilizzando gli attributi "list" e "doubleList" come mostrato nell'esempio.

Nell'esempio sopra, abbiamo fatto un confronto per vedere se la casella di selezione in alto è uguale a Tecnico. In caso affermativo, visualizziamo IT e hardware.

Dobbiamo anche dare un nome alla casella in alto ("name = 'Occupations') e alla casella in basso (doubleName = 'occupations2')