Struts 2 - Les balises de formulaire

La liste de formbalises est un sous-ensemble de balises d'interface utilisateur Struts. Ces balises aident au rendu de l'interface utilisateur requise pour les applications Web Struts et peuvent être classées en trois catégories. Ce chapitre vous présentera les trois types de balises d'interface utilisateur -

Balises d'interface utilisateur simples

Nous avons déjà utilisé ces balises dans nos exemples, nous les brosserons dans ce chapitre. Regardons une page de vue simpleemail.jsp avec plusieurs balises d'interface utilisateur simples -

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

Si vous connaissez HTML, alors toutes les balises utilisées sont des balises HTML très courantes avec un préfixe supplémentaire s:avec chaque balise et différents attributs. Lorsque nous exécutons le programme ci-dessus, nous obtenons l'interface utilisateur suivante à condition que vous ayez configuré le mappage approprié pour toutes les clés utilisées.

Comme indiqué, le s: head génère les éléments javascript et la feuille de style requis pour l'application Struts2.

Ensuite, nous avons les éléments s: div et s: text. Le s: div est utilisé pour rendre un élément HTML Div. Ceci est utile pour les personnes qui n'aiment pas mélanger les balises HTML et Struts. Pour ces personnes, ils ont le choix d'utiliser s: div pour rendre un div.

Le s: texte comme indiqué est utilisé pour rendre un texte à l'écran.

Ensuite, nous avons la balise famiilar s: form. La balise s: form a un attribut d'action qui détermine où envoyer le formulaire. Étant donné que nous avons un élément de téléchargement de fichier dans le formulaire, nous devons définir le type enctype sur multipart. Sinon, nous pouvons laisser ce champ vide.

À la fin de la balise form, nous avons la balise s: submit. Ceci est utilisé pour soumettre le formulaire. Lorsque le formulaire est soumis, toutes les valeurs du formulaire sont soumises à l'action spécifiée dans la balise s: form.

À l'intérieur du formulaire s:, nous avons un attribut caché appelé secret. Cela rend un élément caché dans le HTML. Dans notre cas, l'élément "secret" a la valeur "abracadabra". Cet élément n'est pas visible par l'utilisateur final et est utilisé pour transporter l'état d'une vue à une autre.

Ensuite, nous avons les balises s: label, s: textfield, s: password et s: textarea. Ceux-ci sont utilisés pour rendre respectivement l'étiquette, le champ de saisie, le mot de passe et la zone de texte. Nous les avons vus en action dans l'exemple "Struts - Envoi d'e-mails".

La chose importante à noter ici est l'utilisation de l'attribut "clé". L'attribut "key" est utilisé pour récupérer le libellé de ces contrôles dans le fichier de propriétés. Nous avons déjà couvert cette fonctionnalité dans le chapitre sur la localisation de Struts2, l'internationalisation.

Ensuite, nous avons la balise s: file qui rend un composant de téléchargement de fichier d'entrée. Ce composant permet à l'utilisateur de télécharger des fichiers. Dans cet exemple, nous avons utilisé le paramètre "accept" de la balise s: file pour spécifier les types de fichiers autorisés à être téléchargés.

Enfin, nous avons la balise s: token. La balise de jeton génère un jeton unique qui est utilisé pour savoir si un formulaire a été soumis deux fois

Lorsque le formulaire est rendu, une variable masquée est placée comme valeur de jeton. Disons, par exemple, que le jeton est "ABC". Lorsque ce formulaire est soumis, Struts Fitler vérifie le jeton par rapport au jeton stocké dans la session. S'il correspond, il supprime le jeton de la session. Maintenant, si le formulaire est renvoyé accidentellement (soit en actualisant, soit en appuyant sur le bouton Précédent du navigateur), le formulaire sera de nouveau soumis avec "ABC" comme jeton. Dans ce cas, le filtre vérifie à nouveau le jeton par rapport au jeton stocké dans la session. Mais comme le jeton "ABC" a été supprimé de la session, il ne correspondra pas et le filtre Struts rejettera la demande.

Balises de l'interface utilisateur de groupe

Les balises d'interface utilisateur de groupe sont utilisées pour créer le bouton radio et la case à cocher. Regardons une page de vue simpleHelloWorld.jsp avec des étiquettes de case à cocher et de bouton radio -

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

