Formulaires et composants de validation

le Form Componentest utilisé pour créer un formulaire dans la page de tapisserie pour la saisie de l'utilisateur. Un formulaire peut contenir des champs de texte, des champs de date, des champs de case à cocher, des options de sélection, un bouton d'envoi et plus encore.

Ce chapitre explique en détail certains des composants de formulaire notables.

Composant de case à cocher

Un composant Checkbox est utilisé pour choisir entre deux options mutuellement exclusives. Créez une page en utilisant la case à cocher comme indiqué ci-dessous -

Checkbox.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property;  

public class Checkbox { 
   @Property 
   private boolean check1; 
   
   @Property 
   private boolean check2; 
}

Maintenant, créez un modèle correspondant Checkbox.tml comme indiqué ci-dessous -

<html t:type = "newlayout" title = "About MyFirstApplication" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
   
   <h3> checkbox component</h3>  
   <t:form> 
      <t:checkbox t:id = "check1"/> I have a bike <br/> 
      <t:checkbox t:id = "check2"/> I have a car 
   </t:form>  
   
</html>

Ici, le paramètre id de la case à cocher correspond à la valeur booléenne correspondante.

Result - Après avoir demandé la page, http: // localhost: 8080 / myFirstApplication / checkbox il produit le résultat suivant.

Composant TextField

Le composant TextField permet à l'utilisateur de modifier une seule ligne de texte. Créer une pageText comme indiqué ci-dessous.

Text.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property; 
import org.apache.tapestry5.corelib.components.TextField;public class Text {  
   @Property 
   private String fname;  
   @Property 
   private String lname; 
}

Ensuite, créez un modèle correspondant comme indiqué ci-dessous - Text.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter">  
   <p> Form application </p>
   
   <body>  
      <h3> Text field created from Tapestry component </h3> 
      <t:form>  
         <table> 
            <tr> 
               <td> 
                  Firstname: </td> <td><t:textfield t:id = "fname" /> 
               </td> 
               <td>Lastname: </td> <td> <t:textfield t:id = "lname" /> </td> 
            </tr> 
         </table>  
      </t:form>  
   </body> 
   
</html>

Ici, la page Texte comprend une propriété nommée fname et lname. Les identifiants des composants sont accessibles par les propriétés.

Demander la page produira le résultat suivant -

http://localhost:8080/myFirstApplication/Text

Composant PasswordField

Le PasswordField est une entrée de champ de texte spécialisée pour le mot de passe. Créez un mot de passe de page comme indiqué ci-dessous -

Password.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property; 
import org.apache.tapestry5.corelib.components.PasswordField;  

public class Password {  
   @Property 
   private String pwd; 
}

Maintenant, créez un fichier de modèle correspondant comme indiqué ci-dessous -

Password.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter">  
   <p> Form application </p>  
   <h3> Password field created from Tapestry component </h3> 
   
   <t:form> 
      <table> 
         <tr> 
            <td> Password: </td> 
            <td><t:passwordfield t:id = "pwd"/> </td> 
         </tr> 
      </table> 
   </t:form>
   
</html>

Ici, le composant PasswordField a le paramètre id, qui pointe vers la propriété pwd. Demander la page produira le résultat suivant -

http://localhost:8080/myFirstApplication/Password

Composant TextArea

Le composant TextArea est un contrôle de texte d'entrée multiligne. Créez une page TxtArea comme indiqué ci-dessous.

TxtArea.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property; 
import org.apache.tapestry5.corelib.components.TextArea;  

public class TxtArea {  
   @Property 
   private String str;  
}

Ensuite, créez un fichier modèle correspondant comme indiqué ci-dessous.

TxtArea.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
   <h3>TextArea component </h3>
   
   <t:form>
      <table>
         <tr> 
            <td><t:textarea t:id = "str"/>
            </td>
         </tr>
      </table>
   </t:form>
   
</html>

Ici, le paramètre id du composant TextArea pointe vers la propriété «str». Demander la page produira le résultat suivant -

http://localhost:8080/myFirstApplication/TxtArea**

Sélectionnez un composant

Le composant Select contient une liste déroulante de choix. Créez une page SelectOption comme indiqué ci-dessous.

SelectOption.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property; 
import org.apache.tapestry5.corelib.components.Select;  

public class SelectOption { 
   @Property 
   private String color0; 
   
   @Property 
   
   private Color1 color1; 
   public enum Color1 { 
      YELLOW, RED, GREEN, BLUE, ORANGE 
   } 
}

Ensuite, créez un modèle correspondant comme suit -

SelectOption.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
   <p> Form application </p>
   <h3> select component </h3>  
   
   <t:form> 
      <table> 
         <tr> 
            <td> Select your color here: </td> 
            <td> <select t:type = "select" t:id = "color1"></select></td> 
         </tr> 
      </table> 
   </t:form>
   
</html>

Ici, le composant Select a deux paramètres -

Type - Le type de propriété est une énumération.
Id - Id pointe vers la propriété Tapestry «color1».

Demander la page produira le résultat suivant -

http://localhost:8080/myFirstApplication/SelectOption

Composant RadioGroup

Le composant RadioGroup fournit un groupe de conteneurs pour les composants Radio. Les composants Radio et RadioGroup fonctionnent ensemble pour mettre à jour une propriété d'un objet. Ce composant doit envelopper les autres composants Radio. Créez une nouvelle page "Radiobutton.java" comme indiqué ci-dessous -

