TUTORIELS 
Générer dynamiquement un tableau HTML en JSP
Ce tutoriel montre de manière très simple comment utiliser JSP pour générer dynamiquement un tableau HTML. Affichage, récupération de variables postées par formulaire, voici quelques commandes de bases en JSP.  (14 novembre 2001)
 

Avant toute chose, si vous ne disposez pas d'un outil pour exécuter les pages JSP, vous pouvez consulter notre article: "Installation de Tomcat 4.0.1" pour disposer d'une plate-forme de test adéquate.

Notre "application"

Le but est ici de réaliser en JSP un petit programme capable de prendre en compte les souhaits de l'utilisateur (la taille du tableau), transmettre ces variables et générer le tableau correspondant.

Si le but à atteindre n'apparaît pas très compliqué : un "simple" tableau HTML, il n'est pas évident à atteindre pour qui débute en JSP. Il en est tout autre par contre si vous possédez déjà une expérience Java...

Commençons par définir notre formulaire :

<form method="post" action="tableau.jsp">
     Nb col : <input type="text" name="form_colonne" size=1 maxlength="1" value="5">
     Nb ligne : <input type="text" name="form_ligne" size=1 maxlength="1" value="5">
     <input type="hidden" name="passtwo" value="1">
     <input type="submit" value="Générer le tableau">
</form>

Rien de compliqué ici et encore aucune instruction JSP de rencontrée. Nous définissons un formulaire classique destiné à recevoir le nombre de colonne et de ligne souhaités pour le tableau.
On remarque cependant un champ "hidden" (n'apparaît pas à l'écran mais il est néanmoins transmis) qui nous servira à déterminer si l'utilisateur a déjà posté le formulaire.

Notre premier traitement JSP sera donc de détecter si nous avons à traiter un choix de l'internaute ou pas encore :

<%
     String passtwo = request.getParameter("passtwo");
     if (passtwo != null)
     {

          ...
     }
%>

A chaque appel de la page ("tableau.jsp") nous tentons de récupérer via la méthode "getParameter", le paramètre "passtwo", notre fameux champ "hidden".
S'il n'est pas "null" cela signifie que l'utilisateur a soumis le formulaire et nous pouvons commencer le traitement.

La méthode "getParameter" (issue de l'objet "request"), permet de récupérer la valeur d'un champ transmis par "GET" ou "POST". Nous récupérons celle-ci sous forme de chaînes de caractères, or cela nous pose un problème.

En effet, si cela n'est pas génant pour le paramètre "passtwo" que nous testons en tant que chaîne de caractères, les champs "colonne" et "ligne" ont besoin d'être convertis en "Integer" afin de pouvoir les utiliser en tant que valeur.

Voyons comment se passe cette conversion :

<%
     String str_colonne = request.getParameter("form_colonne");
     String str_ligne = request.getParameter("form_ligne");

     int colonne = Integer.parseInt(str_colonne);
     int ligne = Integer.parseInt(str_ligne);

     out.println("Ce tableau possède "+colonne+" Colonne(s) et "+ligne+" Ligne(s).");
     out.println("Il est construit dynamiquement :<p>");
%>

Nous récupérons tout d'abord les valeurs de "colonne" et "ligne" issues du formulaire, puis la méthode "parseInt" de la classe "Integer" va extraire la valeur contenue dans la chaîne de caractères. Les variables "colonne" et "ligne" sont désormais utilisables au sein des boucles imbriquées que nous allons mettre en place pour générer notre tableau.


La création du tableau

A part une ou deux instructions d'affichage, la suite des évènements n'est pas propre aux JSP. Voici néanmoins une dernière instruction :

<%
     out.println("Ce tableau possède "+colonne+" Colonne(s) et "+ligne+" Ligne(s).");
%>

Nous indiquons ici le nombre de colonnes et de lignes contenues par notre tableau.
Il nous reste à voir les boucles "for" imbriquées, classique pour ce type de construction :

%>
     <table border="1" cellpadding="0" cellspacing="0">
<%
     for(int i=1;i<=ligne;i++)
     {
          %>
               <tr>
          <%
          for(int j=1;j<=colonne;j++)
          {
          %>
                <td>
                     // (Normalement sur une seule ligne)
                     <% out.println("&nbsp<font color=#FF0000>Lig : "+i+"</font>,
                     <font color=#0000FF>Col : "+j+"</font>&nbsp;"); %>
                </td>
          <%
          }
          %>
               </tr>
          <%
     }
%>
     </table>
<%
}

On note qu'avant d'insérer chaque instruction HTML, les balises ASP doivent être fermées. Rien de spécial à signaler dans cette portion de code, elle nous sert uniquement à construire les balises <tr> et <td> du tableau, ainsi qu'à afficher dans chaque "case" de celui-ci la position de chacune d'entre elles (colonne 1, ligne 3 par exemple).

Lorsque vous exécuter cet exemple sous Tomcat, votre URL peut ressembler à celui-ci :

http://localhost:8080/examples/jsp/arnaud/tableau.jsp

L'intérêt de cet exercice (dont voici le code source complet) est de se familiariser non seulement avec quelques fonctions de base des JSP mais aussi d'utiliser un interpréteur pour ce type de pages, comme Tomcat. Prenez la peine d'installer celui-ci (l'installation comprend celle du Java2 SDK), et vous n'hésiterez plus par la suite à tester les exemples de code JSP que vous rencontrerez au fil de vos recherches.

 
[ Arnaud GadalJDNet
 
Accueil | Haut de page