Lorsque nous exécutons le programme ci-dessus, notre sortie ressemblera à ce qui suit -

Regardons maintenant l'exemple. Dans le premier exemple, nous créons un simple bouton radio avec le libellé "Genre". L'attribut name est obligatoire pour la balise de bouton radio, nous spécifions donc un nom qui est "gender". Nous fournissons ensuite une liste au genre. La liste contient les valeurs «homme» et «femme». Par conséquent, dans la sortie, nous obtenons un bouton radio avec deux valeurs.

Dans le deuxième exemple, nous créons une liste de cases à cocher. Il s'agit de rassembler les loisirs de l'utilisateur. L'utilisateur peut avoir plus d'un passe-temps et c'est pourquoi nous utilisons la case à cocher au lieu du bouton radio. La case à cocher contient la liste "sports", "TV" et "Shopping". Cela présente les loisirs sous forme de liste de cases à cocher.

Sélectionnez les balises de l'interface utilisateur

Explorons les différentes variantes du Select Tag proposées par Struts. Regardons une page de vue simpleHelloWorld.jsp avec des balises sélectionnées -

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

Lorsque nous exécutons le programme ci-dessus, notre sortie ressemblera à ce qui suit -

Passons maintenant en revue les cas individuels, un par un.

  • Tout d'abord, la balise de sélection rend la zone de sélection HTML. Dans le premier exemple, nous créons une boîte de sélection simple avec le nom "username" et le libellé "username". La boîte de sélection sera remplie avec une liste qui contient les noms Mike, John et Smith.

  • Dans le deuxième exemple, notre société a des sièges sociaux en Amérique. Il possède également des bureaux mondiaux en Asie et en Europe. Nous voulons afficher les bureaux dans une boîte de sélection mais nous voulons regrouper les bureaux mondiaux par le nom du continent. C'est là que l'optgroup est utile. Nous utilisons la balise s: optgroup pour créer un nouveau groupe. Nous donnons au groupe une étiquette et une liste séparée.

  • Dans le troisième exemple, la zone de liste déroulante est utilisée. Une zone de liste déroulante est une combinaison d'un champ de saisie et d'une zone de sélection. L'utilisateur peut soit sélectionner une valeur dans la zone de sélection, auquel cas le champ de saisie est automatiquement rempli avec la valeur sélectionnée par l'utilisateur. Si l'utilisateur saisit directement une valeur, aucune valeur de la zone de sélection ne sera sélectionnée.

  • Dans notre exemple, nous avons la liste déroulante listant les signes du soleil. La boîte de sélection ne répertorie que quatre entrées permettant à l'utilisateur de saisir son signe solaire s'il ne figure pas dans la liste. Nous ajoutons également une entrée d'en-tête à la boîte de sélection. L'entrée d'en-tête est celle qui s'affiche en haut de la zone de sélection. Dans notre cas, nous voulons afficher "Veuillez sélectionner". Si l'utilisateur ne sélectionne rien, alors nous supposons -1 comme valeur. Dans certains cas, nous ne voulons pas que l'utilisateur sélectionne une valeur vide. Dans ces conditions, on définirait la propriété "emptyOption" sur false. Enfin, dans notre exemple, nous fournissons "capricorne" comme valeur par défaut pour la zone de liste déroulante.

  • Dans le quatrième exemple, nous avons une double sélection. Une double sélection est utilisée lorsque vous souhaitez afficher deux boîtes de sélection. La valeur sélectionnée dans la première zone de sélection détermine ce qui apparaît dans la seconde zone de sélection. Dans notre exemple, la première boîte de sélection affiche «Technique» et «Autre». Si l'utilisateur sélectionne Technique, nous afficherons IT et matériel dans la deuxième case de sélection. Sinon, nous afficherons Comptabilité et RH. Ceci est possible en utilisant les attributs "list" et "doubleList" comme indiqué dans l'exemple.

Dans l'exemple ci-dessus, nous avons effectué une comparaison pour voir si la zone de sélection supérieure correspond à Technique. Si c'est le cas, nous affichons l'informatique et le matériel.

Nous devons également donner un nom à la case du haut ("name = 'Occupations') et à la case du bas (doubleName = 'occupations2')