Radiobutton.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.PersistenceConstants; 
import org.apache.tapestry5.annotations.Persist; 
import org.apache.tapestry5.annotations.Property;  

public class Radiobutton {  
   @Property 
   @Persist(PersistenceConstants.FLASH)  
   private String value; 
}

Ensuite, créez un fichier modèle correspondant comme indiqué ci-dessous -

Radiobutton.tml

<html t:type = "Newlayout" title = "About MyFirstApplication" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter">  
   <h3>RadioGroup component </h3> 
   
   <t:form>
      <t:radiogroup t:id = "value">
         <t:radio t:id = "radioT" value = "literal:T" label = "Male" /> 
         <t:label for = "radioT"/>    
         <t:radio t:id = "radioF" value = "literal:F" label = "Female"/> 
         <t:label for = "radioF"/>   
      </t:radiogroup>
   </t:form>
   
</html>

Ici, l'ID du composant RadioGroup est lié à la propriété «valeur». La demande de la page produira le résultat suivant.

http://localhost:8080/myFirstApplication/Radiobutton

Soumettre le composant

Lorsqu'un utilisateur clique sur un bouton d'envoi, le formulaire est envoyé à l'adresse spécifiée dans le paramètre d'action de la balise. Créer une pageSubmitComponent comme indiqué ci-dessous.

package com.example.MyFirstApplication.pages;  
import org.apache.tapestry5.annotations.InjectPage;  

public class SubmitComponent { 
   @InjectPage 
   private Index page1; 
   Object onSuccess() { 
      return page1; 
   }     
}

Maintenant, créez un fichier modèle correspondant comme indiqué ci-dessous.

SubmitComponent.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
   <h3>Tapestry Submit component </h3> 
   
   <body> 
      <t:form> 
         <t:submit t:id = "submit1" value = "Click to go Index"/> 
      </t:form> 
   </body>
   
</html>

Ici, le composant Submit soumet la valeur à la page Index. Demander la page produira le résultat suivant -

http://localhost:8080/myFirstApplication/SubmitComponent

Validation du formulaire

La validation du formulaire se produit normalement sur le serveur une fois que le client a saisi toutes les données nécessaires, puis soumis le formulaire. Si les données saisies par un client étaient incorrectes ou simplement manquantes, le serveur devrait renvoyer toutes les données au client et demander que le formulaire soit resoumis avec des informations correctes.

Prenons l'exemple simple suivant pour comprendre le processus de validation.

Créer une page Validate comme indiqué ci-dessous.

Validate.java

package com.example.MyFirstApplication.pages;  

import org.apache.tapestry5.annotations.Property; 
import org.apache.tapestry5.PersistenceConstants; 
import org.apache.tapestry5.annotations.Persist;  

public class Validate {  
   @Property 
   @Persist(PersistenceConstants.FLASH) 
   private String firstName; 
   
   @Property 
   @Persist(PersistenceConstants.FLASH) 
   private String lastName; 
}

Maintenant, créez un fichier modèle correspondant comme indiqué ci-dessous.

Valider.tml

<html t:type = "newlayout" title = "About MyFirstApplication" 
   xmlns:t = "http://tapestry.apache.org/schema/tapestry_5_4.xsd" 
   xmlns:p = "tapestry:parameter"> 
  
   <t:form> 
      <table> 
         <tr> 
            <td><t:label for = "firstName"/>:</td> 
            <td><input t:type = "TextField" t:id = "firstName" 
            t:validate = "required, maxlength = 7" size = "10"/></td>   
         </tr> 
         <tr> 
            <td><t:label for = "lastName"/>:</td> 
            <td><input t:type = "TextField" t:id = "lastName" 
            t:validate = "required, maxLength = 5" size = "10"/></td>  
         </tr>  
      </table>  
      <t:submit t:id = "sub" value =" Form validation"/>  
   </t:form>
   
</html>

La validation de formulaire a les paramètres importants suivants -

Max - définit la valeur maximale, par exemple = «valeur maximale, 20».
MaxDate- définit le maxDate, par exemple = «date maximum, 06/09/2013». De même, vous pouvez également attribuer MinDate.
MaxLength - maxLength pour par exemple = «longueur maximale, 80».
Min - minimum.
MinLength - Longueur minimale pour par exemple = «longueur minimale, 2».
Email - Validation d'e-mail qui utilise soit l'expression régulière d'e-mail ^ \ w [._ \ w] * \ w @ \ w [-._ \ w] * \ w \. \ W2,6 $ ou aucune.

Demander la page produira le résultat suivant -

http://localhost:8080/myFirstApplication/Validate

↰ Previous page Next page ↱

Formulaires et composants de validation

Composant de case à cocher

Checkbox.java

Composant TextField

Text.java

Composant PasswordField

Password.java

Password.tml

Composant TextArea

TxtArea.java

TxtArea.tml

Sélectionnez un composant

SelectOption.java

SelectOption.tml

Composant RadioGroup

Radiobutton.java

Radiobutton.tml

Soumettre le composant

SubmitComponent.tml

Validation du formulaire

Validate.java

Valider.tml

Tutoriel Apache Tapestry